AEM Headless SDK

설치 @adobe/aem-headless-client-js 를 실행하여 npm install Node.js 프로젝트의 루트에 있는 명령입니다.

$ npm i @adobe/aem-headless-client-js

이 코드 예는 다음을 사용하여 AEM을 쿼리하는 방법을 보여 줍니다. @adobe/aem-headless-client-js 를 사용하는 npm 모듈 async/await 구문. JavaScript용 AEM Headless SDK는 Promise 구문.

이 코드는 라는 이름의 지속 쿼리를 가정합니다. wknd/adventureNames 이(가) AEM 작성자에 만들어져 AEM Publish에 게시되었습니다.

import AEMHeadless from '@adobe/aem-headless-client-js';

// Initialize the AEMHeadless client with connection details
const aemHeadlessClient = new AEMHeadless({
    serviceURL: 'https://publish-p123-e789.adobeaemcloud.com',  // The AEM environment to query, this can be pulled out to env variables
    endpoint: '/content/cq:graphql/wknd-shared/endpoint.json',  // The AEM GraphQL endpoint, this is not used when invoking persisted queries.
})

/**
 * Uses the AEM Headless SDK to execute a persisted query with optional query variables.

 * @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
 */
export async function executePersistedQuery(persistedQueryName, queryParameters) {
    let data;
    let errors;

    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) {
        console.error(e.toJSON())
        errors = e;
    }

    return { data, errors };
};

// Execute the persisted query using its name 'wknd-shared/adventures-by-slug' and optional query variables
let { data, errors } = executePersistedQuery('wknd-shared/adventures-by-slug', { "slug": "bali-surf-camp" });

설치 @adobe/aem-headless-client-js 를 실행하여 npm install react 프로젝트의 루트에서 명령.

$ npm i @adobe/aem-headless-client-js

이 코드 예는 를 사용하는 방법을 보여 줍니다. React useEffect(…) 후크 AEM GraphQL에 대한 비동기 호출을 실행합니다.

사용 useEffect 다음과 같은 이유로 React에서 비동기 GraphQL 호출을 수행하는 것이 유용합니다.

1. AEM에 대한 비동기 호출에 대한 동기 래퍼를 제공합니다.
2. AEM을 불필요하게 요청하는 것을 줄입니다.

이 코드는 라는 이름의 지속 쿼리를 가정합니다. wknd-shared/adventure-by-slug 은(는) AEM Author에서 만들어지고 GraphiQL을 사용하여 AEM Publish에 게시되었습니다.

import AEMHeadless from '@adobe/aem-headless-client-js';
import { useEffect, useState } from "react";

// Initialize the AEMHeadless client with connection details
const aemHeadlessClient = new AEMHeadless({
    serviceURL: 'https://publish-p123-e789.adobeaemcloud.com', // The AEM environment to query
    endpoint: '/content/cq:graphql/wknd-shared/endpoint.json'         // The AEM GraphQL endpoint, this is not used when invoking persisted queries.
})

/**
 * Private, shared function that invokes the AEM Headless client.
 * React components/views will invoke GraphQL via the custom React useEffect hooks defined below.
 *
 * @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 };
}

/**
 * Calls the 'wknd-shared/adventure-by-slug' and provided the {slug} as the persisted query's `slug` parameter.
 *
 * @param {String!} slug the unique slug used to specify the adventure to return
 * @returns a JSON object representing the adventure
 */
export function useAdventureBySlug(slug) {
  const [adventure, setAdventure] = useState(null);
  const [errors, setErrors] = useState(null);

  useEffect(() => {
    async function fetchData() {
      // The key is the variable name as defined in the persisted query, and may not match the model's field name
      const queryParameters = { slug: slug };

      // Invoke the persisted query, and pass in the queryParameters object as the 2nd parameter
      const { data, err } = await fetchPersistedQuery(
        "wknd-shared/adventure-by-slug",
        queryParameters
      );

      if (err) {
        // Capture errors from the HTTP request
        setErrors(err);
      } else if (data?.adventureList?.items?.length === 1) {
        // Set the adventure data after data validation (there should only be 1 matching adventure)
        setAdventure(data.adventureList.items[0]);
      } else {
        // Set an error if no adventure could be found
        setErrors(`Cannot find adventure with slug: ${slug}`);
      }
    }
    fetchData();
  }, [slug]);

  return { adventure, errors };
}

사용자 지정 React 호출 useEffect React 구성 요소의 다른 위치에서 후크합니다.

import useAdventureBySlug from '...';

let { data, errors } = useAdventureBySlug('bali-surf-camp');

신규 useEffect 후크는 React 앱이 사용하는 각 지속 쿼리에 대해 만들 수 있습니다.