This tutorial walks through the implementation of an AEM site for a fictitious lifestyle brand the WKND. Next, navigate to AEM to verify the updates and allow the OpenWeather component to be added to the SPA. Hello and welcome to the Adobe Experience Manager headless video series. Example server-to. Documentation AEM AEM Tutorials AEM Headless Tutorial Content Fragment Variations. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). 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. In this tutorial i will show you how to integrate PWA with AEM using headless CMS (content as service) concept of AEM. 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. Tap Home and select Edit from the top action bar. // src/lib/aem-headless-client. Enable developers to add automation. Created for: Intermediate. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. Author in-context a portion of a remotely hosted React. Welcome to the documentation for developers who are new to Adobe Experience Manager. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Adobe Experience Manager Tutorial For Beginners. X) the GraphiQL Explorer (aka GraphiQL IDE) tool needs to be manually installed, follow instruction from here. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL IDE. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. In Edit mode, add the Card component to the Layout Container: Drag and drop an image from the Asset finder onto the Card component: Open the Card component dialog and notice the addition of a Text Tab. 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. Documentation AEM AEM Tutorials AEM Headless Tutorial AEM Headless mobile deployments. Deploy all of the updates to a local AEM environment from the root of the project directory, using your Maven skills: $ cd aem-guides-wknd-spa. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. How to use AEM provided GraphQL Explorer and API endpoints. TIP. Last update: 2022-11-11. Browse the following tutorials based on the technology used. This AEM tutorial blog will give you a glimpse of all the essential concepts required for beginners to get started. With our headless CMS you can create structured content once and reuse it across any digital touchpoint via APIs. Build React app that fetches content/data from AEM GraphQL API, also see how AEM Headless JS SDK is used. Hello and welcome to the Adobe Experience Manager headless video series. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). react. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring. js application is as follows: The Node. Prerequisites. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. . Documentation AEM AEM Tutorials AEM Headless Tutorial AEM Headless deployments AEM Headless client deployments take many forms; AEM-hosted SPA, external SPA,. Build a React JS app using GraphQL in a pure headless scenario. Created for: Intermediate. The Adventure Detail SPA route is defined as /adventure/:slug where slug is a unique identifier property on the Adventure Content Fragment. Navigate to Tools > General > Content Fragment Models. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. ), executing the persisted GraphQL query. Select Edit from the mode-selector in the top right of the Page Editor. Implementing Applications for AEM as a Cloud Service; Using. Update Policies in AEM. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. Developer. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. Content Fragment Variations. Let’s take a look at the learning objectives for this tutorial. Get to know how to organize your headless content and how AEM’s translation tools work. This iOS application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Clients can send an HTTP GET request with the query name to execute it. In the left-hand rail, expand My Project and tap English. js (JavaScript) AEM Headless SDK for. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. runPersistedQuery(. This allows developers to place SPA Editor-compatible components into the SPA views, and allow users to author the components’ content in AEM SPA Editor. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. To accelerate the tutorial a starter React JS app is provided. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial. Learn about AEM’s GraphQL capabilities through the in-depth walk-through of Content Fragments and and AEM’s GraphQL APIs and development tools. Create Content Fragments based on. 5 Examples React Next. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. Each function in turn invokes the aemHeadlessClient. If you currently use AEM, check the sidenote below. Explore AEM’s GraphQL capabilities by building. Developing View. AEM Headless as a Cloud Service. Topics: Content Fragments View more on this topic. Learn how AEM can go beyond a pure headless use case, with. Tap Create to bring up the New Content Fragment dialog and enter the following values: Tap Create. Navigate to Tools > General > Content Fragment Models. In a real application, you would use a larger number. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6. js) Remote SPAs with editable AEM content using AEM SPA Editor. react. Getting Started with AEM SPA Editor and React Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. AEM Preview is intended for internal audiences, and not for the general delivery of content. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Hello and welcome to the Adobe Experience Manager Headless Series. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. The AEM SDK is used to build and deploy custom code. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. Command line parameters define: The AEM as a Cloud Service Author. js. All of the WKND Mobile components used in this. // src/lib/aem-headless-client. js with a fixed, but editable Title component. Browse the following tutorials based on the technology used. : Guide: Developers new to AEM and headless: 1. For publishing from AEM Sites using Edge Delivery Services, click here. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. In Edit mode, add the Card component to the Layout Container: Drag and drop an image from the Asset finder onto the Card component: Open the Card component dialog and notice the addition of a Text Tab. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Typical AEM as a Cloud Service headless deployment. Objective. Prerequisites. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The Single-line text field is another data type of Content. For a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. Once headless content has been translated,. Next, navigate to AEM to verify the updates and allow the OpenWeather component to be added to the SPA. 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. Learn how to add editable container components to a remote SPA that allow AEM authors drag and drop components into them. This Web Component application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and render a portion of UI, accomplished using pure JavaScript. The use of AEM Preview is optional, based on the desired workflow. Tutorials by framework. For further details about the dynamic model to component mapping. Last update: 2023-04-21. Example applications are a great way to explore the headless. Tutorials by framework. Clone the adobe/aem-guides-wknd-graphql repository: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. In previous releases, a package was needed to install the. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. The tutorial explores token-based authentication using AEM Assets HTTP APIs but the same concepts and approaches are applicable to apps interacting with AEM Headless GraphQL APIs. Learn how multiple views in the SPA can be supported by mapping to AEM Pages with the SPA Editor SDK. Last update: 2023-04-21. AEM Headless Web Component/JS deployments are pure JavaScript apps that run in a web browser, that consume and interact with content in AEM in a headless manner. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Web Component/JS deployments differ from SPA deployments in that they don’t use a robust SPA framework, and are expected to be embedded in the context of any. The WKND Site is an Adobe Experience Manager sample reference site. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Understand how the source code for a Single Page Application (SPA) written in Angular can be integrated with an Adobe Experience Manager (AEM) Project. Developer. 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. AEM Preview is intended for internal audiences, and not for the general delivery of content. Web Component/JS deployments differ from SPA deployments in that they don’t use a robust SPA framework, and are expected to be embedded in the context. Cross-origin resource sharing (CORS) Last update: 2023-09-28. In today’s series, we’re going to take a look at modeling basics in Adobe Experience Manager by first looking at the WKND Site. 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. Hello and welcome to the Adobe Experience Manager Headless Series. CTA Text - “Read More”. To support AEM Content Service’s JSON export of Pages and Components, the Pages and Components must derive from AEM WCM Core Components. Adobe Experience Manager as a Cloud Service uses AEM Publish Dispatcher filters to ensure only requests that. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. 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. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. AEM's headless CMS features allow you to employ many technologies to provide content across all channels. js app. Create Content Fragments based on. Each function in turn invokes the aemHeadlessClient. js. Developer. Developer. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Created for: Beginner. An end-to-end tutorial illustrating how to build-out. Persisted queries are queries that are stored on the Adobe Experience Manager (AEM) server. 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. In this chapter, we replace the Home view’s title, “Current Adventures”, which is hard-coded text in Home. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. Tap Home and select Edit from the top action bar. AEM Headless supports a offset/limit and cursor-based pagination queries to smaller subsets of a larger result set. AEM’s WCM Core Components have built-in functionality to support a normalized JSON schema of exported Pages and Components. By the way, since I asked my original question, I found out that the "AEM Headless Developer Journey" will be probably a good starting point for me to get an overview of some available headless features. Learn to author content and embed referenced content using a multi-line rich text editor with Adobe Experience Manager Content Fragments, and how rich text is delivered by AEM's GraphQL APIs as JSON to be consumed by headless applications. AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. In the left-hand rail, expand My Project and tap English. This Android application demonstrates how to query content using the GraphQL APIs of AEM. . Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. It’s ideal for getting started with the basics. js (JavaScript) AEM Headless SDK for Java™. Editable Templates are used to define the JSON content structure AEM Content Services exposes to clients via the composition of Content Services enabled AEM Components. The benefit of this approach is cacheability. X. @adobe/aem-react-editable-components v2: provides an API for building custom SPA components and provides common-use implementations such. The ImageRef type has four URL options for content references: _path is the referenced path in AEM. APIs View more on this topic. Rich text with AEM Headless. The use of AEM Preview is optional, based on the desired workflow. We’ll start by looking at nested models. ), executing the persisted GraphQL query. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). We’ll be using the sample Weekend React app that is an AEM headless app, so the majority of the content on this app is powered by content fragments over AEM’s GraphQL APIs. This document provides and overview of the different models and describes the levels of SPA integration. Prior to starting this tutorial ensure the following AEM instances are installed and running on your local machine:Each persisted query has a corresponding function in src/lib//aem-headless-client. Developer. 4+ and AEM 6. The front-end developer has full control over the app. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. Author in-context a portion of a remotely hosted React application. Welcome to the multi-part tutorial for developers looking to augment an existing React-based (or Next. The WKND Site is an Adobe. Hello and welcome to the Adobe Experience Manager headless video series. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Dynamic navigation is implemented using React Router and React Core Components. Adobe Experience Manager as a Cloud Service’s Cross-Origin Resource Sharing (CORS) facilitates non-AEM web properties to. Component mapping enables users to make dynamic updates to. From the AEM Start Screen, tap Content Fragments to open up the Content Fragments UI. Build complex component. Created for: Intermediate. Tap the Title component, and tap the wrench icon to edit the Title component. Learn about the various deployment considerations for AEM Headless apps. The WKND Site is an Adobe Experience Manager sample reference site. This tutorial explores how AEM Content Services can be used to power the experience of an Mobile App that displays Event information (music, performance, art, etc. Select WKND Shared to view the list of existing. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. $ cd aem-guides-wknd-spa. Populates the React Edible components with AEM’s content. ) that is curated by the. Developer. Topics: GraphQL API View more on this topic. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing. $ cd aem-guides-wknd-spa. You have complete control over how the content is displayed on several. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Overview. Created for: Intermediate. AEM offers the flexibility to exploit the advantages of both models in. Last update: 2023-05-17. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. AEM Headless Web Component/JS deployments are pure JavaScript apps that run in a web browser, that consume and interact with content in AEM in a headless manner. 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. Created for: Intermediate. Merging CF Models objects/requests to make single API. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. 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. js. Headless AEM emerges as a modern architectural approach that revolutionizes content management, offering flexibility, scalability, and faster content. Overview 1 - Create Content Fragment Models 2 - Author Content Fragments 3 - Explore the AEM GraphQL API 4 - Persisted GraphQL Queries 5 - Client Application Integration AEM. The latest version of AEM and AEM WCM Core Components is always recommended. 4. The code is not portable or reusable if it contains static references or routing. AEM tutorials. Learn to use the delegation pattern for extending Sling Models. Populates the React Edible components with AEM’s content. This Web Component application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and render a portion of UI, accomplished using pure JavaScript code. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. js implements custom React hooks. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. js) Remote SPAs with editable AEM content using AEM SPA Editor. The GraphiQL tool enables developers to create and test queries against content on the current AEM environment. Understand how the source code for a Single Page Application (SPA) written in React can be integrated with an Adobe Experience Manager (AEM) Project. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. Welcome to this tutorial chapter where we will explore configuring a React app to connect with Adobe Experience Manager (AEM) Headless APIs using the AEM Headless SDK. Learn how to configure AEM hosts in AEM Headless app. Typical AEM as a Cloud Service headless deployment. Created for: Intermediate. // src/lib/aem-headless-client. Cross-origin resource sharing (CORS) Last update: 2023-09-28. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. Last update: 2023-04-21. Hello and welcome to the Adobe Experience Manager Headless Series. Developer. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java objects to power the app. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. env files, stored in the root of the project to define build-specific values. Learn how to define and use Content Fragments in Adobe Experience Manager (AEM) for use with GraphQL. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. There are several options to create a Maven Multi-module project for AEM. AEM Headless applications support integrated authoring preview. AEM Headless as a Cloud Service. Getting Started with the AEM SPA Editor and React. js) Remote SPAs with editable AEM content using AEM SPA Editor. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. js application is invoked from the command line. Multiple requests can be made to collect as many results as required. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the. Prior to starting this tutorial ensure the following AEM instances are installed and running on your local machine: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. Typical AEM as a Cloud Service headless deployment. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. Each function in turn invokes the aemHeadlessClient. Created for: Intermediate. View the source code on GitHub. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. 4. Included in the WKND Mobile AEM Application Content Package below. Repeat the above steps to create a fragment representing Alison Smith:Documentation AEM AEM Tutorials AEM Headless Tutorial Build a complex Image List component - AEM Headless first tutorial. Dynamic routes and editable components. Learn about Headless in Adobe Experience Manager (AEM) with a combination of detailed documentation and headless journeys. 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. Open the Program containing the AEM as a Cloud Service environment to integrate set up the Service Credentials for. In previous releases, a package was needed to install the GraphiQL IDE. In today’s series, we’re going to take a look at modeling basics in Adobe Experience Manager by first looking at the WKND Site. Adobe Experience Manager (AEM) is the leading experience management platform. Clone and run the sample client application. Additional resources can be found on the AEM Headless Developer Portal. js with a fixed, but editable Title component. Explore AEM’s GraphQL capabilities by building out a React App that consumes Content. Dispatcher filters. This video series explains Headless concepts in AEM, which includes-. Rich text with AEM Headless. Set up headless content delivery and management in AEM by Jeremy Lanssiers Overview We set up headless content delivery and headless content management by using AEM’s GraphQL to deliver and Assets API to manage content (via Content Fragments). An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM) as a Cloud Service. Included in the WKND Mobile AEM Application Content Package below. js. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. Topics: GraphQL API View more on this topic. Example server-to. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Learn about headless technologies, why they might be used in your project, and how to create. Browse the following tutorials based on the technology used. com The following Documentation Journeys are available for headless topics. This tutorial uses a simple Node. Cloud Service; AEM SDK; Video Series. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. js implements custom React hooks. Explore tutorials by API, framework and example applications. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. Let’s create some Content Fragment Models for the WKND app. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. Tap Create to bring up the New Content Fragment dialog and enter the following values: Tap Create. In this video, we’ll take a look at advanced content fragment modeling. AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. Developer. Once headless content has been translated,. As AEM offers the (very) best of both worlds, it supports the traditional approach and the headless way. js, that calls the AEM GraphQL end point, and returns the adventure data. AEM GraphQL API requests. An AEM project is required to setup-supporting configuration and content requirements to allow AEM SPA Editor to author a Remote SPA. It’s ideal for getting started with the basics. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Dynamic routes and editable components. AEM Headless GraphQL Video Series. The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. Tutorials. Developer. Documentation AEM AEM Tutorials AEM Headless Tutorial GraphQL Endpoints. The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. Once headless content has been translated, and. Topics: SPA Editor View more on this topic. This tutorial used the latest AEM Project Archetype as a basis for the tutorial code. If you require a basic introduction to creating Content Fragment Models, please see the appropriate chapter in the basic tutorial. AEM WCM Core Components 2. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Documentation AEM AEM Tutorials AEM Headless Tutorial AEM Headless mobile deployments. 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. Author in-context a portion of a remotely hosted React. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Learn. : Guide: Developers new to AEM and headless: 1. View the source code on GitHub. Created for: Intermediate. Install the AEM SDK, add sample content and deploy an application that consumes content from AEM using its GraphQL APIs. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. Documentation AEM AEM Tutorials AEM Headless Tutorial AEM Headless mobile deployments. Content Fragments used in AEM Headless content modeling, often reference image assets intended for display in the headless experience. Modeling data in the real world can be complex. src/api/aemHeadlessClient. A popup will open, click on “ Copy ” to copy the content. runPersistedQuery(. ), executing the persisted GraphQL query.