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
-
Navigate to Tools > Configuration Browser to create a configuration for the headless experience.
Provide a title and name, and check GraphQL Persisted Queries and Content Fragment Models.
Content Fragment Models
-
Navigate to Tools > Content Fragment Models and select the folder with the name of the configuration created in step 1.
-
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 
-
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.jpegMulti line text Description no Multi line text Article no 
-
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. 
Content Fragments
-
Now navigate to Assets and create a folder for the new site. Click create and name the folder.
-
After the folder is created, select the folder and open its Properties.
-
In the folder’s Cloud Configurations tab, select the configuration created earlier.
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
GraphQL endpoints
-
Navigate to Tools > GraphQL
-
Click Create and give the new endpoint a name and choose the newly created configuration.
GraphQL Persisted Queries
-
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.
-
In the query editor, create a few different queries.
code language-graphql { teaserList { items { title } } }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 { __typename _path _metadata { stringMetadata { name value } } title preTitle style asset { ... on MultimediaRef { __typename _authorUrl _publishUrl format } ... on ImageRef { __typename _authorUrl _publishUrl mimeType width height } } description { html plaintext } } } }In the query variables input at the bottom, enter:
code language-json { "path": "/content/dam/pure-headless/hero" }note note NOTE You may need to adjust the query variable pathbased the folder and fragment names.Run the query to receive the results of the Content Fragment created earlier.
-
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