AEM Headless SDK

설치 @adobe/aem-headless-client-js 다음을 실행하여 npm install 명령을 추가합니다.

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

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

이 코드에서는 이름이 인 지속된 쿼리를 가정합니다 wknd/adventureNames 은 AEM 작성자에서 만들어지고 AEM 게시에 게시되었습니다.

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 작성자에서 만들어지고 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 앱에서 사용하는 각 지속적인 쿼리에 대해 후크를 만들 수 있습니다.