Headless In AEM 

By reading this article we will be able to understand headless approach. Many time we went to interview and maximum time the interviewer is interested to listen about the headless approach and lots of questions about the headless. But if a person did not get any opportunity to work on the Headless approach so he/she will not be able to answer the questions or defend and interviewer thought like the candidate only knows the component and template in AEM he is not aware about the headless concept. The main motive to share knowledge on AEM headless approach is not all about the clearing interview but as per my understanding if we are working on any technology and we did not get any chance to work on a particular module/approach than it doesn't mean we will not do any effort to understand the other concepts. I hope this article will help you a lot and you will be able to understand and explain the Architecture of AEM as a Headless.

What is Headless?

To understand the headless concept we have to understand the given diagram 

Head:-Head is known as frontend and headless means the frontend is missing. In AEM Headless approach the frontend is missing but still we need frontend to develop the application/website. So that end user can interact with your website. And it means the another head/frontend is going to take it but AEM will be there s a repository. We will create some API and expose those API so that we can send the data/content to another's head(frontend) and content will be render via another's head. For fetching the data from AEM we have number of options like 

• Sling Model Exporters.
• Assets API
• Content Fragments using Graph QL.

In this article we are going to discus about the Content Fragment using Graph QL.

Note:-Graph QL with AEM generally works properly with the AEM as a cloud service flavor of AEM.

Advantage of Headless:-

• Fast content delivery.
• Same content can be used for different views.
• Easy Integration.
• Can be used for different channels like React/Angular, Web application, Mobile App etc.
  

What is Graph QL?

OR

How Graph QL is different from the REST?

Graph QL stands for Graph Query Language. Graph QL is a query language to create and consume the API. Graph QL API is not the replacement of REST API. But we can say Graph QL is alternative of REST. Let us understand how Graph QL is better than REST.

To understand the difference we have to understand the working of REST API.

REST 
How REST Works?

Suppose we have a table present in the RDBMS and in that table we have a student's info like name, roll no, age, mobile no, marks obtained, result, father's name, mother's name, father's contact no, mother's contact no, address. Suppose I want to get the contact details from REST API so we need to create a END Point like we will pass the roll no from frontend and we will get the contact details of that particular student and we will get the response in JSON form.

And on other hand if requirement is to fetch the fetch the result's details on the basis of roll no than we have to again create a endpoint for the result.

In this way REST API works. Ultimately we can say that in REST whenever we will be needing the new type of response we will be needing the REST Developer to create the endpoint.

Graph QL

Basically in Graph QL we have two things.

• Graph QL Server.
• Graph QL Client.

Graph QL Server will be handled by the backend developer and Graph QL Client will be handled by the front end developers. Suppose we have a table in DB so backend developer need to create the schema and resolver of the table. And frontend developer need to fire the query based on the requirement. The main difference is that in case of Graph QL we don't need developer again and again to create the endpoint the frontend person can change the response of data based on the query. when the frontend person will write the query he/she can change the parameters and response will be change.

Graph QL is solving two problems here.

• Over fetching(If we need one parameter from the API and we are sending all the data related to that as a response is called over fetching).
• Under fetching(If we need three parameters and we are fetching one parameter from the API is called under fetching).

Basically in REST we need to create the endpoint for each and every requirement but in Graph QL we need only one end point we have flexibility to change the response even without touching the backend.

These are two main problems(over fetching and under fetching) those we are facing in the REST but these are solved by the Graph QL. This the main reason why Graph QL comes in the use  

How to Create and Content Fragment Model and Content Fragment ?

To create a content fragment model and content fragment click here.

Let us discus some important data type for the content fragment model.

1.How can we use the JSON Object Data type in the content fragment?

Create a content fragment model and add a JSON Object Data type  like 

Create a content fragment and author it like 

Add a sample JSON Data like 

Click on the preview like 

Getting error. Which is obvious

We have to create a endpoint like Tools>Assets>GraphQL like 

