React App

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

React Application

Hay disponible un tutorial paso a paso completo here.

Requisitos previos

Las siguientes herramientas deben instalarse localmente:

Requisitos AEM

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.

Utilización

  1. Clonar el aem-guides-wknd-graphql repositorio:

    git clone git@github.com:adobe/aem-guides-wknd-graphql.git

  2. 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
...

  3. Abra un terminal y ejecute los comandos:

    $ cd aem-guides-wknd-graphql/react-app
$ npm install
$ npm start

  4. Se debe cargar una nueva ventana del explorador en http://localhost:3000

  5. Se debe mostrar en la aplicación una lista de las aventuras del sitio de referencia WKND.

El código

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.

AEM cliente sin encabezado para JavaScript

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}
}

Contenido de aventura

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
          }
      }
    }
  }
  `;
}

Variables de entorno

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 destino
  • REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json - Establecer la ruta del extremo de GraphQL
  • REACT_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 PROD
    • dev-token - usar el token de desarrollo local con Cloud Env
    • basic - usar user/pass para desarrollo local con Local Author Env
    • deje en blanco para no usar ningún método de autenticación
  • REACT_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 nube
  • REACT_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)

Solicitudes de API de proxy

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.

CORS - Uso compartido de recursos de origen cruzado

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

Configuración CORS de ejemplo para entorno de creación

En esta página