Reagera app react-app

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

Exempelprogram är ett bra sätt att utforska de headless-funktionerna i Adobe Experience Manager (AEM). I React-programmet visas hur du frågar efter innehåll med hjälp av AEM GraphQL API:er med hjälp av beständiga frågor. AEM Headless Client för JavaScript används för att köra de beständiga GraphQL-frågor som ligger till grund för programmet.

Visa källkoden på GitHub

En fullständig stegvis självstudiekurs som beskriver hur React-appen skapades är tillgänglig.

Förutsättningar prerequisites

Följande verktyg bör installeras lokalt:

AEM

Programmet React fungerar med följande driftsättningsalternativ för AEM. Alla distributioner kräver att WKND-platsen v3.0.0+ är installerad.

Reaktionsprogrammet är utformat för att ansluta till en AEM Publish -miljö, men det kan hämta innehåll från AEM Author om autentisering anges i React-programmets konfiguration.

Så här använder du

Koden

Nedan följer en sammanfattning av hur React-programmet byggs, hur det ansluter till AEM Headless för att hämta innehåll med GraphQL beständiga frågor och hur dessa data presenteras. Den fullständiga koden finns på GitHub.

Beständiga frågor

I enlighet med bästa praxis för AEM Headless använder React-programmet AEM GraphQL beständiga frågor för att fråga efter äventyrsdata. Programmet använder två beständiga frågor:

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

Kör GraphQL beständig fråga

AEM beständiga frågor körs över HTTP GET och därför används klienten AEM Headless för JavaScript för att köra de beständiga GraphQL-frågorna mot AEM och läsa in äventyrsinnehållet i appen.

Varje beständig fråga har en motsvarande React useEffect-krok i src/api/usePersistedQueries.js som asynkront anropar AEM HTTP GET beständiga frågans slutpunkt och returnerar äventyrsdata.

Varje funktion anropar i sin tur aemHeadlessClient.runPersistedQuery(...) och kör den beständiga GraphQL-frågan.

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

Vyer

I React-programmet används två vyer för att presentera äventyrsdata i webbupplevelsen.

Miljövariabler

Flera miljövariabler används för att ansluta till en AEM-miljö. Standardanslutning till AEM Publish som körs vid http://localhost:4503. Uppdatera filen .env.development om du vill ändra AEM-anslutningen:

Proxy AEM-förfrågningar

När du använder webbpaketets utvecklingsserver (npm start) är projektet beroende av en proxykonfiguration med http-proxy-middleware. Filen är konfigurerad på src/setupProxy.js och är beroende av flera anpassade miljövariabler inställda på .env och .env.development.

Om du ansluter till en AEM-redigeringsmiljö måste motsvarande autentiseringsmetod konfigureras.

Cross-origin resource sharing (CORS)

Det här React-programmet är beroende av en AEM-baserad CORS-konfiguration som körs i AEM-målmiljön och förutsätter att React-appen körs på http://localhost:3000 i utvecklingsläge. Mer information om hur du konfigurerar och konfigurerar CORS finns i AEM Headless-distributionsdokumentationen.