GraphQL services in the AEM world

There are multiple ways to leverage GraphQL in AEM projects. Depending on the use cases, nature of the content and desired user experiences, developers can choose from different integration patterns.

Commerce & GraphQL complement each other wonderfully. With GraphQL, AEM can fetch exactly the content it needs to render a page and even combine multiple queries and operations into a single request. For example, to deliver a product experience, AEM fetches both product data from a commerce engine like Magento and user reviews from a second service in a single operation.

For commerce use cases like this, we built the Commerce Integration Framework (CIF) which demonstrates server-side & client-side communication between AEM and Magento. Highly cache-able content like product data can be rendered using server-side components. As part of CIF, we developed a fully integrated GraphQL client to use from Sling models and HTL-based components which supports common configuration and customization patters. In contrast, highly dynamic content as well as operations on content are better displayed and performed using client-side components. The AEM SPA editor and tools are well suited for this use case and allow authors to use modern React components together with the Apollo libraries to execute and optimize GraphQL operations.