AEM GraphQL Usage, Advantages & Limitations For Beginners

This blog will cover how to use AEM GraphQL, creating persisting queries and many more….

Before we dive-in, let’s assess ourselves on the following topics

1. AEM Headless.
2. Content Fragments.
3. GraphQL.

If you are not aware of these completely, that’s fine. Let’s cover those at the higher level.

• AEM Headless is a CMS solution from Experience Manager that allows structured content (Content Fragments) in AEM to be consumed by any app over HTTP using GraphQL. Headless implementations enable delivery of experiences across platforms and channels at scale.
• We can export the data of content fragments in our own convinient way! How beautiful is that!!
• Well, content fragments are the chunks of data can be created for content. Unlike components, content fragments are part of assets, which has content and meta data with many more feasible options to use with.
• For more details, you can deploy WKND site in your AEM instance and start exploring the content fragments. WKND has some pre built content fragments/models to play with.
• Wonder where these content fragments are being used in real time? Hey, we have blogs, stories, recipes and many more.
• Content fragments can be created with our required set of fields, so that we can have our own style of content available across!
• Want to explore more? Here is the wonderful reference by Imran Khan.
• GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.
• Enough theory! Let’s understand how it works & how we can get the best from our AEM Headless Implementation.
• Navigate to GraphQL under General section.

• Create endpoint for your project(Note : I have not followed any naming conventions).

• To enable persisted queries, we need to navigate to the configuration browser and we should enable the persisted queries option against to the project created of the same general section.

• Click on the project properties, enable the GraphQL Persited Queries options & save!

• Now, we are done with the basic step of enabling the end-point. Now, let us to try to check the GraphQL response for a sample content fragment.

• For successful enablement of GraphQL endpoint as shown above, we should see the GraphQL response for a content fragment under preview section.

• Awesome, now let’s try to create a persisted query and hit via url!
• Navigate to GraphQL Query Editor.

• Let’s try creating one sample query to fetch all the content fragments using certain model.

• I have saved the query post forming the query, we can notice documentation explorer, endpoint selection and so many other things!
• GraphQL console supports formatting, auto population of the query elements when we use different types of shortcuts like(Ctrl + Space), query variables when we want to use dynamic variables for the matching patterns, distinct key value mappings(Can notice in the above screenshot, we have used testPath against the original variable _path).
• Now, let’s try to access via url by simply copy URL from the persisted query(Note that, we can also use parameterized queies, dynamic variables and many more.. which are supported by the GraphQL notations).

• Coming to the limitations, new GraphQL fragment model is yet to be supported by AEM and hence we are using bloated queries as of now and I hope it will be supported in future!
• With this, we have covered all the basic topics and I hope it is helpful.
• Feel free to reach out to me for any AEM related queries — Saiteja Gokada (gokadasai@gmail.com).