Reagera app react-app

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

Exempelprogram är ett bra sätt att utforska Adobe Experience Manager headless-funktioner (AEM). Det här React-programmet visar hur du kan fråga efter innehåll med hjälp AEM GraphQL API:er med beständiga frågor. AEM Headless Client för JavaScript används för att köra de beständiga GraphQL-frågor som stöder appen.

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 AEM driftsättningsalternativ. 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 kan hämta innehåll från AEM författare 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

Efter AEM Headless-metodtips används AEM GraphQL beständiga frågor i React-programmet 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 via 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 den AEM HTTP-GETENS 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övariableranvänds för att ansluta till en AEM. Standard ansluter till AEM Publish som körs vid http://localhost:4503. Uppdatera filen .env.development om du vill ändra AEM:

AEM

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 författarmiljö 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 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.