Las aplicaciones de ejemplo son una buena manera de explorar las capacidades sin objetivos de Adobe Experience Manager (AEM). Se proporciona una aplicación React que muestra cómo consultar contenido mediante las API de GraphQL de AEM. El cliente sin encabezado de AEM para JavaScript se utiliza para ejecutar las consultas de GraphQL que alimentan la aplicación.
Consulte la código fuente en GitHub
Hay disponible un tutorial paso a paso completo here.
Las siguientes herramientas deben instalarse localmente:
La aplicación está diseñada para conectarse a un AEM Autor o Publicación con la última versión de Sitio de referencia WKND instalado.
Recomendamos implementación del sitio de referencia WKND en un entorno de Cloud Service. Una configuración local mediante el SDK de AEM Cloud Service o 6.5 QuickStart jar también se puede utilizar.
Clonar el aem-guides-wknd-graphql
repositorio:
git clone git@github.com:adobe/aem-guides-wknd-graphql.git
Edite el aem-guides-wknd/react-app/.env.development
y asegúrese de que REACT_APP_HOST_URI
apunta a la instancia de AEM de destino. Actualice el método de autenticación (si se conecta a una instancia de autor).
# Server namespace
REACT_APP_HOST_URI=http://localhost:4503
REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
#AUTH (Choose one method)
# Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication
...
Abra un terminal y ejecute los comandos:
$ cd aem-guides-wknd-graphql/react-app
$ npm install
$ npm start
Se debe cargar una nueva ventana del explorador en http://localhost:3000
Se debe mostrar en la aplicación una lista de las aventuras del sitio de referencia WKND.
A continuación se muestra un breve resumen de los archivos y el código importantes utilizados para activar la aplicación. El código completo se puede encontrar en GitHub.
La variable AEM cliente sin encabezado se utiliza para ejecutar la consulta de GraphQL. El cliente AEM sin encabezado proporciona dos métodos para ejecutar consultas. runQuery
y runPersistedQuery
.
runQuery
ejecuta una consulta GraphQL estándar para AEM contenido y es el tipo más común de ejecución de consultas.
Consultas persistentes son una función de AEM que almacena en caché los resultados de una consulta de GraphQL y, a continuación, hace que el resultado esté disponible durante la GET. Las consultas persistentes deben usarse para consultas comunes que se ejecutan una y otra vez. En esta aplicación, la lista de aventuras es la primera consulta ejecutada en la pantalla principal. Esta será una consulta muy popular y, por lo tanto, se debe utilizar una consulta persistente. runPersistedQuery
ejecuta una solicitud en un extremo de consulta persistente.
src/api/useGraphQL.js
es Vínculo React Effect que escucha los cambios en el parámetro query
y path
. If query
está en blanco, se utiliza una consulta persistente basada en la variable path
. Aquí es donde se construye AEM cliente sin encabezado y se utiliza para recuperar datos.
function useGraphQL(query, path) {
let [data, setData] = useState(null);
let [errorMessage, setErrors] = useState(null);
useEffect(() => {
// construct a new AEMHeadless client based on the graphQL endpoint
const sdk = new AEMHeadless({ endpoint: REACT_APP_GRAPHQL_ENDPOINT })
// if query is not null runQuery otherwise fall back to runPersistedQuery
const request = query ? sdk.runQuery.bind(sdk) : sdk.runPersistedQuery.bind(sdk);
request(query || path)
.then(({ data, errors }) => {
//If there are errors in the response set the error message
if(errors) {
setErrors(mapErrors(errors));
}
//If data in the response set the data as the results
if(data) {
setData(data);
}
})
.catch((error) => {
setErrors(error);
});
}, [query, path]);
return {data, errorMessage}
}
La aplicación muestra principalmente una lista de aventuras y ofrece a los usuarios la opción de hacer clic en los detalles de una aventura.
Adventures.js
- Muestra una lista de Aventuras con tarjeta. El estado inicial hace uso de Consultas persistentes que es preempaquetado con el sitio de referencia WKND. El punto final es /wknd/adventures-all
. Hay varios botones que permiten al usuario experimentar con el filtrado de resultados en función de una actividad:
function filterQuery(activity) {
return `
{
adventureList (filter: {
adventureActivity: {
_expressions: [
{
value: "${activity}"
}
]
}
}){
items {
_path
adventureTitle
adventurePrice
adventureTripLength
adventurePrimaryImage {
... on ImageRef {
_path
mimeType
width
height
}
}
}
}
}
`;
}
AdventureDetail.js
- Muestra una vista detallada de la aventura. Realiza una consulta graphQL basada en la ruta a la aventura que se analiza desde la dirección url:
//parse the content fragment from the url
const contentFragmentPath = props.location.pathname.substring(props.match.url.length);
...
function adventureDetailQuery(_path) {
return `{
adventureByPath (_path: "${_path}") {
item {
_path
adventureTitle
adventureActivity
adventureType
adventurePrice
adventureTripLength
adventureGroupSize
adventureDifficulty
adventurePrice
adventurePrimaryImage {
... on ImageRef {
_path
mimeType
width
height
}
}
adventureDescription {
html
}
adventureItinerary {
html
}
}
}
}
`;
}
Varios variables de entorno se utilizan en este proyecto para conectarse a un entorno AEM. El valor predeterminado se conecta a un entorno de creación AEM que se ejecuta en http://localhost:4502. Si desea cambiar este comportamiento, actualice el .env.development
en consecuencia:
REACT_APP_HOST_URI=http://localhost:4502
- Se establece en AEM host de destinoREACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
- Establecer la ruta del extremo de GraphQLREACT_APP_AUTH_METHOD=
- El método de autenticación preferido. Opcional, de forma predeterminada no se utiliza ninguna autenticación.
service-token
- utilizar el intercambio de tokens de servicio para Cloud Env PRODdev-token
- usar el token de desarrollo local con Cloud Envbasic
- usar user/pass para desarrollo local con Local Author EnvREACT_APP_AUTHORIZATION=admin:admin
: establezca credenciales de autenticación básicas para utilizarlas si se conectan a un entorno de AEM Author (solo para desarrollo). Si se conecta a un entorno de publicación, esta configuración no es necesaria.REACT_APP_DEV_TOKEN
- Cadena de token de desarrollador. Para conectarse a una instancia remota, junto a la autenticación básica (user:pass), puede utilizar la autenticación del portador con el token DEV de la consola de la nubeREACT_APP_SERVICE_TOKEN
: ruta al archivo token de servicio. Para conectarse a una instancia remota, la autenticación se puede realizar con el token de servicio también (descargue el archivo desde la consola de Cloud)Al utilizar el servidor de desarrollo de webpack (npm start
) el proyecto se basa en un configuración de proxy using http-proxy-middleware
. El archivo está configurado en src/setupProxy.js y se basa en varias variables de entorno personalizadas configuradas en .env
y .env.development
.
Si se conecta a un entorno de creación AEM, debe configurarse el método de autenticación correspondiente.
Este proyecto se basa en una configuración CORS que se ejecuta en el entorno de AEM de destino y asume que la aplicación se ejecuta en http://localhost:3000 en modo de desarrollo. La variable Configuración de CORs forma parte del Sitio de referencia WKND.
Configuración CORS de ejemplo para entorno de creación