Headless Content Delivery using Content Fragments with GraphQL

Last update: April 11, 2024

CREATED FOR:

  • User
  • Developer

With Adobe Experience Manager (AEM), you can use Content Fragments, together with the AEM GraphQL API (a customized implementation, based on standard GraphQL), to headlessly deliver structured content for use in your applications. The ability to customize a single API query lets you retrieve and deliver the specific content that you want/need to render (as the response to the single API query).

NOTE
GraphQL is currently used in two (separate) scenarios in Adobe Experience Manager (AEM):

Headless CMS

A Headless Content Management System (CMS) is:

  • "A headless content management system, or headless CMS, is a back-end only content management system (CMS) built from the ground up as a content repository that makes content accessible by way of an API for display on any device.

    See Wikipedia.

In terms of authoring Content Fragments in AEM this means that:

  • You can use Content Fragments to author content that is not primarily intended to be directly published (1:1) on formatted pages.

  • The content of your Content Fragments will be structured in a predetermined manner - according to the Content Fragment Models. This simplifies access for your applications, which will further process your content.

GraphQL - An Overview

GraphQL is:

  • “…a query language for APIs and a runtime for fulfilling those queries with your existing data.”.

    See GraphQL.org

The AEM GraphQL API lets you perform (complex) queries on your Content Fragments; with each query being according to a specific model type. The content returned can then be used by your applications.

AEM GraphQL API

For Adobe Experience, a customized implementation of the standard GraphQL API has been developed. See AEM GraphQL API for use with Content Fragments for details.

The AEM GraphQL API implementation is based on the GraphQL Java libraries.

Content Fragments for use with the AEM GraphQL API

Content Fragments can be used as a basis for GraphQL for AEM queries as:

  • They enable you to design, create, curate and publish page-independent content.
  • The Content Fragment Models provide the required structure by means of defined data types.
  • The Fragment Reference, available when defining a model, can be used to define additional layers of structure.

Content Fragments for use with GraphQL

Content Fragments

Content Fragments:

  • Contain structured content.

  • They are based on a Content Fragment Model, which predefines the structure for the resulting fragment.

Content Fragment Models

These Content Fragment Models:

  • Are used to generate the Schemas, once Enabled.

  • Provide the data types and fields required for GraphQL. They ensure that your application only requests what is possible, and receives what is expected.

  • The data type Fragment References can be used in your model to reference another Content Fragment, and so introduce additional levels of structure.

Fragment References

The Fragment Reference:

  • Is of particular interest in conjunction with GraphQL.

  • Is a specific data type that can be used when defining a Content Fragment Model.

  • References another fragment, dependent on a specific Content Fragment Model.

  • Lets you retrieve structured data.

    • When defined as a multifeed, multiple sub-fragments can be referenced (retrieved) by the prime fragment.

JSON Preview

To help with designing and developing your Content Fragment Models, you can preview JSON output.

Learning to use GraphQL with AEM - Sample Content and Queries

See Learning to use GraphQL with AEM - Sample Content and Queries for an introduction to using the AEM GraphQL API.

Tutorial - Getting Started with AEM Headless and GraphQL

Looking for a hands-on tutorial? Check out Getting Started with AEM Headless and GraphQL 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.

Experience Manager