Use GraphQL endpoint to fetch data and display in an AEM component

[ArchitAr2]

Consider a content fragment that refers another content fragment (nested content fragment).
I have setup a GraphQL endpoint to fetch this content fragment along with its nested content. This endpoint is consumed by an external react application which retrieves and displays the data.
Now, I need to display the same information in an AEM component. Would it be better to call the GraphQL endpoint within the AEM component, or is the traditional way of retrieving content fragments better?
Additionally, if I do want to call the GraphQL endpoint from within an AEM component, what's the best way of doing it? Is it recommended to use Sling models for this purpose? 

[Shubham_borole]

Hi @ArchitAr2 , 

Both ways can be utilized to have effective results. When the case is utilizing AEM component and sling models, in my experience, it was better to use the Content Fragment APIs and sling apis. When utilizing headless concepts, calling via react app or component calling the AEM GraphQL API has been useful. Making Rest API calls from java layer to the GraphQL endpoint can cause performance concerns.

For utilizing same information in AEM component and externally, one option can be to create a service to provide the details needed for the component and external callers. Use Sling model for AEM component and Servlet endpoint for the external react application.

If you want to use the Graphql endpoint for both cases, other option can be to create a rest api service within AEM and make a configurable call to the GraphQL endpoint and pass the response to the AEM component via sling model. The react App can call the graphQL endpoint directly. In my experience calling rest api call to GraphQL endpoint may have performance concerns.

Hope this helps