In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the. Repeat the above steps to create a fragment representing Alison Smith:Persisted queries are queries that are stored on the Adobe Experience Manager (AEM) server. graphql. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. In this example, we will use Hygraph as our content platform which will give us server-side GraphQL API to interact with. js; 404. js; layout. js application is invoked from the command line. src/api/aemHeadlessClient. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. Developers can then use this data in their applications, making it easy to integrate AEM with other technologies and. Learn how to query a list of. This can be done through either npm or yarn. Learn how AEM automatically generates a GraphQL schema based on a Content Fragment model. Querying AEM using GraphQL using persisted queries (as opposed to client-defined GraphQL queries) allows developers to persist a query (but not its results) in AEM, and then request the query to be executed by name. Content Fragments in. Querying AEM using GraphQL using persisted queries (as opposed to client-defined GraphQL queries) allows developers to persist a query (but not its results) in AEM, and then request the query to be executed by name. Explore the AEM GraphQL API. js implements custom React hooks. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL persisted queries in a client application. Persisted GraphQL queries. ui. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content Fragments that. x. The following tools should be installed locally: JDK 11;. 3 and above. The following configurations are examples. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment (preferably Development)GraphQL. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. This cross-site request requires CORS to be set up on AEM to allow request from the Netlify domain to access its content. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. We’ll look at the benefits of GraphQL, the GraphQL tooling available in AEM, and simple and advanced GraphQL query creation. It works perfectly fine for one or multiple commerce websites. Definitely approach #1. AEM as a Cloud Service and AEM 6. To determine the correct approach for managing build dependent configurations, reference the AEM Headless app’s framework (for example, React, iOS, Android™, and so on) documentation, as the approach varies by framework. Prerequisites. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL persisted queries in a. Know how to set up a front-end pipeline in Cloud Manager. To get started with GraphQL queries, and how they work with AEM Content Fragments, it helps to see some practical examples. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment (preferably Development)Imagine a standalone Spring boot application (outside AEM) needs to display content. Check out the repository Nov 7, 2022. Hence, AEM uses GraphQL to exchange commerce data with Adobe Commerce and with any commerce engine via I/O Runtime. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. After you complete onboarding to the service, login to your AEM Forms as a Cloud Service environment, open Author and Publish instances, and add users to Forms-specific AEM groups, based on their persona. Bundle start command : mvn clean install -PautoInstallBundle. Tutorials by framework. </p> <p dir="auto">GraphQL endpoints then provide the paths that. AEM Headless supports a offset/limit and cursor-based pagination queries to smaller subsets of a larger result set. In this video you will: Understand the power behind the GraphQL language. Take an exam and earn a credential that validates your skills and knowledge. The main benefit of GraphQL (compared to REST) is that it greatly optimizes the fetching of data, in the. 1 - Modeling Basics; 2 - Advanced Modeling; 3 - Creating GraphQL Queries; 4 - Content Fragment Variations; 5 - GraphQL Endpoints; 6 - Author and Publish Architecture; 7 - GraphQL Persisted Queries; Basic Tutorial. An end-to-end tutorial illustrating how to build. 0. jar file to install the Author instance. for the season, ignoring distant calls of civilization urging them to return to normal lives. GraphQL is an open source server-side technology which was developed by Facebook to optimize RESTful API calls. Content fragments contain structured content: They are based on a. 5. PrerequisitesQuick setup. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. With CRXDE Lite,. (SITES-15856) ; Redundant copy from AEM's Clipboard during a paste from the operating system's Clipboard. 1 - Modeling Basics; 2 - Advanced Modeling; 3 - Creating GraphQL Queries; 4 - Content Fragment Variations; 5 - GraphQL Endpoints; 6 - Author and Publish Architecture; 7 - GraphQL Persisted Queries; Basic Tutorial. x. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL persisted queries in a client application. The ImageComponent component is only visible in the webpack dev server. Content Fragments. The ImageRef type has four URL options for content references: _path is the referenced path in AEM, and does not include an AEM origin (host name) _dynamicUrl is the full URL to the preferred, web-optimized image asset. Persisted queries are similar to the concept of stored procedures in SQL databases. This cross-site request requires CORS to be set up on AEM to allow request from the Netlify domain to access its content. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. This video is an overview of the GraphQL API implemented in AEM. View next: Learn. Don't miss out!Learn how multiple views in the SPA are supported using AEM Pages and the SPA Editor SDK. AEM Headless GraphQL queries can return large results. They are channel-agnostic, which means you can prepare content for various touchpoints. Learn how to create relationships between Content Fragment Models in Adobe Experience Manager (AEM) and how to leverage these relationships in GraphQL queries. Quick setup. so, you need to modify the package. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. New capabilities with GraphQL. Download the latest GraphiQL Content Package v. The zip file is an AEM package that can be installed directly. In AEM 6. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. Quick setup. At the same time, introspection also has a few downsides. The following tools should be installed locally: JDK 11; Node. Run the following command to start the SDK: (on Microsoft® Windows) sdk. Quick setup. Some of the key principles of Apache Sling is it’s web application framework, which is designed for content-oriented application development, which provides RESTful web API to JCR based application. Thanks to this encapsulation, the integration logic, and systems can get updated without changing code inside the Experience Manager. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. Using an AEM dialog, authors can set the location for the. The Create new GraphQL Endpoint dialog opens. So I should be able to do this: { Adventure { adventureTitle }} But. We are using AEM 6. In previous releases, a package was needed to install the GraphiQL IDE. 2. Learn. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL persisted queries in a client application. 5. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. The OSGI configuration outlined in this document is sufficient for: Single-origin resource sharing on AEM Publish. Once the deploy is completed, access your AEM author instance. From the AEM Start Screen, tap Content Fragments to open up the Content Fragments UI. In previous releases, a package was needed to install the GraphiQL IDE. bio. The initial set up of the mock JSON does require a local AEM. In this video you will: Understand the power behind the GraphQL. In AEM 6. Ensure you adjust them to align to the requirements of your project. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. The CIF Magento GraphQL AEM commerce connector has to be configured to access your Magento instance and bind the catalog data. Having your clients talk to multiple GraphQL services (as in approach #2) entirely defeats the purpose of using GraphQL in the first place, which is to provide a schema over your entire application data to allow fetching it in a single roundtrip. AEM 6. Build a React JS app using GraphQL in a pure headless scenario. In AEM 6. Created for: Beginner. Magento does indeed expose a rich GraphQL API that is used on the AEM side to integrate both e-commerce data (product catalog) and functionalities (cart and checkout) into AEM. GraphQL for AEM - Summary of Extensions. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. As a Developer. AEM 6. Learn how to configure Cross-origin resource sharing (CORS) for use with AEM GraphQL. AEM GraphQL API requests. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. To determine the correct approach for managing build dependent configurations, reference the AEM Headless app’s framework (for example, React, iOS, Android™, and so on) documentation, as the approach varies by framework. Prerequisites. Run AEM as a cloud service in local to work with GraphQL query. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. AEM Headless GraphQL Video Series Learn about AEM’s GraphQL capabilities through the in-depth walk-through of Content Fragments and and AEM’s GraphQL APIs and development tools. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM). The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. Select the commerce configuration you want to change. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. Organization ID: Copy the value from Profile Picture > Account info (internal) > Modal Window > Current Org ID. The GraphiQL tool enables developers to create and test queries against content on the current AEM environment. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. aem. Navigate to the Software Distribution Portal > AEM as a Cloud Service. For cases that need customization (for example, when customizing the cache) you can use the API; see the cURL example provided in How to persist a GraphQL query. 5. Prerequisites This tutorial requires the following: AEM as a Cloud Service SDK Node. This GraphQL API is independent from AEM’s GraphQL API to access Content Fragments. Learn about the different data types that can be used to define a schema. Navigate to the Software Distribution Portal > AEM as a Cloud Service. The zip file is an AEM package that can be installed directly. Connect them to Magento instance: AEM GraphQL is typically enabled by. Create Content Fragments based on the. Create Content Fragment Models. This setup pattern is currently used by the majority of our AEM Content and Commerce customers. Prerequisites. As a Library AuthorContent Fragments can also reference other assets in AEM. After a user creates a Content Fragment based on the Article model, it can then be interrogated through GraphQL. GraphQL. Prerequisites. For GraphQL queries with AEM, there are a few extensions: If you require a single result: use the model name; for example, city; If you expect a list of results: add List to the model name; for example, cityList The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. Quick setup. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial. Learn how to configure AEM hosts in AEM Headless app. We will be creating an Express server. Download the latest GraphiQL Content Package v. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. Last update: 2023-04-26 Topics: GraphQL API Created for: Intermediate Developer Deploying an AEM Headless application requires attention to how AEM URLs are. Also, review How to execute a Persisted query, Using query variables, and Encoding the query URL for use by an app to learn persisted query execution by client applications. The first step is to set up an Express server, which you can do before writing any GraphQL code. To connect PWA Studio with the GraphQL endpoint of AEM, you can use the AEM Extension for PWA Studio. GraphqlClientImpl-default. How to set up S3/Azure destinations for Data Warehouse? Total number of users for each product in Admin Console;. The relationship is one user can have multiple posts. I checked all packages available and package in the answer. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. This guide uses the AEM as a Cloud Service SDK. The AEM GraphQL API allows you to update the default cache-control parameters to your queries in order to. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Requirements. src/api/aemHeadlessClient. Developer. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment (preferably Development) The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL persisted queries in a client application. Cloud Service; AEM SDK; Video Series. ) that is curated by the WKND team. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. Schemas on publish are the most critical as they provide the foundation for live delivery of Content Fragment. Persisted GraphQL queries. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. In AEM go to Tools > Cloud Services > CIF Configuration. An end-to-end tutorial illustrating how to build-out and expose content using AEM’s GraphQL APIs and consumed by an external app, in a headless CMS scenario. You can access the query editor from either: Tools -> General -> GraphQL Query Editor. 5. Search for “GraphiQL” (be sure to include the i in GraphiQL ). GraphQL query is an API for headless architecture to deliver content fragment data in the form of JSON. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. Quick setup. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. Anatomy of the React app. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL persisted queries in a client application. Let’s create some Content Fragment Models for the WKND app. Understand how the Content Fragment Model drives the GraphQL API. Developer. Search for “GraphiQL” (be sure to include the i in GraphiQL ). The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. To fetch this, we could write a query that passes in an id and asks for the album with the title, artist and genre fields. In the src/components/Hero. AEM Headless as a Cloud Service. First of all, we will implement the GraphQL server with the popular Express framework. Cloud Service; AEM SDK; Video Series. The content resides in AEM. Without Introspection and the Schema, tools like these wouldn't exist. The content is not tied to the layout, making text editing easier and more organized. Here you can specify: Name: name of the endpoint; you can enter any text. In addition, endpoints also dont work except /global endpoint in AEM 6. Download the latest GraphiQL Content Package v. ; Use GraphQL schema provided by: use the dropdown to select the required site/project. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. This setup establishes a reusable communication channel between your React app and AEM. Learn how to create GraphQL queries to return content from Adobe Experience Manager (AEM) and how to use the GraphiQL tool to quickly test, refine, and debug queries. for the season, ignoring distant calls of civilization urging them to return to normal lives. 1 - Modeling Basics; 2 - Advanced Modeling; 3 - Creating GraphQL Queries; 4 - Content Fragment Variations; 5 - GraphQL Endpoints; 6 - Author and Publish Architecture; 7 - GraphQL Persisted Queries; Basic Tutorial. See Generating Access Tokens for Server-Side APIs for full details. Adobe Experience Manager’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make client-side calls to AEM, both authenticated and unauthenticated, to fetch content or directly interact with AEM. Cloud Service; AEM SDK; Video Series. Unzip the downloaded aem-sdk-xxx. This persisted query drives the initial view’s adventure list. The following tools should be installed locally: JDK 11;. Also, review How to execute a Persisted query, Using query variables, and Encoding the query URL for use by an app to learn persisted query execution by client applications. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. An end-to-end tutorial illustrating how to build-out and expose content using AEM. Learn how to define and use Content Fragments in Adobe Experience Manager (AEM) for use with GraphQL. The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment (preferably Development) Adobe has adopted Adobe Commerce’s GraphQL APIs as its official commerce API for all commerce-related data. x. The /api/graphql is throwing 403 errors which means no frontend commerce operation is happening on the storefront. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. Last update: 2023-10-02. This cross-site request requires CORS to be set up on AEM to allow request from the Netlify domain to access its content. You MUST also configure an instance of the GraphQL client, see the instructions on the corresponding repository to setup the client. AEM Headless GraphQL Video Series Learn about AEM’s GraphQL capabilities through the in-depth walk-through of Content Fragments and and AEM’s GraphQL APIs and development tools. Persisted queries are similar to the concept of stored procedures in SQL databases. Headless implementation forgoes page and component management, as is. Tap Create to bring up the New Content Fragment dialog and enter the following values: Tap Create. It also allows a front-end developer to update the JSON model in order to test functionality and drive changes to the JSON API that would then be later implemented by a back-end developer. Throughout this tutorial, we’ll walk you through the step-by-step process of building a web experience using React and AEM Headless APIs with GraphQL. Search for “GraphiQL” (be sure to include the i in GraphiQL ). Yes, AEM provides OOTB Graphql API support for Content Fragments only. An end-to-end tutorial illustrating advanced concepts of Adobe Experience Manager (AEM) GraphQL APIs. The AEM CIF Core Components together with the AEM CIF Add-On offer authoring and frontend integration between AEM (Adobe Experience Manager) and Adobe Commerce. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. In AEM go to Tools > Cloud Services > CIF Configuration. Navigate to the Software Distribution Portal > AEM as a Cloud Service. Select Create. Experience LeagueThe GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. The zip file is an AEM package that can be installed directly. Understand how to create new AEM component dialogs. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. js and subsequently open this file by running: sudo nano index. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Anatomy of the React app. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. Additionally, we’ll explore defining AEM GraphQL endpoints. Then embed the aem-guides-wknd-shared. Get started with Adobe Experience Manager (AEM) and GraphQL. Navigate to the Software Distribution Portal > AEM as a Cloud Service. GraphiQL Interface: AEM GraphQL implementation provides a standard GraphQL interface to directly input, and test queries. This starts the author instance, running on port 4502 on the local computer. GraphQL efficiently retrieves data from AEM, and we’ll set up and configure endpoints to expose desired data. GraphQL. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. js implements custom React hooks. The response of a GET request can be cached at the dispatcher and CDN layers, ultimately improving the performance of the requesting client. The basic operation of queries with GraphQL for AEM adhere to the standard GraphQL specification. Developer. 0 @okta/[email protected]. 6. Prerequisites. NOTE. Explore the AEM GraphQL API. The best way to get started with GraphQL and AEM is to start experiment with queries using our sample content fragment data. Prerequisites. AEM as a Cloud Service and AEM 6. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. Rich text with AEM Headless. The main feature at this point is being able to make GraphQL queries to AEM which then returns Content Fragment data as JSON so that it can be rendered in Vue Storefront. All i could get is basic functionality to check and run query. 1. But in this project, we will use. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. On your terminal run the following command. Explore the AEM GraphQL API. Cloud Service; AEM SDK; Video Series. From the AEM Start menu, navigate to Tools > Deployment > Packages. Requires JDK 11; The React application is designed to connect to an AEM Publish environment, however it can source content from AEM Author if authentication is provided in the React application’s configuration. Developer. Fetching structured data with GraphQL. Install GraphiQL IDE on AEM 6. 1 - Tutorial Set up; 2 - Defining. 1 - Modeling Basics; 2 - Advanced Modeling. First, using the Cloud Manager UI, copy the values of the Organization, Program, and Environment ID. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. The GraphQL API in AEM is primarily designed to deliver AEM Content Fragment’s to downstream applications as part of a headless deployment. Imagine a standalone Spring boot application (outside AEM) needs to display content. The Single-line text field is another data type of Content. ; We're using Magento in this example but the AEM. e ~/aem-sdk/author. Retrieving an Access Token. GraphQL. This Next. They can be requested with a GET request by client applications. Get a top-level overview of the. This should typically stay at default. The following tools should be installed locally: JDK 11;. Cloud Service; AEM SDK; Video Series. Ensure you adjust them to align to the requirements of your. 5 or later. Learn how to query a list of Content. New GraphQL capabilities add to an already powerful set of REST APIs within Experience Manager for headless content delivery. Using a set of primary source assets, Dynamic Media generates and delivers multiple variations of rich content in real time. In AEM 6. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. This guide uses the AEM as a Cloud Service SDK. Anatomy of the React app. AEM Headless single-page app (SPA) deployments involve JavaScript-based applications built using frameworks such as React or Vue, that consume and interact with content in AEM in a headless manner. Run AEM as a cloud service in. All i could get is basic functionality to check and run query. However, they can become too rigid, unable to support rapidly evolving requirements with a fixed set of data. Create Content Fragment Models. What you will build. js v18; Git; 1. Learn how to define and use Content Fragments in Adobe Experience Manager (AEM) for use with GraphQL. Learn how to create GraphQL queries to return content from Adobe Experience Manager (AEM) and how to use the GraphiQL tool to quickly test, refine, and debug queries. x. If you want to import a GraphQL schema and set up field resolvers using REST or SOAP API endpoints, see Import a GraphQL schema and set up field resolvers. In AEM, GraphQL is only working with Content Fragments at the moment, which have a structure defined by the Content Fragment Models. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM) as a Cloud Service. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. In the previous document of the AEM headless journey, How to Access Your Content via AEM Delivery APIs you learned how to access your headless content in AEM via the. AEM WCM Core Components 2. 1. /config and call it appollo. Persisted queries are similar to the concept of stored procedures in SQL databases. Set up a local AEM development environment by installing local AEM instances, Apache Maven project, Integrated Development Environments (IDE), and troubleshooting. Using the cors package directly, we can configure the Access-Control-Allow-Origin header using the origin option. Open the configuration properties via the action bar. Explore the AEM GraphQL API. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. 5. 5 the GraphiQL IDE tool must be manually installed. Explore AEM's GraphQL APIs using the built-in GrapiQL IDE. Throughout the tutorial, we’ll provide explanations, code examples, and practical tips. js App. I have a bundle project and it works fine in the AEM. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Prerequisites. To set up the Gatsby app, you first need to install the Gatsby CLI, which lets you quickly create new Gatsby-powered sites and run. Rename the jar file to aem-author-p4502. This setup establishes a reusable communication channel between your React app and AEM. Prerequisites. AEM performs best, when used together with the AEM Dispatcher cache. Install GraphiQL IDE on AEM 6. TIP. Content Fragments in AEM provide structured content management. AEM GraphQL API requests. Build ReactJS (with Apollo Client library) and jQuery client applications to consume the API. The following tools should be installed locally: JDK 11;.