AEM Headless SDK
The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP.
The AEM Headless SDK is available for various platforms:
Persisted GraphQL queries
Querying AEM using GraphQL using persisted queries (as opposed to client-defined GraphQL queries) allows developers to persist a query (but not its results) in AEM, and then request the query to be executed by name. Persisted queries are similar to the concept of stored procedures in SQL databases.
Persisted queries are more performant than client-defined GraphQL queries, as persisted queries are executed using HTTP GET, which is cache-able at the CDN and AEM Dispatcher tiers. Persisted queries also in effect, define an API, and decouple the need for the developer to understand the details of each Content Fragment Model.
Code examples persisted-graphql-queries-code-examples
The following are code examples of how to execute a GraphQL persisted query against AEM.
Install the @adobe/aem-headless-client-js by running the npm install
command from the root of your Node.js project.
code language-none |
---|
|
This code example shows how to query AEM using the @adobe/aem-headless-client-js npm module using async/await
syntax. The AEM Headless SDK for JavaScript also supports Promise syntax.
This code assumes a persisted query with the name wknd/adventureNames
has been created on AEM Author and published to AEM Publish.
code language-javascript |
---|
|
Install the @adobe/aem-headless-client-js by running the npm install
command from the root of your React project.
code language-none |
---|
|
This code example shows how to use the React useEffect(…) hook to execute an asynchronous call to AEM GraphQL.
Using useEffect
to make the asynchronous GraphQL call in React is useful because:
- It provides synchronous wrapper for the asynchronous call to AEM.
- It reduces unnecessarily requerying AEM.
This code assumes a persisted query with the name wknd-shared/adventure-by-slug
has been created on AEM Author and published to AEM Publish using GraphiQL.
code language-javascript |
---|
|
Invoke the custom React useEffect
hook from elsewhere in a React component.
code language-javascript |
---|
|
New useEffect
hooks can be created for each persisted query the React app uses.
GraphQL queries
AEM supports client-defined GraphQL queries, however it is AEM best practice to use persisted GraphQL queries.
Webpack 5+
The AEM Headless JS SDK has dependencies on util
which is not included in Webpack 5+ by default. If you are using Webpack 5+, and receive the following error:
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 }
Add the following devDependencies
to your package.json
file:
"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"
},
Then run npm install
to install the dependencies.