The following properties can be configured: GraphQL Client - select the configured GraphQL client for commerce backend communication. From the AEM Start screen, navigate to Tools > General > GraphQL Query Editor. Manage GraphQL endpoints in AEM. AEM’s GraphQL APIs for Content Fragments. The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . Install the @adobe/aem-headless-client-js by running the npm install command from the root of your React project. Adobe is pushing AEM with GraphQL and in the documentation we can read “ The AEM GraphQL API offers total control on the JSON output, and is an industry standard for querying content. 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. We are using AEM 6. Content Fragment Models determine the schema for GraphQL queries in AEM. Learn how to configure AEM Publish Dispatcher filters for use with AEM GraphQL. model. . If auth param is a string, it's treated as a Bearer token. The endpoint is the path used to access GraphQL for AEM. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. In this chapter of Advanced concepts of Adobe Experience Manager (AEM) Headless, learn to work with tabs, date and time, JSON objects, and fragment references in Content. Understand how the Content Fragment Model drives the GraphQL API. zip: AEM as a Cloud Service, the default build. NOTE. The endpoint is the path used to access GraphQL for AEM. . Tap Home and select Edit from the top action bar. The zip file is an AEM package that can be installed directly. The following diagram illustrates the overall architecture for AEM Content Fragments. 0. This guide uses the AEM as a Cloud Service SDK. Persisted queries are queries that are stored on the Adobe Experience Manager (AEM) server. AEM Headless Client for Node. Enhance your skills, gain insights, and connect with peers. To ensure a seamless Magento integration with AEM, Adobe recommends the use of Commerce Integration Framework (CIF). Advanced Modeling for GraphQL Learn how to create relationships between Content Fragment Models in Adobe Experience Manager (AEM) and how to leverage these. Clients can send an HTTP GET request with the query name to execute it. Hence, AEM uses GraphQL to exchange commerce data with Adobe Commerce and with any commerce engine via I/O Runtime. 1-SNAPSHOT. commerce. Quick links. Prerequisites. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. 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. AEM Headless as a Cloud Service. GraphQL; import graphql. It is fully managed and configured for optimal performance of AEM applications. Nov 7, 2022. Select Edit from the edit mode selector in the top right of the Page Editor. While client-side GraphQL queries can also be executed using HTTP POST requests, which cannot be cached, persisted queries can. Say my content fragment model's schema type looks like this: type Message {_path: ID, id: String, body: MultiFormatString} Each content fragment has a unique id that is required. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Schemas on publish are the most critical as they provide the foundation for live delivery of Content Fragment. Next, we’ll use the AEM Headless SDK to retrieve Content Fragment data from AEM’s GraphQL APIs. ViewsExample applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). You switched accounts on another tab or window. impl. apache. Create Content Fragment Models. Check the Adobe Cloud Manager documentation on how to download, setup, and use the Adobe I/O CLI with the Cloud Manager CLI plugin. Add the aem-guides-wknd-shared. granite. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). With Adobe Experience Manager (AEM), Content Fragments let you design, create, curate, and publish page-independent content. Install the @adobe/aem-headless-client-js by running the npm install command from the root of your React project. A single-page application is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the webserver, instead of the default method of a web browser loading entire new pages. I would appreciate any insights or suggestions to resolve this problem. If a site has say 500 game info pages, all using the same page template, all with the same layout, and all with the same the same properties (title, short description, game Id, game type, game large image, game small image etc), it would be great if a front end app could query a subset of these, e. I have a bundle project and it works fine in the AEM. Before calling any method initialize the instance with GraphQL endpoint, GraphQL serviceURL and auth if needed Typedefs Model: object . Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). adobe. 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. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. Don't miss out!AEM Headless is a CMS solution from Experience Manager that allows structured content (Content Fragments) in AEM to be consumed by any app over HTTP using GraphQL. To help with this see: A sample Content Fragment structure. title. Add a configuration and set the following mandatory parameters: identifier: must be unique among all GraphQL clients. If a filter addresses the fields of a nested fragment, AEM has to fall back to loading (into memory) all fragments that share the underlying model. If necessary, the layer can encapsulate and adapt the underlying APIs before exposing them to the project. AEM Headless as a Cloud Service. Understand how to use and administer AEM Content and Commerce. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. The endpoint is the path used to access GraphQL for AEM. * - Starts with /content (AEM content) * - Starts with /graphql (AEM graphQL endpoint) * - Ends with . X. The following tools should be installed locally: JDK 11;. Give the fragment a title and name. 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. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. 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. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. Next. Create Content Fragments based on the. Before going to. View the source code on GitHub. adobe. I get bundle name instead of query list. Use AEM GraphQL pre-caching. Read real-world use cases of Experience Cloud products written by your peersAdobe Experience Manager (AEM) Content Fragments allow you to design, create, curate and publish page-independent content. 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. cq. js App. To accelerate the tutorial a starter React JS app is provided. We offer training on-site, at regional training centers, online,. Reload to refresh your session. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. AEM 6. REST APIs offer performant endpoints with well-structured access to content. In the left-hand rail, expand My Project and tap English. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. I saw queryBuilder API and assets API. It seems to have a completely different syntax than anything else. To verify that the page can be edited, follow the same steps in the section Verify Editing of Text Content on AEM. You switched accounts on another tab or window. GraphQL; import graphql. Learn how to define and use Content Fragments in Adobe Experience Manager (AEM) for use with GraphQL. The benefit of this approach is cacheability. Link to Non-frame version. $ npm i @adobe/aem-headless-client-js This code example shows how to use the React useEffect(…) hook to execute an asynchronous call to AEM GraphQL. 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. Adobe Experience Manager as a Cloud Service uses AEM Publish Dispatcher filters to ensure only requests that should reach AEM do reach AEM. To address this problem I have implemented a custom solution. "servletName": "com. AEM and Adobe Commerce are seamlessly integrated using the Commerce Integration Framework (CIF). The /api/graphql is throwing 403 errors which means no frontend commerce operation is happening on the storefront. GraphQLSchema; Thank you!Next several Content Fragments are created based on the Team and Person models. but once I add the dependency and try to build the code so the OSGI bundle is always in the installed state. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. Community. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. ; Use GraphQL schema provided by: use the dropdown to select the required site/project. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). js implements custom React hooks return data from AEM. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Created for: Beginner. The use of React is largely unimportant, and the consuming external application could be written in any framework. Learn how and when to leverage AEM Author and Publish environments when using AEM’s GraphQL APIs. Adobe Experience Manager as a Cloud Service uses AEM Publish Dispatcher filters to ensure only requests that should reach AEM do reach AEM. Local development (AEM 6. Additionally, make sure that the "Preview Mode" is set to "Standard". Adobe has adopted Adobe Commerce’s GraphQL APIs as its official commerce API for all commerce-related data. AEM devs, join us on Nov 6 (EMEA, LATAM, NA) & Nov 15 (APAC) for Adobe Developers Live. Clients can send an HTTP GET request with the query name to execute it. 1. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. 5 is straight forward as the AEM Commerce Add-On is a full replacement of the CIF Connector. In this chapter of Advanced concepts of Adobe Experience Manager (AEM) Headless, learn how to create and update persisted GraphQL queries with parameters. With Content Fragments and the GraphQL API you can use Adobe Experience Manager (AEM) as a Cloud Service as a Headless Content Management System (CMS). 0 or later Included in the WKND Mobile AEM Application Content Package below; Prior to starting this tutorial ensure the following AEM instances are installed and running on your local machine:. js application run from the command line to update asset metadata on AEM as a Cloud Service using Assets HTTP API. An end-to-end tutorial illustrating how to build-out and expose content using AEM's GraphQL APIs and consumed by an. AEM on-premise 6. * - Starts with /content (AEM content) * - Starts with /graphql (AEM graphQL endpoint) * - Ends with . This means you can realize headless delivery of structured content for use in your applications. 08-05-2023 06:03 PDT. @adobe/aem-react-editable-components v2: provides an API for building custom SPA components and provides common-use implementations such as the AEMPage React component. Search for “GraphiQL” (be sure to include the i in GraphiQL ). Inside the "target" folder we need to use "graphql-sample. Let’s create some Content Fragment Models for the WKND app. AEM container components use policies to dictate their allowed components. Using the GraphiQL IDE. Example: if one sets up CUG, the results returned will be based on user's session. Once headless content has been translated,. js implements custom React hooks return data from AEM. Currently t he GraphQL feature is enabled by default only on the AEM SDK from 2021-02-04 or newer on AEM as Cloud Service. Brands have a lot of flexibility with Adobe’s CIF for AEM. ; The Content Fragment is an instance of a Content Fragment Model that represents a logical. GraphQL query is an API for headless architecture to deliver content fragment data in the form of JSON. To address this problem I have implemented a custom solution. ; If you use letters in Experience Manager 6. Depending on your instance, you can directly access the GraphiQL interface included with AEM GraphQL API for submitting and testing queries. From the AEM Start screen, navigate to Tools > General > Content Fragment Models. Navigate to Sites > WKND App. The examples below use small subsets of results (four records per request) to demonstrate the techniques. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. The GraphQL API in AEM is primarily designed to deliver AEM Content Fragment’s to downstream applications as part of a headless deployment. zip" to upload it, build and install it on the author and publish instances. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. sites. Next, we’ll use the AEM Headless SDK to retrieve Content Fragment data from AEM’s GraphQL APIs. Welcome to the documentation for developers who are new to Adobe Experience Manager headless CMS! Learn about the powerful and flexible headless features, their capabilities, and how to use them on your first headless development project. 0. The AEM Commerce Add-On for AEM 6. The GraphiQL tool enables developers to create and test queries against content on the current AEM environment. In this video you will: Understand the AEM Author and Publish architecture and how content is published. Content Fragment Models determine the schema for GraphQL queries in AEM. Headful : Website AnatomyConfiguring the container in AEM. Adobe I/O Runtime-Driven Communication Flow The previous section describes the standard and recommended implementation of server-side rendering regarding SPAs in AEM, where AEM performs the bootstrapping and serving. Yes, AEM provides OOTB Graphql API support for Content Fragments only. Tap Get Local Development Token button. Community Advisors. API Reference. content module is used directly to ensure proper package installation based on the dependency chain. In previous releases, a package was needed to install the GraphiQL IDE. To enable the corresponding endpoint: . Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). There are two types of endpoints in AEM: Global. @amit_kumart9551 tried to reproduce the issue in my local 6. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. The reason of above is a fact that GraphQL Query Editor is restricted by render condition that relays on feature toggle: ft-sites-155. Using useEffect to make the asynchronous GraphQL call in. Follow the AEM Content Fragments documentation to setup a GraphQL endpoint for your AEM project. Create Content Fragments based on the. Hybrid and SPA with AEM; SPA Introduction and Walkthrough; SPA WKND Tutorial; Getting Started using React; Implementing a React Component for SPA; Getting. It is best practice and highly recommended to use persisted queries when working with the AEM GraphQL API. Then it is converted into a String. This guide uses the AEM as a Cloud Service SDK. The AEM Project Archetype generates a project primed for AEM’s integration with a Remote SPA, but requires a small, but important adjustment to auto-generated AEM page structure. After we download the " GraphQL Sample Configuration" file, we need to unpack it and inside of it run : It will create a "target" folder inside the "all" folder. Adobe Experience Manager Assets keeps metadata for every asset. 5 Forms, install the latest. Tap on the download button in the top-left corner to download the JSON file containing accessToken value, and save the JSON file to a safe location on your development machine. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Real-Time Customer Data Platform. This document provides information on Hybrid Filtering and Paging, with some best practices to optimize GraphQL queries. View the source code. servlet. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which. In order to support other 3rd-party "non-Adobe" commerce platforms, this project implements an example "reference" implementation that demonstrates how a 3rd-party commerce platform can be integrated with the CIF GraphQL connector and the AEM CIF Core Components via the Magento GraphQL API. js implements custom React hooks return data from AEM. content artifact in the other WKND project's all/pom. Reload to refresh your session. The <Page> component has logic to dynamically create React components. json (AEM Content Services) * *. Verify Page Content on AEM. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. Register now! SOLVED AEM Graphql Java. jackrabbit. iamnjain. impl. Author and Publish Architecture. This tutorial will cover the following topics: 1. The Single-line text field is another data type of Content Fragments. In the left-hand rail, expand My Project and tap English. In this chapter, you persist the queries to AEM and learn how to use cache control on persisted queries. In this tutorial, you learn how to integrate the requests for persisted queries into the sample WKND GraphQL React app using the AEM Headless Client for JavaScript. The AEM GraphQL API was not fully developed and some features, such as Mutations, Subscriptions, and Paging/Sorting, were still in progress at the time. I have graphQL Services at client place and would like to consume the services using GraphQL Client api provided by adobe, as application is an aem application. Learn how to use GraphQL with AEM to serve content headlessly by exploring sample content and queries. $ npm i @adobe/aem-headless-client-js This code example shows how to use the React useEffect(…) hook to execute an asynchronous call to AEM GraphQL. These remote queries may require authenticated API access to secure headless content. 5 is also available on the Software Distribution portal. 10-01-2023 13:21 PST. You can check Release Notes here in Known issues section [SITES-15622: GraphQL - Issue with per. Author the Title component in AEM. xml, updating the <target> to match the embedding WKND apps' name. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The AEM Headless SDK is set of libraries that can be used by clients to quickly and easily interact with AEM Headless APIs over HTTP. The ui. With the ability to extract metadata from files uploaded to Experience Manager Assets, metadata management. java can be found in the. New capabilities with GraphQL. 3. 5. AEM 6. Next, create two models for a Team and a Person. Community Advisor 30-04-2023 05:03 PDT. For example, to grant access to the. Review high-level concepts about the Adobe Commerce and Magento Open Source GraphQL API. The response of a GET request can be cached at the dispatcher and CDN layers, ultimately improving the performance of the requesting client. The CIF Core Components and the Commerce Add-On connect to a Magento (or alternative) via GraphQL. $ npm i @adobe/aem-headless-client-js This code example shows how to use the React useEffect(…) hook to execute an asynchronous call to AEM GraphQL. AEM and Adobe Commerce are seamlessly integrated using the Commerce Integration Framework (CIF). The auto-generated AEM page must have its type changed to Remote SPA page , rather than a SPA page . Updating your Content Fragments for optimized GraphQL Filtering; Authentication for Remote AEM GraphQL Queries on Content Fragments; AEM GraphQL API with Content Fragments - Sample Content and Queries; Hybrid and SPA AEM Development. (SITES-15087) GraphQL Query Editor. Using useEffect to make the asynchronous GraphQL call in React is useful because: Persisted queries are GraphQL queries that are created and stored on the Adobe Experience Manager (AEM) as a Cloud Service server. The GraphQL API then can be implemented directly within the commerce solution using the tools and programming languages the commerce solution provides. Apply mode ALL_OR_EMPTY (on arrays/multi-value fields) didn’t return fragments with null values for. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Understanding and modifying the GraphQL queries is one of the key ways in which the CIF Core Components can be extended. X. This is a critical configuration when using SPA Editor, since only AEM Components that have mapped SPA component counterparts are render-able by the SPA. I get the same issue GraphQL Query Editor is not visible, and when I ma trying to access it via url aem/graphiql. From the AEM Start menu, navigate to Tools > Deployment > Packages. This method takes a string parameter that represents the URL of the. Using this path you (or your app) can: receive the responses (to your GraphQL queries). This iOS application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Boolean parameters in Persisted Queries is working correctly in AEM 6. js implements custom React hooks. ; Install the Forms add-on package as described in Installing AEM Forms add-on packages. X) the GraphiQL Explorer (aka GraphiQL IDE) tool needs to be manually installed, follow instruction from here. First, create the intermediary adventure Page segment: Log in to AEM Author; Navigate to Sites > WKND App > us > en > WKND App Home Page. Enhance your skills, gain insights, and connect with peers. Log in to AEM Author. Download the corresponding Forms add-on package listed at AEM Forms releases for your operating system. content as a dependency to other project's. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL IDE. As you can see here; I query an Image from a CF. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. Checkout Getting Started with AEM Headless - GraphQL. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. json (AEM Content Services) * * @param {*} path the path. View the source code on GitHub. With CIF, AEM integrates seamlessly with Adobe Commerce, making it the easiest solution for creating unparalleled e-commerce experiences. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Created for: User. Here you can specify: ; Name: name of the endpoint; you can enter any text. Not sure what the reason could be but this is happening even with untouched old persistent queries as well. However, they can become too rigid, unable to support rapidly evolving requirements with a fixed set of data. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. Anatomy of the React app. It will be used for application to application authentication. Next several Content Fragments are created based on the Team and Person models. This GraphQL API is independent from AEM’s GraphQL API to access Content Fragments. 1. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. servlet. Download the corresponding Forms add-on package listed at AEM Forms releases for your operating system. Author in-context a portion of a remotely hosted React. cors. The GraphQL API of AEM provide a powerful query language to expose data of Content Fragments to downstream applications. json where appname reflects the name of your application. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The. If you require a single result: ; use the model name; eg city . In AEM go to Tools > Cloud Services > CIF Configuration. Adobe Experience Manager Sites & More. Ensure only the components which we’ve provided SPA. Kam-nyc. aem-guides-wknd. Ensure you adjust them to align to the requirements of your project. This Next. It is worth noting that the AEM GraphQL API should not be confused with GraphQL itself. Headless implementations enable delivery of experiences across platforms and channels at scale. Combine this with over 500 Rest and GraphQL operations offered by Adobe Commerce and you have complete flexibility and functionality across all front end layers — the various sites your customers interact with — from a single back end. Once we have the Content Fragment data, we’ll integrate it into your React app. Previous page. From the AEM Start Screen, tap Content Fragments to open up the Content Fragments UI. Select WKND Shared to view the list of existing. While client-side GraphQL queries can also be executed using HTTP POST requests, which cannot be cached, persisted queries can. granite. aem rde install Install/update bundles, configs, and content-packages. Coming back to the issue, this is essentially a CSRF issue, as pointed by others. In this video you will: Understand the power behind the GraphQL language Learn how to query a list of Content Fragments and a single Content Fragment The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. For GraphQL queries with AEM there are a few extensions: . 5. The GraphQL API in AEM is primarily designed to deliver AEM Content Fragment’s to downstream applications as part of a headless deployment. 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. Can someone help me understand how can I fetch the same? GraphQL is used in two (separate) scenarios in Adobe Experience Manager (AEM): AEM Commerce consumes data from a Commerce platform via GraphQL . AEM as a Cloud Service and AEM 6. When I move the setup the AEM publish SDK, I am encountering one issue. GraphQL is used in two (separate) scenarios in Adobe Experience Manager (AEM): AEM Commerce consumes data from a Commerce platform via GraphQL. ui. Tap Create new technical account button. Since we get GrapghQL connector installed in AEM for Content fragment -Headless approach. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM) as a Cloud Service. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL IDE. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. Using the AEM JSON exporter, you can deliver the contents of any AEM page in JSON data model format. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. These remote queries may require authenticated API access to secure headless content delivery. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial. Experience League. model. AEM’s GraphQL APIs for Content Fragments. Create content pages in AEM. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. Adobe Digital Learning Services can help your business deliver the ideal experience to every customer, every time. 0 and persists in the latest release. AEM applies the principle of filtering all user-supplied content upon output. Mukesh_Kumar_Co. Don't miss out on Adobe Developers Live, a one-day virtual conference filled with networking opportunities, important AEM developer updates, and deep-dive sessions with experts. It also allows AEM Authors to use Product and Category Pickers and a read-only Product Console to browse through product and. Dispatcher. vineetham123. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that. In this video you will: Learn how to enable GraphQL Persisted Queries. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Previous page. The GraphiQL tool enables developers to create and test queries against content on the current AEM environment. The response of a GET request can be cached at the Dispatcher and Content Delivery Network (CDN) layers, ultimately improving the performance. Cloud Service; AEM SDK; Video Series. AEM 6. GraphQL API. Schemas on publish are the most critical as they provide the foundation for live delivery of Content Fragment. The execution flow of the Node.