AEM Headless SDK

AEM Headless SDK是一组库,客户端可以使用它通过HTTP与AEM Headless API快速轻松地交互。

AEM Headless SDK适用于各种平台:

持久 GraphQL 查询

使用GraphQL通过持久查询(与客户端定义的GraphQL查询不同)查询AEM允许开发人员在AEM中保留查询(但不保留其结果),然后请求按名称执行查询。 持久查询与SQL数据库中存储过程的概念类似。

持久查询比客户端定义的GraphQL查询性能更高,因为持久查询使用HTTPGET执行,该HTTP查询可在CDN和AEM Dispatcher层缓存。 持久查询也有效,定义了API,并降低了开发人员了解每个内容片段模型详细信息的需要。

代码示例 persisted-graphql-queries-code-examples

以下代码示例介绍了如何对AEM执行GraphQL持久查询。

JavaScript示例

通过从Node.js项目的根目录运行npm install命令,安装@adobe/aem-headless-client-js

code language-none
$ npm i @adobe/aem-headless-client-js

此代码示例说明如何使用@adobe/aem-headless-client-js npm模块通过async/await语法查询AEM。 适用于JavaScript的AEM Headless SDK还支持承诺语法

此代码假定已在AEM Author上创建名为wknd/adventureNames的持久查询并将其发布到AEM Publish。

code language-javascript
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" });
React useEffect(..) 示例

通过从React项目的根目录运行npm install命令来安装@adobe/aem-headless-client-js

code language-none
$ npm i @adobe/aem-headless-client-js

此代码示例说明如何使用React useEffect(…) 挂接以执行对AEM GraphQL的异步调用。

在React中使用useEffect进行异步GraphQL调用很有用,因为:

  1. 它为AEM的异步调用提供同步包装器。
  2. 它减少了不必要的请求AEM。

此代码假定已在AEM Author中创建名为wknd-shared/adventure-by-slug的持久查询,并使用GraphiQL将其发布到AEM Publish。

code language-javascript
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组件的其他位置调用自定义React useEffect挂接。

code language-javascript
import useAdventureBySlug from '...';

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

可以为React应用程序使用的每个持久查询创建新的useEffect挂接。

GraphQL查询

AEM支持客户端定义的GraphQL查询,不过,使用持久GraphQL查询是AEM的最佳实践。

Webpack 5+

AEM Headless JS SDK对util具有依赖关系,默认情况下,该依赖关系未包含在Webpack 5+中。 如果您使用的是Webpack 5+,则会收到以下错误:

Compiled with problems:
× ERROR in ./node_modules/@adobe/aio-lib-core-errors/src/AioCoreSDKErrorWrapper.js 12:13-28
Module not found: Error: Can't resolve 'util' in '/Users/me/Code/wknd-headless-examples/node_modules/@adobe/aio-lib-core-errors/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
    - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "util": false }

将以下devDependencies添加到您的package.json文件:

  "devDependencies": {
    "buffer": "npm:buffer@^6.0.3",
    "crypto": "npm:crypto-browserify@^3.12.0",
    "http": "npm:stream-http@^3.2.0",
    "https": "npm:https-browserify@^1.0.0",
    "stream": "npm:stream-browserify@^3.0.0",
    "util": "npm:util@^0.12.5",
    "zlib": "npm:browserify-zlib@^0.2.0"
  },

然后运行npm install以安装依赖项。

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4