AEM Content Fragments with GraphQL – Getting started with GraphQL

Problem Statement:

What is GraphQL?

How GraphQL can be used with Content Fragments?

Introduction:

What is GraphQL?

GraphQL is a query language for APIs and provides a complete and understandable description of the data in your API.

For example:

Let’s consider an external system with the following tables:

1 to 1 relationship between Company table with person table and 1 to 1 person table with awards table.

If I need to get all awards

You might be doing a call to

{domain}/api/awards

To get individual person and awards

{domain}/api/persons?personID{ID}&awards={ID}

To get individual company and person and awards

{domain}/api/company?companyNam={NAME}personID={ID}&awards={ID}

But in GraphQL you can send the parameters like a query and get all the related content as well

To use Graph QL you need to prepare schemas and based on the schema you can do filter the data.

For more information on GraphQL, you can be visiting the link

Benefits:

• Avoiding iterative API requests as with REST,
• Ensuring that delivery is limited to the specific requirements,
• Allowing for bulk delivery of exactly what is needed for rendering as the response to a single API query.

How GraphQL can be used with Content Fragments?

GraphQL is a strongly typed API, which means that data must be clearly structured and organized by type.

The GraphQL specification provides a series of guidelines on how to create a robust API for interrogating data on a certain instance. To do this, a client needs to fetch the Schema, which contains all the types necessary for a query.

For Content Fragments, the GraphQL schemas (structure and types) are based on Enabled Content Fragment Models and their data types.

How Graph QL works on related content fragments?

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

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

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

• 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.
• Allows you to 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.

Install:

1. AEM 6.5.11 (aem-service-pkg-6.5.11.zip)
2. Graph QL OAK Index (cfm-graphql-index-def-1.0.0.zip)
3. GraphiQL Developer tool (graphiql-0.0.6.zip)

For AEMacS you will get the content fragment with the latest update.

Go to configuration folder

1. AEM tools section
2. General selection in sidebar
3. Configuration bowser

As shown below:

Create a configuration folder and select

1. Content Fragment Models
2. GraphQL Persistent Queries

As shown below:

Go to Assets Model:

1. AEM tools section
2. Assets selection in sidebar
3. Content Fragments Model

As shown below:

Select the folder and create the content fragments as shown below:

You can also install the package attached here

Go to the following URL to access the GraphiQL developer tool and run the following query:

Note: you can also get all the autosuggestions by using the ctrl+space shortcut

{
  cityByPath(_path: "/content/dam/sample-content-fragments/cities/berlin") {
    item {
      _path
      name
      country
      population
      categories
    }
  }
}

You can also find more queries and filters in the following link