Aplicación React react-app
Las aplicaciones de ejemplo son una buena manera de explorar las capacidades sin encabezado de Adobe Experience Manager AEM (). AEM Esta aplicación de React muestra cómo consultar contenido mediante API de GraphQL de utilizando consultas persistentes. AEM El cliente sin encabezado para JavaScript se utiliza para ejecutar las consultas persistentes de GraphQL que alimentan la aplicación.
Ver el código fuente en GitHub
A tutorial paso a paso completo La descripción de cómo se creó esta aplicación React está disponible.
Requisitos previos prerequisites
Las siguientes herramientas deben instalarse localmente:
AEM requisitos de
AEM La aplicación React funciona con las siguientes opciones de implementación de. Todas las implementaciones requieren lo siguiente Sitio WKND 3.0.0+ para instalar.
- AEM as a Cloud Service
- Configuración local mediante el SDK de AEM Cloud Service
- Requiere JDK 11
La aplicación React está diseñada para conectarse a un AEM Publicación de AEM , sin embargo, puede obtener contenido de Autor de la fuente si se proporciona autenticación en la configuración de la aplicación React.
Cómo usar
-
Clonar el
adobe/aem-guides-wknd-graphql
repositorio:code language-shell $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
-
Edite el
aem-guides-wknd-graphql/react-app/.env.development
archivo y establecerREACT_APP_HOST_URI
AEM para apuntar a su objetivo de la.Actualice el método de autenticación si se conecta a una instancia de autor.
code language-plain # Server namespace REACT_APP_HOST_URI=https://publish-p123-e456.adobeaemcloud.com #AUTH (Choose one method) # Authentication methods: 'service-token', 'dev-token', 'basic' or leave blank to use no authentication REACT_APP_AUTH_METHOD=basic # For Bearer auth, use DEV token (dev-token) from Cloud console REACT_APP_DEV_TOKEN=dev-token # For Service toke auth, provide path to service token file (download file from Cloud console) REACT_APP_SERVICE_TOKEN=auth/service-token.json # For Basic auth, use AEM ['user','pass'] pair (eg for Local AEM Author instance) REACT_APP_BASIC_AUTH_USER=admin REACT_APP_BASIC_AUTH_PASS=admin
-
Abra un terminal y ejecute los comandos:
code language-shell $ cd aem-guides-wknd-graphql/react-app $ npm install $ npm start
-
Se debe cargar una nueva ventana del explorador en http://localhost:3000
-
En la aplicación se debe mostrar una lista de las aventuras del sitio de referencia de WKND.
El código
AEM A continuación se muestra un resumen de cómo se crea la aplicación React, cómo se conecta a las consultas sin encabezado para recuperar contenido mediante consultas persistentes de GraphQL y cómo se presentan esos datos. El código completo se encuentra en GitHub.
Consultas persistentes
AEM AEM Siguiendo las prácticas recomendadas sin encabezado de la aplicación React, utiliza consultas persistentes de GraphQL para consultar datos de aventuras, lo cual es muy útil para las consultas. La aplicación utiliza dos consultas persistentes:
wknd/adventures-all
AEM consulta persistente, que devuelve todas las aventuras en con un conjunto abreviado de propiedades de, que se han guardado de forma predeterminada. Esta consulta persistente genera la lista de aventuras de la vista inicial.
# Retrieves a list of all Adventures
#
# Optional query variables:
# - { "offset": 10 }
# - { "limit": 5 }
# - {
# "imageFormat": "JPG",
# "imageWidth": 1600,
# "imageQuality": 90
# }
query ($offset: Int, $limit: Int, $sort: String, $imageFormat: AssetTransformFormat=JPG, $imageWidth: Int=1200, $imageQuality: Int=80) {
adventureList(
offset: $offset
limit: $limit
sort: $sort
_assetTransform: {
format: $imageFormat
width: $imageWidth
quality: $imageQuality
preferWebp: true
}) {
items {
_path
slug
title
activity
price
tripLength
primaryImage {
... on ImageRef {
_path
_dynamicUrl
}
}
}
}
}
wknd/adventure-by-slug
consulta persistente, que devuelve una sola aventura deslug
(una propiedad personalizada que identifica de forma exclusiva una aventura) con un conjunto completo de propiedades. Esta consulta persistente activa las vistas de detalles de aventura.
# Retrieves an Adventure Fragment based on it's unique slug.
#
# Required query variables:
# - {"slug": "bali-surf-camp"}
#
# Optional query variables:
# - {
# "imageFormat": "JPG",
# "imageSeoName": "my-adventure",
# "imageWidth": 1600,
# "imageQuality": 90
# }
#
# This query returns an adventure list but since the the slug property is set to be unique in the Content Fragment Model, only a single Content Fragment is expected.
query ($slug: String!, $imageFormat:AssetTransformFormat=JPG, $imageSeoName: String, $imageWidth: Int=1200, $imageQuality: Int=80) {
adventureList(
filter: {slug: {_expressions: [{value: $slug}]}}
_assetTransform: {
format: $imageFormat
seoName: $imageSeoName
width: $imageWidth
quality: $imageQuality
preferWebp: true
}) {
items {
_path
title
slug
activity
adventureType
price
tripLength
groupSize
difficulty
price
primaryImage {
... on ImageRef {
_path
_dynamicUrl
}
}
description {
json
plaintext
html
}
itinerary {
json
plaintext
html
}
}
_references {
... on AdventureModel {
_path
slug
title
price
__typename
}
}
}
}
Ejecutar consulta persistente de GraphQL
AEM Las consultas persistentes se ejecutan a través de la GET HTTP y, por lo tanto, la variable AEM Cliente sin encabezado para JavaScript está acostumbrado a ejecutar las consultas de GraphQL persistentes AEM contra y cargar el contenido de la aventura en la aplicación.
Cada consulta persistente tiene un React correspondiente useEffect conectar src/api/usePersistedQueries.js
AEM , que llama de forma asíncrona al punto final de consulta persistente de la GET HTTP de la y devuelve los datos de la aventura.
Cada función, a su vez, invoca el aemHeadlessClient.runPersistedQuery(...)
, ejecutando la consulta GraphQL persistente.
// src/api/usePersistedQueries.js
/**
* React custom hook that returns a list of adevntures by activity. If no activity is provided, all adventures are returned.
*
* Custom hook that calls the 'wknd-shared/adventures-all' or 'wknd-shared/adventures-by-activity' persisted query.
*
* @returns an array of Adventure JSON objects, and array of errors
*/
export function useAdventuresByActivity(adventureActivity, params = {}) {
...
let queryVariables = params;
// If an activity is provided (i.e "Camping", "Hiking"...) call wknd-shared/adventures-by-activity query
if (adventureActivity) {
// The key is 'activity' as defined in the persisted query
queryVariables = { ...queryVariables, activity: adventureActivity };
// Call the AEM GraphQL persisted query named "wknd-shared/adventures-by-activity" with parameters
response = await fetchPersistedQuery("wknd-shared/adventures-by-activity", queryVariables);
} else {
// Else call the AEM GraphQL persisted query named "wknd-shared/adventures-all" to get all adventures
response = await fetchPersistedQuery("wknd-shared/adventures-all", queryVariables);
}
...
}
...
/**
* Private function that invokes the AEM Headless client.
*
* @param {String} persistedQueryName the fully qualified name of the persisted query
* @param {*} queryParameters an optional JavaScript object containing query parameters
* @returns the GraphQL data or an error message
*/
async function fetchPersistedQuery(persistedQueryName, queryParameters) {
let data;
let err;
try {
// AEM GraphQL queries are asynchronous, either await their return or use Promise-based .then(..) { ... } syntax
const response = await aemHeadlessClient.runPersistedQuery(
persistedQueryName,
queryParameters
);
// The GraphQL data is stored on the response's data field
data = response?.data;
} catch (e) {
// An error occurred, return the error messages
err = e
.toJSON()
?.map((error) => error.message)
?.join(", ");
console.error(e.toJSON());
}
return { data, err };
}
Vistas
La aplicación React utiliza dos vistas para presentar los datos de la aventura en la experiencia web.
-
src/components/Adventures.js
Invoca
getAdventuresByActivity(..)
desrc/api/usePersistedQueries.js
y muestra las aventuras devueltas en una lista. -
src/components/AdventureDetail.js
Invoca el
getAdventureBySlug(..)
uso delslug
parámetro pasado a través de la selección de aventuras enAdventures
y muestra los detalles de una sola aventura.
Variables de entorno
Varios variables de entorno AEM se utilizan para conectarse a un entorno de. AEM El valor predeterminado se conecta a la publicación de la que se ejecuta en http://localhost:4503
. Actualice el .env.development
AEM , para cambiar la conexión de la:
-
REACT_APP_HOST_URI=https://publish-p123-e456.adobeaemcloud.com
AEM : Se establece en el host de destino de -
REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json
: establezca la ruta del extremo de GraphQL. Esta aplicación de React no la utiliza, ya que solo utiliza consultas persistentes. -
REACT_APP_AUTH_METHOD=
: el método de autenticación preferido. Opcional. De forma predeterminada, no se utiliza ninguna autenticación.service-token
AEM : utilice las credenciales del servicio para obtener un token de acceso en el as a Cloud Service de ladev-token
AEM : utilice el token de desarrollo para el desarrollo local en el as a Cloud Servicebasic
AEM : utilice user/pass para el desarrollo local con el autor de la local- AEM Déjelo en blanco para conectarse a la red sin tener que realizar la autenticación.
-
REACT_APP_AUTHORIZATION=admin:admin
AEM : establezca las credenciales de autenticación básicas que se usarán si se conecta a un entorno de autor de (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, además de la autenticación básica (user:pass), puede utilizar la autenticación del portador con el token de DEV de la consola de Cloud -
REACT_APP_SERVICE_TOKEN
: ruta al archivo de credenciales de servicio. Para conectarse a una instancia remota, la autenticación también se puede realizar con el token de servicio (descargue el archivo desde Developer Console).
AEM Solicitudes de proxy
Al utilizar el servidor de desarrollo de Webpack (npm start
) el proyecto se basa en un configuración de proxy usando http-proxy-middleware
. El archivo se configura en src/setupProxy.js y se basa en varias variables de entorno personalizadas establecidas en .env
y .env.development
.
AEM Si se conecta a un entorno de autor de, la variable es necesario configurar el método de autenticación.
Uso compartido de recursos de origen cruzado (CORS)
AEM AEM Esta aplicación de React se basa en una configuración CORS basada en el que se ejecuta en el entorno de destino de la aplicación de React y supone que la aplicación de React se ejecuta en http://localhost:3000
en modo de desarrollo. Revise laAEM Documentación de implementación sin encabezado para obtener más información sobre cómo configurar CORS.