React App

Las aplicaciones de ejemplo son una buena manera de explorar las capacidades sin objetivos de Adobe Experience Manager (AEM). Esta aplicación React muestra cómo consultar contenido mediante AEM API de GraphQL mediante consultas persistentes. El cliente sin AEM para JavaScript se utiliza para ejecutar las consultas persistentes de GraphQL que activan la aplicación.

Reaccione la aplicación con AEM sin encabezado

Consulte la código fuente en GitHub

A tutorial paso a paso completo describe cómo está disponible la compilación de esta aplicación React.

Requisitos previos

Las siguientes herramientas deben instalarse localmente:

AEM requisitos

La aplicación React funciona con las siguientes opciones de implementación AEM. Todas las implementaciones requieren la variable Sitio WKND v2.0.0+ para instalar.

La aplicación React está diseñada para conectarse a un AEM Publish , sin embargo, puede obtener contenido de AEM Author si se proporciona autenticación en la configuración de la aplicación React.

Utilización

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

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

  2. Edite el aem-guides-wknd-graphql/react-app/.env.development archivo y conjunto REACT_APP_HOST_URI para que apunte a su 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

#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

  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 resumen de cómo se crea la aplicación React, cómo se conecta a AEM sin encabezado para recuperar contenido mediante consultas persistentes de GraphQL y cómo se presentan esos datos. El código completo se puede encontrar en GitHub.

Consultas persistentes

Siguiendo AEM prácticas recomendadas sin encabezado, la aplicación React utiliza AEM consultas persistentes de GraphQL para consultar datos de aventura. La aplicación utiliza dos consultas persistentes:

  • wknd/adventures-all consulta persistente, que devuelve todas las aventuras en AEM con un conjunto abreviado de propiedades. Esta consulta persistente impulsa la lista de aventuras de la vista inicial.
# Retrieves a list of all adventures
{
    adventureList {
        items {
            _path
            slug
            title
            price
            tripLength
            primaryImage {
                ... on ImageRef {
                _path
                mimeType
                width
                height
                }
            }
        }
    }
}
  • wknd/adventure-by-slug consulta persistente, que devuelve una sola aventura de slug (una propiedad personalizada que identifica de forma exclusiva una aventura) con un conjunto completo de propiedades. Esta consulta persistente potencia las vistas de detalles de aventura.
# Retrieves an adventure Content Fragment based on it's slug
# Example query variables:
# {"slug": "bali-surf-camp"}
# Technically returns an adventure list but since the the slug
# property is set to be unique in the CF Model, only a single CF is expected

query($slug: String!) {
  adventureList(filter: {
        slug: {
          _expressions: [ { value: $slug } ]
        }
      }) {
    items {
      _path
      title
      slug
      activity
      adventureType
      price
      tripLength
      groupSize
      difficulty
      price
      primaryImage {
        ... on ImageRef {
          _path
          mimeType
          width
          height
        }
      }
      description {
        json
        plaintext
      }
      itinerary {
        json
        plaintext
      }
    }
    _references {
      ...on AdventureModel {
        _path
        slug
        title
        price
        __typename
      }
    }
  }
}

Ejecutar consulta persistente de GraphQL

AEM las consultas persistentes se ejecutan a través de GET HTTP y, por lo tanto, la variable AEM cliente sin encabezado para JavaScript se usa para ejecutar las consultas de GraphQL persistentes con AEM y cargue el contenido de aventura en la aplicación.

Cada consulta persistente tiene un React correspondiente useEffect gancho en src/api/usePersistedQueries.js, que llama asincrónicamente al punto final de la consulta AEM GET HTTP persistente y devuelve los datos de aventura.

Cada función, a su vez, invoca la variable aemHeadlessClient.runPersistedQuery(...), ejecutando la consulta de 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) {
  ...
  // 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
    const queryParameters = { activity: adventureActivity };

    // Call the AEM GraphQL persisted query named "wknd-shared/adventures-by-activity" with parameters
    response = await fetchPersistedQuery("wknd-shared/adventures-by-activity", queryParameters);
  } else {
    // Else call the AEM GraphQL persisted query named "wknd-shared/adventures-all" to get all adventures
    response = await fetchPersistedQuery("wknd-shared/adventures-all");
  }

  ...
}

...
/**
 * 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 aventura en la experiencia web.

  • src/components/Adventures.js

    Invocaciones getAdventuresByActivity(..) from src/api/usePersistedQueries.js y muestra las aventuras devueltas en una lista.

  • src/components/AdventureDetail.js

    Invoca el getAdventureBySlug(..) usando la variable slug parámetro transferido a través de la selección de aventura en la variable Adventures y muestra los detalles de una sola aventura.

Variables de entorno

Varios variables de entorno se utilizan para conectarse a un entorno de AEM. El valor predeterminado se conecta a AEM Publish que se ejecuta en http://localhost:4503. Actualice el .env.development para cambiar la conexión AEM :

  • REACT_APP_HOST_URI=http://localhost:4502: Establecer en AEM host de destino
  • REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json: Establezca la ruta del extremo de GraphQL. Esta aplicación React no la usa, ya que esta aplicación solo utiliza consultas persistentes.
  • REACT_APP_AUTH_METHOD=: Método de autenticación preferido. Opcional, de forma predeterminada no se utiliza ninguna autenticación.
    • service-token: Usar credenciales de servicio para obtener un token de acceso en AEM as a Cloud Service
    • dev-token: Utilice el token dev para el desarrollo local en AEM as a Cloud Service
    • basic: Utilice user/pass para desarrollo local con AEM Author local
    • Deje en blanco para conectarse a AEM sin autenticación
  • REACT_APP_AUTHORIZATION=admin:admin: Establezca las credenciales de autenticación básicas para usarlas si se conecta 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 Cloud
  • REACT_APP_SERVICE_TOKEN: Ruta al archivo de credenciales 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 Developer Console).

Solicitudes de AEM 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 de AEM, el es necesario configurar el método de autenticación.

Uso compartido de recursos de origen diverso (CORS)

Esta aplicación React se basa en una configuración CORS basada en AEM que se ejecuta en el entorno de AEM de destino y asume que la aplicación React se ejecuta en http://localhost:3000 en modo de desarrollo. La variable Configuración CORS forma parte del Sitio WKND.

Configuración CORS

En esta página