Headless Delivery Using AEM GraphQL

Published in

TECHnotes4u

5 min readApr 4, 2021

Now a days many application frameworks focusing on headless capabilities to deliver the content to multi-channels like web, mobile, tablet, IOT devices etc. and thus make the content more reusable. This approach not only provide flexibility to implement different look and feel but also provide seamless and consistent update of content on different channels.

In Adobe Experience Manager (AEM) as of now we are using various featured services like Content Service, HTTP Assets API, and Sling Importer Service to deliver the contents in the form of JSON for headless consumption. Although these services provide the data but those are not refined as per requirement and have lots of redundancy thus sometime its quite hard to find the required content data from the response hierarchy. To overcome this data redundancy Adobe has introduced the AEM GraphQL API.

AEM GraphQL API is primarily designed to deliver Content Fragment data to downstream applications as a part of headless deployment. AEM GraphQL API is currently supported on AEM as a Cloud Service (AEMaaCS) and not on on-premise AEM versions.

In the below diagram you can see how the GraphQL fits in to provide the headless delivery in robust way. Although HTTP ASSETS API calls also provide the contents of Content Fragments but not at that refined level which GraphQL does.

AEM GraphQL

AEM GraphQL API provides a powerful query language to expose data of Content Fragments to JavaScript clients in Headless CMS implementations.

Content Fragment models define the data schema that is used by Content Fragments. Whenever a Content Fragment Model is created or updated, the schema is translated and added to the “graph” that makes up the GraphQL API.

Below are some benefits of AEM GraphQL API -

It avoids iterative API requests as compared to REST.
It ensures that delivery is limited to the specific requirements and provide refined data.
It allows bulk delivery of nested data in a single API query.
It is a strongly typed API, which means that data must be clearly structured and organized by type.

GraphiQL IDE

GraphiQL IDE is an in-browser tool for writing, validating, and testing.

GraphiQL IDE benefits -

Quickly test and refine the queries and returned data.
Syntax-highlighting, auto-completion, auto-suggestion, copy, history view etc.
Provides easy access to the documentation, making it easy to learn and understand what methods are available.

To install the GraphiQL IDE you need to download the latest package of GraphiQL Content Package from https://experience.adobe.com/#/downloads and install it in AEM SDK using package manager.

Similarly download latest package of GraphQL Sample Configuration. During installation if it’s unable to install then extract the zip and do the maven build/deployment.

Once installed you can access it at http:/host:port/content/graphiql.html e.g http://localhost:4502/content/graphiql.html

Below is the snapshot of GraphiQL IDE .

If you face any issue in getting above interface then follow below sections to do and cross-check configurations.

GraphQL for AEM Endpoint

AEM endpoint is the path used to access GraphQL for AEM. The repository path of the GraphQL for AEM endpoint is /content/cq:graphql/global/endpoint.

Your app can use /content/_cq_graphql/global/endpoint.json path in the request URL.

Using this path, you (or your app) can -

Access the GraphQL schema.
Send your GraphQL queries.
Receive the responses to your GraphQL queries.

If you are getting error while accessing the above endpoint.json call then make sure that you have below configurations in system/console/configMgr

If all configurations are intact then your endpoint call result will look like below-

In below sections you will know how to utilize the AEM GraphQL API in a headless way to deliver the content. For demonstration — WKND and REACT sample app have been taken.

Install sample content — WKND

Download the latest compiled AEM Package for WKND Site from https://github.com/adobe/aem-guides-wknd/releases . Make sure to download the standard version compatible with AEM as a Cloud Service and not the classic version.

Below is sample execution of GraphQL query having filtered result.

Install sample React App

Below is the reference of React Sample App to get, install, and explore.

Clone tutorial/react project from https://github.com/adobe/aem-guides-wknd-graphql/tree/tutorial/react.
Open the file .env.development available in aem-guides-wknd-graphql/react-app. Uncomment the REACT_APP_AUTHORIZATION line so that the file looks like the following:

REACT_APP_HOST_URI= http(s):/host:port e.g http://localhost:4502

REACT_APP_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json

REACT_APP_AUTHORIZATION=admin:admin

To start React APP follow below steps -