AEM ヘッドレス SDK
AEM ヘッドレス SDK は、クライアントが HTTP 経由で AEM ヘッドレス API を素早く簡単に操作するために使用できるライブラリのセットです。
AEM ヘッドレス SDK は、次の様々なプラットフォームで使用できます。
永続的な GraphQL クエリ
(クライアント定義の GraphQL クエリではなく)永続クエリを介した GraphQL を使用して AEM にクエリを実行すると、開発者は AEM でクエリ(ただし、その結果ではない)を永続化してから、クエリを名前で実行するようにリクエストできます。永続クエリは、SQL データベースのストアドプロシージャの概念と似ています。
永続クエリは、CDN および AEM Dispatcher 層でキャッシュ可能な HTTP GET を使用して実行されるので、クライアント定義の GraphQL クエリよりもパフォーマンスが高くなります。また、永続クエリが有効になると、API が定義され、開発者が各コンテンツフラグメントモデルの詳細を理解する必要性が切り離されます。
コードの例 persisted-graphql-queries-code-examples
AEM に対して GraphQL 永続クエリを実行する方法のコード例を以下に示します。
Node.js プロジェクトのルートから npm install
コマンドを実行して、@adobe/aem-headless-client-js をインストールします。
code language-none |
---|
|
このコード例は、async/await
構文を介して @adobe/aem-headless-client-js npm モジュールを使用して AEM にクエリを実行する方法を示しています。JavaScript 用 AEM ヘッドレス SDK は、Promise 構文もサポートしています。
このコードでは、wknd/adventureNames
という名前の永続クエリが AEM オーサーで作成され、AEM パブリッシュに公開されていることを前提としています。
code language-javascript |
---|
|
React プロジェクトのルートから npm install
コマンドを実行して、@adobe/aem-headless-client-js をインストールします。
code language-none |
---|
|
このコード例は、React useEffect(…) フック を使用して AEM GraphQL への非同期呼び出しを実行する方法を示しています。
React で useEffect
を使用して非同期の GraphQL 呼び出しを行うのは、次の理由で役立ちます。
- AEM への非同期呼び出しの同期ラッパーを提供します。
- 不必要な AEM のクエリの再実行を減らします。
このコードでは、wknd-shared/adventure-by-slug
という名前の永続クエリが AEM オーサーで作成され、GraphiQL を使用して AEM パブリッシュに公開されていることを前提としています。
code language-javascript |
---|
|
React コンポーネントの別の場所からカスタム React useEffect
フックを呼び出します。
code language-javascript |
---|
|
React アプリが使用する永続クエリごとに新しい useEffect
フックを作成できます。
GraphQL クエリ
AEM はクライアント定義の GraphQL クエリをサポートしていますが、GraphQL 永続クエリを使用することが AEM のベストプラクティスです。
Webpack 5+
AEM ヘッドレス 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
を実行して依存関係をインストールします。