How to use AEM as a Headless CMS

Adobe Experience Manager (AEM) has multiple options for defining headless endpoints and delivering its content as JSON. Some of them are-

  • GraphQL
  • Token authentication
  • Content Service

In this blog, we are going to implement Aem as a headless CMS by using GraphQL.

What is GraphQL?

GraphQL is an API used to expose data of the content fragment in the JSON form to the end-user in Headless CMS implementation. GraphQL provides a query-based API that allows the client to query the content fragment as needed.

Prerequisite to implement the AEM as a Headless CMS:

  1. JDK11 + AEMaaCS author and publish instance up on your machines.
  2. Create a new AEM project using the latest Maven archetype.
  3. Needs to install graphiql and wknd project zip on the author instance.
  4. Go to tools -> General -> Configuration browser -> project folder -> select properties option and then check the two checkbox Content Fragment Models and GraphiQL Persistent Queries if they are not checked.

Steps to execute the graphQL query to expose the data of Content Fragment:

  1. Open the link http://localhost:4502/content/graphiql.html. This is the tool(GraphiQL tool) for writing the query to expose the data of the Content Fragment Model as we required.
  1. In the wknd project, there are some existing Content Fragment Models. We will try to expose the data of the Content Fragment.
  2. {

 adventureList{

    items{

      _path

    }

  }

}

Copy and paste this query in the left panel of the graphiql tool.

  1. Press the Play button in the top menu to execute the query and you will get the result as shown below:
  1. Position the cursor down the _path and then press Ctrl+Space to add the property whose data we have to expose in the Content Fragment.

I am adding the adventureTitle and adventureType to the query.

  1. Press the Play button to again execute the query and we see the result as shown below:

By Avni Rajput