AEM Headless Overview; GraphQL. 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. Author in-context a portion of a remotely hosted React application. Creating GraphQL Queries. AEM Headless Overview; GraphQL. src/api/aemHeadlessClient. 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:. Download Advanced-GraphQL-Tutorial-Starter-Package-1. We’ll guide you through configuring your React app to connect to AEM Headless APIs using the AEM Headless SDK. 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 implements custom React hooks return data from AEM. The full code can be found on GitHub. Select Create. What is GraphQL GraphQL is a query and manipulation language for APIs. . In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. Scenario. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. The following configurations are examples. Hi All, I am using AEM6. Create Pages from Experience Manager’s out-of-the-box foundational components and templates. Understand how the Content Fragment Model. GraphQL API. GraphQL Modeling Basics. Developer. The key configuration properties are: alloworigin and/or alloworiginregexp specifies the origins the client connecting to AEM web runs on. Get a free trial. Learn how AEM automatically generates a GraphQL schema based on a Content Fragment model. Install the @adobe/aem-headless-client-js by running the npm install command from the root of your React project. View next: Learn. Clone the adobe/aem-guides-wknd-graphql repository:Last update: 2023-06-23. 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. Looking for a hands-on. Developer. JS —. Recommendation. Learn how to use features like Content Models, Content Fragments, and a GraphQL API to power headless content delivery. The following tools should be installed locally: JDK 11;. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). ) that is curated by the. 5. 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. Checkout Getting Started with AEM Headless - GraphQL. This iOS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. It does not look like Adobe is planning to release it on AEM 6. This guide uses the AEM as a Cloud Service SDK. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. 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. 5 the GraphiQL IDE tool must be manually installed. js (JavaScript) AEM Headless SDK for Java™ Persisted GraphQL queries. Following AEM Headless best practices, the iOS application uses AEM GraphQL persisted queries to. Multiple variables are. AEM Headless SDK for server-side/Node. The following are examples of possible approaches for constructing URLs for AEM GraphQL API and image requests, for several popular headless frameworks and platforms. By leveraging AEM Headless APIs, you can retrieve content, assets, and data from your AEM instance and use them to power your React application. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. Learn to use GraphQL with AEM so you can serve content headlessly by exploring sample content and queries. The GraphQL API in AEM is primarily designed to deliver AEM Content Fragment’s to downstream applications as part of a headless deployment. 0+ version supports GraphQL API to expose the Content Fragment to enable the headless content experience. Prerequisites. 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. Developer. Determine how to render an embedded reference to another Content Fragment with additional custom properties. Resources and integrations. Cloud Service; AEM SDK; Video Series. Persisted queries. Cloud Service; AEM SDK; Video Series. Experience Manager as a Cloud Service is a cloud-native solution that powers content reuse through headless content delivery APIs. Sign In. In the query editor,. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. Navigate to Tools > GraphQL. Developer. Update cache-control parameters in persisted queries. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. adobe. Explore AEM's GraphQL APIs using the built-in GrapiQL IDE. The HTTP GET requests from the headless app to AEM’s GraphQL APIs must be configured to interact with the correct AEM service, as. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. The ImageRef type has four URL options for content references:GraphQL endpoints. AEM Headless as a Cloud Service. Render an in-line image using the absolute path to an AEM Publish environment as the src value. Use the json return type and include the _references object when constructing a GraphQL query: GraphQL persisted query:Anatomy of the React app. There are four scenarios for your business model after Adobe AEM Magento integration: Headless eCommerce AEM with Magento deployment models. js app uses AEM GraphQL persisted queries to query adventure data. GraphQL Modeling Basics. 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. 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 (JavaScript) AEM Headless SDK for Java™ Persisted GraphQL queries. 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. It does not look like Adobe is planning to release it on AEM 6. Developer. The completed SPA, deployed to AEM, can be dynamically authored with traditional in. Learn about the different data types that can be used to define a schema. The full code can be found on GitHub. Author in-context a portion of a remotely hosted React application. AEM Headless - makes it possible to scale content almost without losing the personality of your brand. Created for: Beginner. This means you can realize headless delivery of structured. 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. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. In this video you will: Understand the power behind the GraphQL language. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. Last update: 2023-05-17. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. 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. Open the model in editor. Topics: Content Fragments View more on this topic. AEM GraphQL API requests. The example code is available on Github. This Android application demonstrates how to query content using the GraphQL APIs of AEM. Nov 7, 2022. Here you can specify: Name: name of the endpoint; you can enter any text. *. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Using the GraphQL API in AEM enables the efficient. 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. AEM Headless SDK for server-side/Node. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). . Persisted GraphQL queries help reduce query execution performance by utilizing the Content Delivery Network (CDN). An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM) as a Cloud Service. Persisted queries. Documentation AEM AEM Tutorials AEM Headless Tutorial Creating GraphQL Queries. A headless CMS is therefore responsible for the (backend) content management services, together with the mechanisms allowing the (frontend) applications to access. React is a popular JavaScript library for building user interfaces, known for its simplicity, reusability, and component-based architecture. Following AEM Headless best practices, the iOS application uses AEM GraphQL persisted queries to. Prerequisites. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM) as a Cloud Service. 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. Developer. Persisted queries. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Anatomy of the React app. This Android application demonstrates how to query content using the GraphQL APIs of AEM. Nov 7, 2022. Review existing models and create a model. Learn more about developing your. Adobe first introduced its headless capabilities in. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. Certification. Persisted queries are queries that are stored on the Adobe Experience Manager (AEM) server. The GraphQL API in AEM allows you to expose Content Fragment data to downstream applications. js app uses AEM GraphQL persisted queries to query. Headless Development for AEM Sites as a Cloud Service by Adobe Abstract Learn how AEM as a Cloud Service’s powerful headless capabilities like Content Models, Content Fragments, and the GraphQL API work together to enable you to manage your experiences centrally and serve them across channels. The complete code can be found on GitHub . 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. AEM Headless as a Cloud Service. The GraphQL API in AEM is primarily designed to deliver AEM Content Fragment’s to downstream applications as part of a headless deployment. TIP. js (JavaScript) AEM Headless SDK for Java™ Persisted GraphQL queries. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java objects to power the app. AEM Headless Overview; GraphQL. With a rise in user base on online. Topics: Content Fragments View more on this topic. All Learning. Solved: I've been currently looking at the GraphQL API. GraphQL Endpoints. 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. This Android application demonstrates how to query content using the GraphQL APIs of AEM. GraphQL API. 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. impl. 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. Using this path you (or your app) can: receive the responses (to your GraphQL queries). To accelerate the tutorial a starter React JS app is provided. Looking for a hands-on tutorial? Tutorials by framework. - I would like to learn about the differences, advantages and disadvantages of all these possible options at a general level, in order to have an overview of them. Client type. 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. View the source code on GitHub. Learn how to enable, execute queries against, and publish and secure. Looking for a hands-on. The full code can be found on GitHub. Following AEM Headless best practices, the iOS application uses AEM GraphQL persisted queries to query adventure data. AEM as a Cloud Service GraphQL API used with Content Fragments is heavily based on the standard, open source GraphQL API. Navigate to Tools > GraphQL Query Editor and choose our endpoint for the drop down in the top-right of the window. Learn. Following AEM Headless best practices, the iOS 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. The diagram above depicts this common deployment pattern. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Tutorials. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Render an in-line image using the absolute path to an AEM Publish environment as the src value. Persisted queries. Prerequisites. Anatomy of the React app. Content Fragments used in AEM Headless content modeling, often reference image assets intended for display in the headless experience. Manage GraphQL endpoints in AEM {#graphql-aem-endpoint} . Persisted queries. Persisted Queries and. Render an in-line image using the absolute path to an AEM Publish environment as the src value. In this model, content is created in AEM, but styling it, presenting it, and delivering it all happen on another platform. 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. Learn how to use Content Fragments in Adobe Experience Manager (AEM) as a Cloud Service with the AEM GraphQL API for headless content delivery. Adobe has adopted Adobe Commerce’s GraphQL APIs as its official commerce API for all commerce-related data. Last update: 2023-05-17. Persisted queries. 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. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. In a headless model, the content is managed in the AEM repository, but delivered via APIs such as REST and GraphQL to another system to render the content for the user experience. 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. AEM Headless as a Cloud Service. 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. Headless implementations enable delivery of experiences across platforms and channels at scale. Topics: Content Fragments View more on this topic. Use the json return type and include the _references object when constructing a GraphQL query: GraphQL persisted query:Render an in-line image using the absolute path to an AEM Publish environment as the src value. Created for: Intermediate. The Create new GraphQL Endpoint dialog will open. Search Results. AEM’s GraphQL queries can be written to. AEM GraphQL API is. Courses. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. AEM Headless GraphQL Video Series AEM Headless GraphQL Hands-on Tutorial Explore AEM’s GraphQL capabilities by building out a React App that. Determine how to render an embedded reference to another Content Fragment with additional custom properties. 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. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. 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. Courses. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. Use the json return type and include the _references object when constructing a GraphQL query: GraphQL persisted query:AEM Headless as a Cloud Service. Let’s explore the WKND App, a simple React application that displays adventures from AEM using AEM Headless GraphQL APIs. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. AEM Content Fragments work together with the AEM GraphQL API (a customized implementation, based on standard GraphQL. Persisted queries. Persisted queries are GraphQL queries that are created and stored on the Adobe Experience Manager (AEM) server. 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 this video you will: Understand the power behind the GraphQL language. Client applications request persisted queries with GET requests for fast edge-enabled execution. The AEM GraphQL API allows you to update the default cache-control parameters to your queries in order to. The developer performs most of the technical configurations to enable Content Architect and Content Authors to produce headless content. Persisted queries. 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. On this page. The ImageRef type has four URL options for content references:Solved: GraphQL API in AEM 6. Search for “GraphiQL” (be sure to include the i in GraphiQL ). AEM as a Cloud Service and AEM 6. Search Results. GraphQL Persisted Queries. Additional resources can be found on the AEM Headless Developer Portal. At the. Documentation AEM AEM Tutorials AEM Headless Tutorial GraphQL Endpoints. The CORS configuration must specify a trusted website origin alloworigin or alloworiginregexp for which access must be granted. Checkout Getting Started with AEM Headless - GraphQL. This Android application demonstrates how to query content using the GraphQL APIs of AEM. ” Tutorial - Getting Started with AEM Headless and GraphQL. 924. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL IDE. 3: Any Java implementation is required? 4: Run mode specific config changes, Dispatcher. js implements custom React hooks. Previous page. 6% from 2020 to 2027. An end-to-end tutorial illustrating how to build. The full code can be found on GitHub. Wrap the React app with an initialized ModelManager, and render the React app. json where appname reflects the name of your application. Render an in-line image using the absolute path to an AEM Publish environment as the src value. js implements custom React hooks. 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. The response of a GET request can be cached at the Dispatcher and Content Delivery Network (CDN) layers, ultimately improving the performance. 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. 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. Created for: Beginner. We use the WKND project at. 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. Use the json return type and include the _references object when constructing a GraphQL query: GraphQL persisted query:Navigate to Tools, General, then select GraphQL. GraphQL only works with content fragments in AEM. TIP. 5 service pack but you can reach out to Adobe Support from your organizations account and check if they have any plans. Creating GraphQL Queries. 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. 5 - Adobe Experience League Community - 402753. Below is a summary of how the Next. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. 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. Determine how to render an embedded reference to another Content Fragment with additional custom properties. Once headless content has been translated, and. Populates the React Edible components with AEM’s content. Headless decouples the front end and back end architecture, allowing developers to work on either independently without affecting the other. Prerequisites. 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. Determine how to render an embedded reference to another Content Fragment with additional custom properties. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. AEM Headless APIs allow accessing AEM content. AEM Headless quick setup using the local AEM SDK. 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. Experiment constructing basic queries using the GraphQL syntax. 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. Clone and run the sample client application. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. Get an understanding of headless content delivery and implementation. 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. Content Fragments used in AEM Headless content modeling, often reference image assets intended for display in the headless experience. You can pass the parameters like this . This guide uses the AEM as a Cloud Service SDK. 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. 5 version, I have installed grpahqli-0. In previous releases, a package was needed to install the. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). 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. Anatomy of the React app. Cloud Service; AEM SDK; Video Series. js (JavaScript) AEM Headless SDK for Java™. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the. Developer. Persisted queries. Anatomy of the React app. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. PrerequisitesBelow 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. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. To enable the corresponding endpoint: Navigate to Tools, Assets, then select GraphQL. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. This capability allows AEM to further cache content within the scope of GraphQL queries that can then be assembled as blocks in JSON output rather than line by line. Determine how to render an embedded reference to another Content Fragment with additional custom properties. The endpoint is the path used to access GraphQL for AEM. 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. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). The Content author and other. 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. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. 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. Persisted queries are queries that are stored on the Adobe Experience Manager (AEM) server. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. AEM Headless SDK for server-side/Node. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. Looking for a hands-on tutorial? Persisted GraphQL queries. In previous releases, a package. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. Content Fragments used in AEM Headless content modeling, often reference image assets intended for display in the headless experience. GraphQL plays important role in supporting a headless architecture in AEM. Developer. AEM 6. They cover many various use cases and frameworks: pure headless, remote editor, AEM SPA Editor, GraphQL, Content Services. 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. 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. Your First Steps with AEM Headless. Persisted queries are GraphQL queries that are created and stored on the Adobe Experience Manager (AEM) server. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. The AEM Headless SDK is set of libraries that can. GraphQL Persisted Queries. Next, we’ll use the AEM Headless SDK to retrieve Content Fragment data from AEM’s GraphQL APIs. Persisted queries. 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. The following tools should be installed locally: JDK 11;. Documentation AEM AEM Tutorials AEM Headless Tutorial GraphQL Modeling Basics. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. This pattern can be used in any SPA and Widget approach but does make AEM more developer-focused. The full code can be found on GitHub. Last update: 2023-05-17. 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. Use the json return type and include the _references object when constructing a GraphQL query: GraphQL persisted query: AEM Headless as a Cloud Service. com. Cloud Service; AEM SDK; Video Series. 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.