React App

Les exemples d’applications sont un excellent moyen d’explorer les fonctionnalités d’Adobe Experience Manager (AEM) sans interface utilisateur. Cette application React explique comment interroger du contenu à l’aide AEM API GraphQL à l’aide de requêtes persistantes. Le client AEM sans affichage pour JavaScript est utilisé pour exécuter les requêtes persistantes GraphQL qui alimentent l’application.

Application React avec AEM sans affichage

Afficher la variable code source sur GitHub

A tutoriel détaillé complet décrivant comment cette application React a été créée est disponible.

Prérequis

Les outils suivants doivent être installés localement :

Configuration requise AEM

L’application React fonctionne avec les options de déploiement AEM suivantes. Tous les déploiements nécessitent la variable Site WKND v2.0.0+ à installer.

L’application React est conçue pour se connecter à une Publication AEM , mais il peut toutefois sources du contenu à partir de l’auteur AEM si l’authentification est fournie dans la configuration de l’application React.

Utilisation

  1. Cloner le adobe/aem-guides-wknd-graphql référentiel :

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

  2. Modifiez la variable aem-guides-wknd-graphql/react-app/.env.development fichier et définition REACT_APP_HOST_URI pour pointer vers votre AEM cible.

    Mettez à jour la méthode d’authentification lors de la connexion à une instance d’auteur.

    # 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. Ouvrez un terminal et exécutez les commandes :

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

  4. Une nouvelle fenêtre de navigateur doit s’afficher http://localhost:3000

  5. Une liste des aventures du site de référence WKND doit s’afficher sur l’application.

Le code

Vous trouverez ci-dessous un résumé de la création de l’application React, de sa connexion à AEM sans affichage pour récupérer du contenu à l’aide de requêtes persistantes GraphQL et de la manière dont ces données sont présentées. Le code complet se trouve sur GitHub.

Requêtes persistantes

En suivant AEM bonnes pratiques sans affichage, l’application React utilise AEM requêtes persistantes GraphQL pour interroger les données d’aventure. L’application utilise deux requêtes persistantes :

  • wknd/adventures-all requête persistante, qui renvoie toutes les aventures d’AEM avec un jeu abrégé de propriétés. Cette requête persistante entraîne la liste des aventures de la vue initiale.
# Retrieves a list of all adventures
{
    adventureList {
        items {
            _path
            slug
            title
            price
            tripLength
            primaryImage {
                ... on ImageRef {
                _path
                mimeType
                width
                height
                }
            }
        }
    }
}
  • wknd/adventure-by-slug requête persistante, qui renvoie une seule aventure par slug (propriété personnalisée qui identifie de manière unique une aventure) avec un ensemble complet de propriétés. Cette requête persistante alimente les vues détaillées de l’aventure.
# 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
      }
    }
  }
}

Exécuter la requête persistante GraphQL

AEM requêtes persistantes sont exécutées sur une GET HTTP et, par conséquent, la variable AEM client sans affichage pour JavaScript est utilisé pour exécuter les requêtes GraphQL persistantes ; par rapport à AEM et chargez le contenu de l’aventure dans l’application.

Chaque requête conservée possède un React correspondant. useEffect hook src/api/usePersistedQueries.js, qui appelle de manière asynchrone le point de terminaison de requête persistant de la GET HTTP AEM et renvoie les données d’aventure.

Chaque fonction appelle à son tour la fonction aemHeadlessClient.runPersistedQuery(...), exécution de la requête GraphQL conservée.

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

Vues

L’application React utilise deux vues pour présenter les données de l’aventure dans l’expérience web.

  • src/components/Adventures.js

    Appels getAdventuresByActivity(..) de src/api/usePersistedQueries.js et affiche les aventures renvoyées dans une liste.

  • src/components/AdventureDetail.js

    Appelle le getAdventureBySlug(..) en utilisant la variable slug param transmis via la sélection aventure sur le Adventures et affiche les détails d’une seule aventure.

Variables d’environnement

Plusieurs variables d'environnement sont utilisés pour se connecter à un environnement AEM. La valeur par défaut se connecte à la publication AEM en cours d’exécution à l’adresse http://localhost:4503. Mettez à jour le .env.development pour modifier la connexion AEM :

  • REACT_APP_HOST_URI=http://localhost:4502: Défini sur AEM hôte cible
  • REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json: Définissez le chemin d’accès du point de terminaison GraphQL. Elle n’est pas utilisée par cette application React, car cette application utilise uniquement des requêtes persistantes.
  • REACT_APP_AUTH_METHOD=: Méthode d’authentification préférée. Facultatif, aucune authentification n’est utilisée par défaut.
    • service-token: Utiliser les informations d’identification du service pour obtenir un jeton d’accès sur AEM as a Cloud Service
    • dev-token: Utilisation du jeton de développement pour le développement local sur AEM as a Cloud Service
    • basic: Utilisation de l’utilisateur/de la transmission pour le développement local avec l’auteur AEM local
    • Laissez vide pour vous connecter à AEM sans authentification
  • REACT_APP_AUTHORIZATION=admin:admin: Définissez les informations d’identification d’authentification de base à utiliser lors de la connexion à un environnement d’auteur AEM (pour le développement uniquement). Si vous vous connectez à un environnement de publication, ce paramètre n’est pas nécessaire.
  • REACT_APP_DEV_TOKEN: Chaîne du jeton de développement. Pour vous connecter à une instance distante, en plus de l’authentification de base (user:pass), vous pouvez utiliser l’authentification du porteur avec le jeton DEV de la console Cloud.
  • REACT_APP_SERVICE_TOKEN: Chemin d’accès au fichier d’informations d’identification du service. Pour vous connecter à une instance distante, l’authentification peut également être effectuée avec le jeton de service (téléchargez le fichier depuis Developer Console).

Demandes d’AEM de proxy

Lors de l’utilisation du serveur de développement webpack (npm start), le projet repose sur un configuration du proxy using http-proxy-middleware. Le fichier est configuré à l’adresse src/setupProxy.js et repose sur plusieurs variables d’environnement personnalisées définies sur .env et .env.development.

Si vous vous connectez à un environnement de création AEM, la variable la méthode d’authentification doit être configurée..

Partage de ressources cross-origin (CORS)

Cette application React repose sur une configuration CORS basée sur AEM s’exécutant sur l’environnement AEM cible et suppose que l’application React s’exécute sur http://localhost:3000 en mode de développement. Le Configuration CORS fait partie de la variable Site WKND.

Configuration CORS

Sur cette page