Getting Started with AEM Headless - GraphQL

An end-to-end tutorial illustrating how to build-out and expose content using AEM’s GraphQL APIs and consumed by an external app, in a headless CMS scenario.

This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app.

This tutorial will cover the following topics:

  • Create Content Fragment Models to model Contributors in AEM
  • Author Contributor Content Fragments using the newly created Content Fragment Model
  • Explore how how Content Fragments in AEM can be queried using the integrated GraphiQL development tool.
  • Consume AEM’s GraphQL APIs from a sample WKND GraphQL React app
  • Perform advanced data modeling with Fragment References

GraphQL Overview

The below video presents an overview of the GraphQL API implemented in AEM. The GraphQL API in AEM is primarily designed to deliver Content fragment data to downstream applications as part of a headless deployment.

Let’s get started!

Start the AEM GraphQL tutorial by jumping into the Quick Setup chapter!

GitHub Project

The source code, and content packages are available on the AEM Guides - WKND GraphQL GitHub Project.

If you find an issue with the tutorial or the code, please leave a GitHub issue.

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now