aem graphql setup. Add the aem-guides-wknd-shared. aem graphql setup

 
 Add the aem-guides-wknd-sharedaem graphql setup  Please ensure that the previous chapters have been completed before proceeding with this chapter

Cloud Service; AEM SDK; Video Series. Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make browser-based client-side calls to AEM’s GraphQL APIs, and other AEM Headless resources. Learn to create a custom AEM Component that is compatible with the SPA editor framework. jar file to install the Author instance. js application run from the command line to update asset metadata on AEM as a Cloud Service using Assets HTTP API. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). 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. Learn how to create relationships between Content Fragment Models in Adobe Experience Manager (AEM) and how to leverage these relationships in GraphQL queries. The best way to get started with GraphQL and AEM is to start experiment with queries using our sample content fragment data. Can you also check the GraphQL endpoint, schema definitions, and permissions. Cloud Service; AEM SDK; Video Series. Prerequisites. To help with this see: A sample Content Fragment structureThe other fields were added automatically by AEM, and represent helpful methods to provide information about a certain Content Fragment; in this example, (the helper fields) _path, _metadata, _variations. The application uses two persisted queries: wknd/adventures-all persisted query, which returns all adventures in AEM with an abridged set of properties. servlet. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. Next Steps. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. 13 instance, then you can use GraphQL. Hence, AEM uses GraphQL to exchange commerce data with Adobe Commerce and with any commerce engine via I/O Runtime. Add Sling Mappings to AEM that map the SPA routes to resources in AEM; Set up AEM’s Cross-Origin Resource Sharing security policies that allow the Remote SPA to consume content from AEM; Deploy the AEM project to your local AEM SDK Author service; Mark an AEM Page as the Remote SPA’s root using the SPA Host URL page property; Next Steps Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make browser-based client-side calls to AEM’s GraphQL APIs, and other AEM Headless resources. For this to work, a GraphQL Schema must be generated that defines the shape of the data. commerce. Advanced Modeling for GraphQL | Adobe Experience Manager Documentation AEM AEM Tutorials AEM Headless Tutorial Advanced Modeling for GraphQL Learn how to create. In previous releases, a package was needed to install the GraphiQL IDE. Unzip the download and copy the Quickstart jar ( aem-sdk-quickstart-XXX. In addition, endpoints also dont work except /global endpoint in AEM 6. x. We use the WKND project at. 5. Prerequisites. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. The purpose of this integration layer is to map third-party APIs and schemas against the supported Adobe Commerce GraphQL APIs and schemas outside of the Experience Manager. Clients can send an HTTP GET request with the query name to execute it. Using GraphQL on the other hand does NOT have the extra unwanted data. Navigate to the Software Distribution Portal > AEM as a Cloud Service. An end-to-end tutorial illustrating advanced concepts of Adobe Experience Manager (AEM) GraphQL APIs. It only takes about 20–30 minutes, and by the end of it you’ll have a very simple React UI that loads its data with. Is there a package available that can provide persistence query option (Save as on graphql query editor). For the “Consistent Access Set up,” you can bypass the “Setting up CUG” section and proceed directly to the “Generate Service Credentials” step. 5. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. How to use. Having a shared nothing architecture might seem reasonable from the microservices. Imagine a standalone Spring boot application (outside AEM) needs to display content. Please ensure that the previous chapters have been completed before proceeding with this chapter. You need to have access to Cloud Manager. 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. In AEM 6. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a React App that consumes the content over AEM Headless GraphQL APIs. 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. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. The SPA is served from a Netlify domain, but makes an XHR call to AEM GraphQL APIs on a different domain. In AEM projects, frontend developers usually build a static prototype with a set of static components which are handed to the backend. Instead, we’ll get this data from the data layer using the GraphQL query. This setup establishes a reusable communication channel between your React app and AEM. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. x. . Unzip the downloaded aem-sdk-xxx. Navigate to Tools > General > Content Fragment Models. Prerequisites. json file. Explore the AEM GraphQL API. Path to your first experience using AEM Headless: Setup your development environment and learn how to integrate a simple app with AEM Headless: 4: How to model your content: Learn how to model your content structure. AEM performs best, when used together with the AEM Dispatcher cache. In previous releases, a package was needed to install the GraphiQL IDE. Prerequisites. Throughout the tutorial, we’ll provide explanations, code examples, and practical tips. In a new project, you will install express and cors with the npm install command: npm install express cors. Next, we’ll use the AEM Headless SDK to retrieve Content Fragment data from AEM’s GraphQL APIs. I added GraphQL to the bundle in the AEM and it caused bundle start failed. 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 /api/graphql is throwing 403 errors which means no frontend commerce operation is happening on the storefront. Enabling your GraphQL Endpoint. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. Learn how to configure Cross-origin resource sharing (CORS) for use with AEM GraphQL. I am trying to make a call to a GraphQL endpoint (external, not controlled by me), all I can find on internet is how to setup a back-end GraphQL endpoint using Java Spring Boot. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. directly; for example, NOTE. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. This guide uses the AEM as a Cloud Service SDK. 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. Prerequisites. This guide uses the AEM as a Cloud Service SDK. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Ensure that your local AEM Author instance is up and running. 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. bat start. Learn about the various data types used to build out the Content Fragment Model. 12) Java 11; Node JS; NPM; CIF addon/Venia sample project setup: As a first step, download the CIF addon compatible with AEM 6. This setup pattern is currently used by the majority of our AEM Content and Commerce customers. Dynamic navigation is implemented using Angular routes and added to an existing Header component. Navigate to the Software Distribution Portal > AEM as a Cloud Service. Once headless content has been translated,. 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. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. 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. Learn how to enable, create, update, and execute Persisted Queries in AEM. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM) as a Cloud Service. Now, open your project folder in a text editor. Using the cors package directly, we can configure the Access-Control-Allow-Origin header using the origin option. 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 WKND client application connects to AEM publish service, so it is important that you published the following to the AEM publish service. 0 versions enable the GraphQL runtime platform to expose the Content Fragments through GraphQL API. First, using the Cloud Manager UI, copy the values of the Organization, Program, and Environment ID. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. An end-to-end tutorial illustrating how to build. AEM Headless quick setup using the local AEM SDK 1. Prerequisites. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. Prerequisites. GraphQL Query optimization Content Fragments. AEM Headless Developer Portal; Overview; Quick setup. CIF enables AEM to access an Adobe Commerce instance and communicate with Adobe Commerce via GraphQL. An end-to-end tutorial illustrating advanced concepts of Adobe Experience Manager (AEM) GraphQL APIs. Using a set of primary source assets, Dynamic Media generates and delivers multiple variations of rich content in real time. 1 - Modeling Basics; 2 - Advanced Modeling; 3 - Creating GraphQL Queries; 4 - Content Fragment. TIP. 0+ version supports GraphQL API to expose the Content Fragment to enable the headless content experience. Previous page. Is there a way to. 5 the GraphiQL IDE tool must be manually installed. @apollo/server : The Apollo GraphQL server. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. In AEM go to Tools > Cloud Services > CIF Configuration. However, they can become too rigid, unable to support rapidly evolving requirements with a fixed set of data. Quick setup. The completed SPA, deployed to AEM, can be dynamically authored with traditional in. Eventually, your architecture might look like this. Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to make browser-based client-side calls to AEM’s GraphQL APIs, and other AEM Headless resources. in folder . 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. 5 Forms or earlier to AEM Forms as a Cloud Service; Groups and permissions; Import, export, and organize Adaptive Forms, PDF forms, and other assets; Integrate. 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. 5. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. We are using AEM 6. The AEM GraphQL API allows you to update the default cache-control parameters to your queries in order to improve. What you will build. GraphQL API. One could export an AEM page in JSON format via a REST call, however there are many fields in the JSON that the Spring Boot app does not use. The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. AEM Headless Developer Portal; Overview; Quick setup. Persisted queries will optimize performance and caching. AEM. Developer. Connect them to Magento instance: AEM GraphQL is typically enabled by. Prerequisites. AEM as a Cloud Service; Local set up using the AEM Cloud Service SDK. 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. Thanks to this encapsulation, the integration logic, and systems can get updated without changing code inside the Experience Manager. 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. It works perfectly fine for one or multiple commerce websites. Persisted queries are similar to the concept of stored procedures in SQL databases. Alongside these services, you’ll want to provide different client apps for your users to use your product. It works perfectly fine for one or multiple commerce websites. But in this project, we will use. This part of the journey applies to the Cloud Manager administrator. . The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. Experience Manager. Using AEM Multi Site Manager, customers can roll. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. Learn how to model content and build a schema with Content Fragment Models in AEM. 5. 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. AEM content fragments are based on Content Fragment Models [i] and. CRXDE Lite is embedded into CRX/AEM and enables you to perform standard development tasks in the browser. PrerequisitesFor authentication, the third-party service must retrieve an Access Token that can then be used in the GraphQL Request. Persisted queries are similar to the concept of stored procedures in SQL databases. The basic operation of queries with GraphQL for AEM adhere to the standard GraphQL specification. If you see this message, you are using a non-frame-capable web client. 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. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. 13. When I move the setup the AEM publish SDK, I am encountering one issue. @pradeepdubey82 Does the above mean, that you have defined a custom Endpoint instead of OOTB Global Endpoint?If that is so, custom Global Endpoint will work perfectly with External System, it is only the graphiQL interface that is bound to global. This can be done through either npm or yarn. They can be requested with a GET request by client applications. Client type. Build ReactJS (with Apollo Client library) and jQuery client applications to consume the API. This article describes how to work with large results in AEM Headless to ensure the best performance for your application. In this video you will: Understand the power behind the GraphQL language. content as a dependency to other project's. Update cache-control parameters in persisted queries. Learn how AEM automatically generates a GraphQL schema based on a Content Fragment model. A simple weather component is built. Anatomy of the React app. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment (preferably Development) Use AEM GraphQL pre-caching. To help with this see: A sample Content Fragment structure. 0 or later. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. 5. 1. Without Introspection and the Schema, tools like these wouldn't exist. cq. How to set up a Gatsby app; Using Gatsby and GraphQL. Learn. We have a business requirement where we need to secure AEM graphql endpoint with OKTA. AEM 6. 0+ version supports GraphQL API to expose the Content Fragment to enable the headless content experience. This GraphQL API is independent from AEM’s GraphQL API to access Content Fragments. Developer. 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. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. Run the following command to start the SDK: (on Microsoft® Windows) sdk. 5 service pack 12. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). extensions must be set to [GQLschema] sling. 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. adapters. At the same time, introspection also has a few downsides. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. jar file to install the Publish instance. graphql. Figure 1 illustrates a simple and pretty typical deployment of AEM as a Cloud Services together with a single instance of Adobe Commerce. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. Navigate to the Software Distribution Portal > AEM as a Cloud Service. In this chapter, you explore how AEM’s GraphQL APIs can drive the experience in an external application. In addition, endpoints also dont work except /global endpoint in AEM 6. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. Deploy the front-end code repository to this pipeline. 5 the GraphiQL IDE tool must be manually installed. x. Contact Adobe to enable this capability for your AEM Cloud Service program and environments. 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 following configurations are examples. In this video you will: Learn how to create and define a Content Fragment Model. The zip file is an AEM package that can be installed directly. Download the latest GraphiQL Content Package v. Prerequisites. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. A git repo for the AEM environment must be set up in. so, you need to modify the package. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. x. for the season, ignoring distant calls of civilization urging them to return to normal lives. The Story So Far. Persisted Queries and. The zip file is an AEM package that can be installed directly. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). This setup uses the AEM as a Cloud Service SDK to explore AEM’s GraphQL. 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. Build a React JS app using GraphQL in a pure headless scenario. How to use. We’ll look at the benefits of GraphQL, the GraphQL tooling available in AEM, and simple and advanced GraphQL query creation. PrerequisitesInstall GraphiQL IDE on AEM 6. Clone the adobe/aem-guides-wknd. The zip file is an AEM package that can be installed directly. 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. Navigate to Tools, General, then select GraphQL. 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. The first step is to set up an Express server, which you can do before writing any GraphQL code. 0. ) that is curated by the. An end-to-end tutorial illustrating advanced concepts of Adobe Experience Manager (AEM) GraphQL APIs. 5. 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. This Next. 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. AEM GraphQL API {#aem-graphql-api} . This connection has to be configured in the com. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM). Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service environment. In AEM go to Tools > Cloud Services > CIF Configuration. 0 versions enable the GraphQL runtime platform to expose the Content Fragments through GraphQL API. bio. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. The latest version of AEM and AEM WCM Core Components is always recommended. The following tools should be installed locally: JDK 11;. AEM Headless quick setup using the local AEM SDK. Learn how to configure AEM hosts in AEM Headless app. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. The zip file is an AEM package that can be installed directly. Update Policies in AEM. Content Fragments in AEM provide structured content management. Enable Adaptive Forms Core Components on AEM Forms as a Cloud Service and local development environment; Configure Unified Storage Connector; Migrate from AEM 6. 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. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL IDE. From the developer perspective, you gain simplicity and a central place to setup libraries, tools and your IDE extensions. Cloud Service; AEM SDK; Video Series. ViewsCreated for: User. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Overview; 1 - Defining Content Fragment Models; 2 - Authoring Content. I checked all packages available and package in the answer. graphql : The library that implements the core GraphQL parsing and execution algorithms. zip file. Download the latest GraphiQL Content Package v. 0. 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. Prerequisites. AEM as a Cloud Service and AEM 6. I checked all packages available and package in the answer. The AEM GraphQL API allows you to update the default cache-control parameters to your queries in order to. 5 version from the Adobe Software Distribution Website and install it through the package manager on both Author and publisher. An end-to-end tutorial illustrating how to build-out and expose content using AEM and consumed by a native mobile app, in a headless CMS scenario. src/api/aemHeadlessClient. Experience LeagueThe 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. There are a couple ways to do this in this case we will use the create-next-app command. 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. Navigate to Tools > General > Content Fragment Models. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. To use GraphQL in AEM, you will need to create a GraphQL endpoint in AEM. For a third-party service to connect with an AEM instance it must have an. js; seo. client. 1 - Tutorial Set up; 2 - Defining. Learn how to create, update, and execute GraphQL queries. Complete the quick setup for AEM as a Cloud Service to configure your AEM as a Cloud Service. Schemas on publish are the most critical as they provide the foundation for live delivery of Content Fragment. Gatsby is able to automatically infer a GraphQL Schema from your data, and in many cases, this is really all you need. The idea is to define several GraphQL schemas, and tell the server. If you have installed the GraphQL 1. From the AEM Start menu, navigate to Tools > Deployment > Packages. Quick setup. Cloud Service; AEM SDK; Video Series. Select WKND Shared to view the list of existing. 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. 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. Send GraphQL queries using the GraphiQL IDE. Create Content Fragments based on the. js and subsequently open this file by running: sudo nano index. Cloud Service; AEM SDK; Video Series. Ensure you adjust them to align to the requirements of your project. In previous releases, a package was needed to install the GraphiQL IDE. GraphQL efficiently retrieves data from AEM, and we’ll set up and configure endpoints to expose desired data. Experience League. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. Think about GraphQL Config as one configuration for all your GraphQL tools. 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. Additionally, we’ll explore defining AEM GraphQL endpoints. Author in-context a portion of a remotely hosted React. Developer. AEM Headless quick setup using the local AEM SDK. The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. Tutorials by framework. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Rename the jar file to aem-author-p4502. 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. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. Experiment constructing basic queries using the GraphQL syntax. Persisted queries are similar to the concept of stored procedures in SQL databases. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. Prerequisites. 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. Update cache-control parameters in persisted queries.