Aplicación React react-app

[AEM sin encabezado as a Cloud Service]{class="badge informative"}

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 utilizando las 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.

AEM con la aplicación sin encabezado

Ver el código fuente en GitHub

Hay disponible un tutorial paso a paso que describe cómo se creó esta aplicación de React.

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 que esté instalado WKND Site v3.0.0+.

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

Cómo usar

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:

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

# 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 consultas persistentes se ejecutan a través de la GET AEM HTTP y, por lo tanto, Cliente sin encabezado para JavaScript se usa para ejecutar las consultas persistentes de GraphQL AEM en contra de las consultas y cargar el contenido de aventura en la aplicación.

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

A su vez, cada función invoca aemHeadlessClient.runPersistedQuery(...) y ejecuta 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, 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.

Variables de entorno

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

AEM Solicitudes de proxy

Al usar el servidor de desarrollo de Webpack (npm start), el proyecto depende de una configuración proxy que usa http-proxy-middleware. El archivo está configurado en src/setupProxy.js y depende de varias variables de entorno personalizadas establecidas en .env y .env.development.

AEM Si se conecta a un entorno de autor de, el método de autenticación correspondiente debe configurarse.

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. AEM Revise la documentación de implementación sin encabezado para obtener más información sobre cómo configurar CORS.