Anatomy of the React app. Learn how to define and use Content Fragments in Adobe Experience Manager (AEM) for use with GraphQL. AEM Headless as a Cloud Service. Learn about the new headless capabilities with the most recent Content Fragment enhancements. The full code can be found on GitHub. Clone the adobe/aem-guides-wknd-graphql repository: Below is a summary of how the React application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. js in AEM, I need a server other than AEM at this time. Persisted queries are GraphQL queries that are created and stored on the Adobe Experience Manager (AEM) server. 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. Now that you have learned how to access and query your headless content using the AEM GraphQL API you can now learn how to use the REST API to access and. Your First Steps with AEM Headless. TIP. 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 GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. Learn how to use features like Content Models, Content Fragments, and a GraphQL API to power headless content delivery. The content in AEM is managed through Content Framnents and exposed through GraphQL API as a JSON. Support enterprise governance and globalisation needs with a cloud-native architecture that’s always current, providing fast deployment cycles, auto-scaling and a self-healing infrastructure. The React App in this repository is used as part of the tutorial. Ensure you adjust them to align to the requirements of your project. A primary use case for The Adobe Experience Manager as a Cloud Service (AEM) GraphQL API for Content Fragment Delivery is to accept remote queries from third-party applications or services. This guide uses the AEM as a Cloud Service SDK. Determine how to render an embedded reference to another Content Fragment with additional custom properties. Render an in-line image using the absolute path to an AEM Publish environment as the src value. You’ve also created a Content Fragment Model and Content Fragment, and defined a GraphQL endpoint and persisted query. 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. 0+ version supports GraphQL API to expose the Content Fragment to enable the headless content experience. They can be requested with a GET request by client applications. Cloud Service; AEM SDK; Video Series. Headless decouples the front end and back end architecture, allowing developers to work on either independently without affecting the other. js app uses AEM GraphQL persisted queries to query adventure data. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. Image URLs to image assets referenced in Content Fragments, and delivered by AEM. Experience Manager as a Cloud Service is a cloud-native solution that powers content reuse through headless content delivery APIs. In the future, AEM is planning to invest in the AEM GraphQL API. The Create new GraphQL Endpoint dialog will open. AEM Headless SDK for server-side/Node. Update cache-control parameters in persisted queries. Last update: 2023-05-17. Confirm with Create. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. 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 Headless Translation Journey - This documentation journey gives you a broad understanding of headless technology, how AEM. Creating GraphQL Queries. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. js implements custom React hooks. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. Clone the adobe/aem-guides-wknd-graphql repository: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. 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. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. Persisted queries. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. This article describes how to work with large results in AEM Headless to ensure the best performance for your application. A primary use case for The Adobe Experience Manager as a Cloud Service (AEM) GraphQL API for Content Fragment Delivery is to accept remote queries from third-party applications or services. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. Adobe has adopted Adobe Commerce’s GraphQL APIs as its official commerce API for all commerce-related data. GraphQL API View more on this topic. Headless and AEM; Headless Journeys. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. To enable the corresponding endpoint: Navigate to Tools, Assets, then select GraphQL. The full code can be found on GitHub. Learn how to use Content Fragments in Adobe Experience Manager (AEM) as a Cloud Service with the AEM GraphQL API for headless content delivery. Below is a summary of how the Next. Developer. 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 following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment (preferably Development) In this design pattern, the SPA application is completely separated from AEM, and content from AEM is consumed through headless GraphQL APIs as needed. AEM Headless Overview; GraphQL. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. 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 Headless Client for Java is used to execute the GraphQL queries and map data to Java. NOTE. Developer. The GraphQL API in AEM is primarily designed to deliver AEM Content Fragment’s to downstream applications as part of a headless deployment. Looking for a hands-on tutorial? Persisted GraphQL queries. Client type. I checked the Adobe documentation, including the link you provided. Prerequisites. This guide uses the AEM as a Cloud Service SDK. Content Fragments used in AEM Headless content modeling, often reference image assets intended for display in the headless experience. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. This means you can realize. Previous page. 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. 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. Content Fragments used in AEM Headless content modeling, often reference image assets intended for display in the headless experience. Created for: Beginner. Determine how to render an embedded reference to another Content Fragment with additional custom properties. The Angular app is developed and designed to be deployed with AEM’s SPA Editor, which maps Angular components to AEM components. TIP. The AEM GraphQL API allows you to update the default cache-control parameters to your queries in order to. Understand how the Content Fragment Model. The GraphiQL tool enables developers to create and test queries against content on the current AEM environment. Instructor-led training. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. A headless CMS is therefore responsible for the (backend) content management services, together with the mechanisms allowing the (frontend) applications to access. Select Edit from the mode-selector in the top right of the Page Editor. Learn how to use Content Fragments in Adobe Experience Manager (AEM) as a Cloud Service with the AEM GraphQL API for headless content delivery. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. The full code can be found on GitHub. View the. . Understand how the Content Fragment Model drives the GraphQL API. Topics: Content Fragments. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). 1. Get an understanding of headless content delivery and implementation. Persisted queries. AEM Headless SDK for server-side/Node. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Rich text with AEM Headless. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. 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 (JavaScript) AEM Headless SDK for Java™ Persisted GraphQL queries. 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 advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the. Tap Create new technical account button. Sign up Product. The following configurations are examples. The developer performs most of the technical configurations to enable Content Architect and Content Authors to produce headless content. Headless architecture is an approach in which AEM is decoupled from the presentation layer, allowing content to be. View the source code. Persisted queries. When using the AEM React Editable Components with a SPA Editor-based React app, the AEM ModelManager SDK, as the SDK: Retrieves content from AEM. Additional resources can be found on the AEM Headless Developer Portal. Documentation AEM AEM Tutorials AEM Headless Tutorial Creating GraphQL Queries. GraphQL only works with content fragments in AEM. Clone and run the sample client application. You can find it under Tools → General). src/api/aemHeadlessClient. Available for use by all sites. 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. GraphQL, a flexible query language for APIs, provides an efficient and precise way to request specific data from your AEM instance, enabling a seamless integration between React and AEM. Created for: Beginner. When this content is ready, it is replicated to the publish instance. js implements custom React hooks return data from AEM GraphQL to the Teams. Clone and run the sample client application. 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. The response of a GET request can be cached at the Dispatcher and Content Delivery Network (CDN) layers, ultimately. Images are a critical aspect of developing rich, compelling AEM headless experiences. Persisted queries. In AEM, navigate to Tools > Deployment > Packages to access Package Manager. 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. This guide uses the AEM as a Cloud Service SDK. This tutorial will cover the following topics: 1. Content Fragments. 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. Tap the Technical Accounts tab. 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. 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. 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. Following AEM Headless best practices, the iOS application uses AEM GraphQL persisted queries to. Create Content Fragments based on the. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. Sign In. AEM exposes a variety of HTTP endpoints that can be interacted with in a headless manner, from GraphQL, AEM Content Services to Assets HTTP API. allowedpaths specifies the URL path patterns allowed from the specified origins. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM) as a Cloud Service. Documentation AEM AEM Tutorials AEM Headless Tutorial GraphQL Endpoints. The URLs or routes used to preview a Content Fragment must be composable using URL expressions. An end-to-end tutorial illustrating how to build. Developer. AEM Headless SDK for server-side/Node. src/api/aemHeadlessClient. js implements custom React hooks return data from AEM. In the basic tutorial multi-step GraphQL tutorial, you used the GraphiQL Explorer to test and refine the GraphQL queries. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to query adventure. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM). Certification. Ensure you adjust them to align to the requirements of your. Let’s test the new endpoint. This setup establishes a reusable. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Documentation AEM AEM Tutorials AEM Headless Tutorial GraphQL Modeling Basics. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. AEM Headless as a Cloud Service. Use the json return type and include the _references object when constructing a GraphQL query: GraphQL persisted query:Below is a summary of how the iOS application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Get started with Adobe Experience Manager (AEM) and GraphQL. With Adobe Experience Manager (AEM) as a Cloud Service, you can selectively access your Content Fragments, using the AEM GraphQL API, to return only the content that you need. 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. AEM. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. 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. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. json where appname reflects the name of your application. AEM’s GraphQL APIs for Content Fragments. Tap the ellipsis next to the environment in the Environments section, and select Developer Console. Select Create. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. 0. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. Install an AEM package that contains several folders and sample images used to accelerate the tutorial. Render an in-line image using the absolute path to an AEM Publish environment as the src value. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). js (JavaScript) AEM Headless SDK for Java™ Persisted GraphQL queries. 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 means you can realize headless delivery of structured. Prerequisites The following tools should be installed locally: JDK 11 Node. What you need is a way to target specific content, select what you need and return it to your app for further processing. 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. 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. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. The Create new GraphQL Endpoint dialog will open. Below is a summary of how the iOS application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. supports headless CMS scenarios where external client applications render. 2: Content Fragment model, CF creation. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. Content Fragments. Below is a summary of how the iOS application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. AEM Headless Developer Portal; Overview; Quick setup. Persisted queries. The latest version of AEM and AEM WCM Core Components is always recommended. Last update: 2023-05-17. Navigate to Tools > GraphQL Query Editor and choose our endpoint for the drop down in the top-right of the window. 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. Scenario. AEM GraphQL API requests. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. com. Persisted queries. Persisted queries. Using this path you (or your app) can: ; access the GraphQL schema, ; send your GraphQL queries, ; receive the responses (to your GraphQL queries). AEM Headless Overview; GraphQL. They cover many various use cases and frameworks: pure headless, remote editor, AEM SPA Editor, GraphQL, Content Services. A Content author uses the AEM Author service to create, edit, and manage content. 5. Learn how to create relationships between Content Fragment Models in Adobe Experience Manager (AEM) and how to leverage these relationships in GraphQL queries. The ImageRef type has four URL options for content references:Solved: GraphQL API in AEM 6. Authorized requests to AEM GraphQL APIs they typically occur in the context of server-to-server apps, since other app types, such as single-page apps, mobile, or Web Components, typically do use authorization as it is difficult to secure the credentials . Use AEM GraphQL pre-caching. Determine how to render an embedded reference to another Content Fragment with additional custom properties. The response of a GET request can be cached at the Dispatcher and Content Delivery Network (CDN) layers, ultimately improving the performance. 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. The key configuration properties are: alloworigin and/or alloworiginregexp specifies the origins the client connecting to AEM web runs on. 5 service pack but you can reach out to Adobe Support from your organizations account and check if they have any plans. 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. Q: “How is the GraphQL API for AEM different from Query Builder API?” A: “The AEM GraphQL API offers total control on the JSON output, and is an industry standard for querying content. AEM Headless quick setup using the local AEM SDK. Clone the adobe/aem-guides-wknd-graphql repository: Last update: 2023-06-23. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. 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. AEM’s GraphQL APIs for Content Fragments. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. The example code is available on Github. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. 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. Getting Started with AEM Headless - GraphQL. Certification. 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. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. Prerequisites. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Following AEM Headless best practices, the Next. 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 Overview; GraphQL. Using this path you (or your app) can: receive the responses (to your GraphQL queries). An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. js (JavaScript) AEM Headless SDK for Java™ Persisted GraphQL queries. In previous releases, a package was needed to install the GraphiQL IDE. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. The full code can be found on GitHub. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. supports headless CMS scenarios where external client applications render. Overview; 1 - Content modeling; 2 - AEM Headless APIs and. The configuration file must be named like: com. This Android application demonstrates how to query content using the GraphQL APIs of AEM. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. As part of the AEM. 1 - Modeling Basics; 2 - Advanced Modeling; 3 - Creating. In the query editor,. Created for: Beginner. 6% from 2020 to 2027. js (JavaScript) AEM Headless SDK for Java™ Persisted GraphQL queries. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. GraphQL Model type ModelResult: object . Content Fragments used in AEM Headless content modeling, often reference image assets intended for display in the headless experience. Run AEM as a cloud service in local to work with GraphQL query. 5 comes bundled with, which is targeted at working with content fragments exclusively. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. Finally, a hybrid headless CMS, like Sitecore XM Cloud or Adobe Experience Manager, is a combination of both a traditional and a headless CMS. GraphQL Modeling Basics. LearnTap Home and select Edit from the top action bar. . The Create new GraphQL Endpoint dialog box opens. It does not look like Adobe is planning to release it on AEM 6. 4. The full code can be found on GitHub. Following AEM Headless best practices, the Next. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Widgets are a way of creating AEM authoring components. 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. 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 Headless SDK for server-side/Node. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. Content services. Insight Partners forecasted that the headless CMS software market would grow at a CAGR of 22. The full code can be found on GitHub. GraphQL Modeling Basics. src/api/aemHeadlessClient. It provides a middle ground. The AEM GraphQL API is a customized version based on the standard GraphQL API specification, specially configured to allow you to perform (complex) queries on your Content Fragments. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. Anatomy of the React app. Learn about the various data types used to build out the Content Fragment Model. The ImageRef type has four URL options for content references:GraphQL endpoints. React app with AEM Headless View the source code on GitHub A full step by step tutorial describing how this React app was build is available. Author in-context a portion of a remotely hosted React application. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. 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. AEM GraphQL API is. Navigate to Tools > GraphQL. Next, we’ll use the AEM Headless SDK to retrieve Content Fragment data from AEM’s GraphQL APIs. Overview; 1 - Create Content Fragment Models; 2 - Author Content Fragments; 3 - Explore the AEM GraphQL API; 4 - Persisted GraphQL Queries; 5 - Client Application Integration; Headless First Tutorial. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL IDE. Topics: Content Fragments View more on this topic. TIP. Persisted queries. Create a new model. 5 or later; AEM WCM Core Components 2. They allow you to prepare content ready for use in multiple locations/over multiple channels, ideal for headless delivery. 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. Learn about the different data types that can be used to define a schema. This Android application demonstrates how to query content using the GraphQL APIs of AEM. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. Created for: Beginner. js (JavaScript) AEM Headless SDK for Java™ Persisted GraphQL queries. Prerequisites. Cloud Service; AEM SDK; Video Series. Below is a summary of how the iOS application is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Learn how to define and use Content Fragments in Adobe Experience Manager (AEM) for use with GraphQL. Persisted queries. To accelerate the tutorial a starter React JS app is provided. Learn how to enable, execute queries against, and publish and secure. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. This class provides methods to call AEM GraphQL APIs. Locate the Layout Container editable area beneath the Title. In this video you will: Understand the power behind the GraphQL language. 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. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. GraphQL Persisted Queries. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java.