Click on GraphQL and create a endpoint like 

Endpoint has been created successfully getting popup like 

Again click on preview  and you will be able to see the response like 

Anytime we can pass the JSON Data object and we can pass the JSON data in JSON Data object and we will get the response.

2.How to use the fragment reference in the Content Fragment Model? 

In this we will see how can we use the fragment reference data type in the content fragment model. I have created a new content fragment model and I have added the fragment reference data type in it.

 

The fragment reference data type looks like 

In next step drag and drop the fragment reference data type in the CF Model.

From Renderer As dropdown you can choose for single filed of multi field type. And you can add more than one fragment reference in the CF Model.

Why Fragment Reference is used for ?

Fragment reference is used for the refer the another content fragment model in one content fragment model. Now the content fragment model has been created and fragment reference data type has been added in the content fragment model. Now its time to create the content fragment from the content 

Click on open.

My content fragment looks like 

In this CF  we have two fragment reference. The upper one is single fragment reference and the lower one is multi fragment reference. You can also create by choosing the Render as dropdown from RHS in the content fragment model.

I have authored the already created content fragment or you can create your own new content fragment by clicking on + icon like 

I have authored my already created content fragment that was using JSON Object data type . And I have authored the path ( /content/dam/aemgeeks/content-fragments/json-data-type).

 And after authoring the reference of content fragment click on preview and I am able to see the JSON response .

My JSON data in one CF Model is like  

After preview I am getting the response like.

In this way we can use the fragment reference data type in the content fragment model.

3.How to use the Multi Line Text Data type and its features?

Now we will cover how to use the multi line text data type and its important features.

Let us perform the following step:-

• Create a Content fragment model and drag, drop the multi line text component.
• Create a content fragment for the created content fragment model and add some data in the multi line text data type.
• I have already created content fragment in which JSON Object data type we are using like 
  
• And in case of preview 

  
• Created a new content fragment model and using the multi line text component inside it  and allowing the fragment reference 

  
• After creating the content fragment getting option to add content fragment(Where cursor is hovering in the screenshot) 

  

  
  
• I am adding some text and in the component and adding the content fragment by clicking the icon where cursor is hovering.
• After clicking the insert content fragment getting option to choose the path of content fragment like 

  

  
  
• Now my content fragment looks like 

  

  
  

Click on the preview and now we should get the JSON response of both the content fragment. Let us check 

Here we are getting the response of both the components.

How to create Graph QL endpoint?

Let us create the Graph QL endpoint. We have created some Content fragment models and from these content fragment models we have created some content fragments these content fragments are nothing but information/data. And we have to expose this information/data into the URL(endpoint). We will be having some http requests and from the requests we will have the response from the content fragment.

We have to create endpoints by using following steps:-

• Create configuration from configuration browser like 
  
  
  

Click on Graph QL. And create end point.  

The highlighted one is our end point.  

Graph QL Query Editor

To access the Graph QL explorer you have to visit the here. Or simply you have to navigate to Graph QL editor like Tools>General>Graph QL Editor like 

When you will open the Query Editor you will be able to see the following interface like. 

You have to select the your endpoint from top right side in the dropdown  and if you are not able to see your created endpoint means there is some issue with your endpoint creation. click on the Docs link just below the endpoint in top right side.  

Click on Query Type like 

And you will get 

In Schema section we are getting the details of our content fragment models. 

We are getting the content fragment model by path,  list and Paginated.

You can use cntrl + space to get the suggestions like 

I run the query to get the list of all content fragments created from this content fragment models.

 You can choose bypath when you want to fetch the data from the specified path and you will choose list for you want all the data.

Filter In Graph QL

You will be happy to know that we can apply the filters in the Graph QL to filter the result by using by path like we had two content fragment created from my content fragment model 

After apply the filter 

You can filter it on any parameter and you can check it with the help of cntrl + space.

Filter The Result By Specific Object

I run the following query to find the all result