Content modeling

Welcome to the tutorial chapter on Content Fragments and GraphQL endpoints in Adobe Experience Manager (AEM). We’ll cover leveraging Content Fragments, creating Fragment Models, and using GraphQL endpoints in AEM.

Content Fragments offer a structured approach to managing content across channels, providing flexibility and reusability. Enabling Content Fragments in AEM allows modular content creation, enhancing consistency and adaptability.

First, we’ll guide you through enabling Content Fragments in AEM, covering necessary configurations and settings for seamless integration.

Next, we’ll cover creating Fragment Models, which define structure and attributes. Learn how to design models aligned with your content requirements and manage them effectively.

Then, we’ll demonstrate creating Content Fragments from the models, providing step-by-step guidance on authoring and publishing.

Additionally, we’ll explore defining AEM GraphQL endpoints. GraphQL efficiently retrieves data from AEM, and we’ll set up and configure endpoints to expose desired data. Persisted queries will optimize performance and caching.

Throughout the tutorial, we’ll provide explanations, code examples, and practical tips. By the end, you’ll have the skills to enable Content Fragments, create Fragment Models, generate Fragments, and define AEM GraphQL endpoints and persisted queries. Let’s get started!

Context-aware Configuration

  1. Navigate to Tools > Configuration Browser to create a configuration for the headless experience.

    Create folder

    Provide a title and name, and check GraphQL Persisted Queries and Content Fragment Models.

Content Fragment Models

  1. Navigate to Tools > Content Fragment Models and select the folder with the name of the configuration created in step 1.

    Model Folder

  2. Inside the folder, select Create and name the model Teaser. Add the following datatypes to the Teaser model.

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 5-row-4
    Datatype Name Required Options
    Content Reference Asset yes Add a default image if you’d like. Ex: /content/dam/wknd-headless/assets/AdobeStock_307513975.mp4
    Single line text Title yes
    Single line text Pre-Title no
    Multi line text Description no Ensure that default type is rich text
    Enumeration Style yes Render as dropdown. Options are Hero -> hero and Featured -> featured

    Teaser model

  3. Inside the folder, create a second model named Offer. Click create and give the model the name “Offer” and add the following datatypes:

    table 0-row-4 1-row-4 2-row-4 3-row-4
    Datatype Name Required Options
    Content Reference Asset yes Add default image. Ex: /content/dam/wknd-headless/assets/AdobeStock_238607111.jpeg
    Multi line text Description no
    Multi line text Article no

    Offer model

  4. Inside the folder, create a third model named Image List. Click create and give the model the name “Image List” and add the following datatypes:

    table 0-row-4 1-row-4
    Datatype Name Required Options
    Fragment Reference List Items yes Render as Multiple Field. Allowed content fragment model is Offer.

    Image List Model

Content Fragments

  1. Now navigate to Assets and create a folder for the new site. Click create and name the folder.

    Add folder

  2. After the folder is created, select the folder and open its Properties.

  3. In the folder’s Cloud Configurations tab, select the configuration created earlier.

    Asset folder AEM Headless cloud config

    Click into the new folder and create a teaser. Click Create and Content Fragment and select the Teaser model. Name the model Hero and click Create.

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2
    Name Notes
    Asset Leave as default value or choose a different asset (video or image)
    Title Explore. Discover. Live.
    Pre-Title Join use for your next adventure.
    Description Leave blank
    Style Hero

    hero fragment

GraphQL endpoints

  1. Navigate to Tools > GraphQL

    AEM GraphiQL

  2. Click Create and give the new endpoint a name and choose the newly created configuration.

    AEM Headless GraphQL endpoint

GraphQL Persisted Queries

  1. Let’s test the new endpoint. Navigate to Tools > GraphQL Query Editor and choose our endpoint for the drop down in the top-right of the window.

  2. In the query editor, create a few different queries.

    code language-graphql
        teaserList {
            items {

    You should get a list containing the single fragment created above.

    For this exercise, create a full query that the AEM headless app uses. Create a query that returns a single teaser by path. In the query editor, enter the following query:

    code language-graphql
    query TeaserByPath($path: String!) {
    component: teaserByPath(_path: $path) {
        item {
        _metadata {
            stringMetadata {
        asset {
            ... on MultimediaRef {
            ... on ImageRef {
        description {

    In the query variables input at the bottom, enter:

    code language-json
        "path": "/content/dam/pure-headless/hero"
    note note
    You may need to adjust the query variable path based the folder and fragment names.

    Run the query to receive the results of the Content Fragment created earlier.

  3. Click Save to persist (save) the query and name the query teaser. This allows us to reference the query by name in the application.

Next steps

Congratulations! You’ve successfully configured AEM as a Cloud Service to allow for the creation of Content Fragments and GraphQL endpoints. You’ve also created a Content Fragment Model and Content Fragment, and defined a GraphQL endpoint and persisted query. You are now ready to move on to the next tutorial chapter, where you will learn how to create an AEM Headless React application that consumes the Content Fragments and GraphQL endpoint you created in this chapter.

Next Chapter: AEM Headless APIs and React