Aem headless graphql guide. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. Aem headless graphql guide

 
 References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the textAem headless graphql guide The GraphiQL tool enables developers to create and test queries against content on the current AEM environment

See AEM GraphQL API for use with Content Fragments for details. The GraphiQL tool enables developers to create and test queries against content on the current AEM environment. GraphiQL is an IDE, included in your AEM environment; it is accessible/visible after you. The configuration file must be named like: com. After the folder is created, select the folder and open its Properties. While client-side GraphQL queries can also be executed using HTTP POST requests, which cannot be cached, persisted. Following AEM Headless best practices, the iOS application uses AEM GraphQL persisted queries to. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. Content Fragments used in AEM Headless content modeling, often reference image assets intended for display in the headless experience. Requests for your content are made using the AEM GraphQL API, a customized implementation of the standard GraphQL API. Learn how to optimize your GraphQL queries when Filtering, Paging, and Sorting your Content Fragments in Adobe Experience Manager as a Cloud Service for headless content delivery. 1. Clone the adobe/aem-guides-wknd-graphql repository:This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Click Create and give the new endpoint a name and choose the newly created configuration. AEM 6. Also known as local groups, these groups can be managed within the AEM author environment. The endpoint is the path used to access GraphQL for AEM. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. Know the prerequisites for using AEM’s headless features. See how AEM powers omni-channel experiences. Navigate to the Software Distribution Portal > AEM as a Cloud Service. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. In this tutorial, we’ll guide you through the process of creating a dynamic and interactive web application by combining the power of React, Adobe Experience Manager (AEM) Headless APIs, and GraphQL. View the source code on GitHub. GraphQL is: ". Manage GraphQL endpoints in AEM. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL IDE. In this tutorial, we’ll guide you through the process of creating a dynamic and interactive web application by combining the power of React, Adobe Experience Manager (AEM) Headless APIs, and GraphQL. SPA Editor learnings. Limited content can be edited within AEM. AEM Headless is a CMS solution from Experience Manager that allows structured content (Content Fragments) in AEM to be consumed by any app over HTTP using GraphQL. This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. Headless and AEM; Headless Journeys. Once headless content has been translated,. The AEM GraphQL API implementation is based on the GraphQL Java libraries. 5 version, I have installed grpahqli-0. The GraphQL API. Ensure you adjust them to align to the requirements of your project. AEM Headless Content Architect Journey Overview; Content Modeling for Headless with AEM - An Introduction; Learn the Content Modeling Basics for Headless with AEM; Learn about Creating Content Fragment Models in AEM; Headless Translation Journey. Once headless content has been translated, and. Tap the ellipsis next to the environment in the Environments section, and select Developer Console. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. React is a popular JavaScript library for building user interfaces, known for its simplicity, reusability, and component-based architecture. IMS Groups are synced with AEM when users login. jar. Headless CMS with AEM: A Complete Guide You might have already heard about Headless CMS and you may be wondering if you should go “all-in” with this new model. In previous releases, a package was needed to install the GraphiQL IDE. 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. Navigate to the Software Distribution Portal > AEM as a Cloud Service. CAUTION. What are GraphQL and Assets REST APIs? Now that you have created some content fragments, you can use AEM’s APIs to. Glad that it worked. js v18; Git; 1. These remote queries may require authenticated API access to secure headless content. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java objects to power the app. If auth param is an array, expected data is ['user', 'pass'] pair, and Basic Authorization will be used. For GraphQL queries with AEM, there are a few extensions: If you require a single result: use the model name; for example, city; If you expect a list of results: add List to the model name; for example, cityList 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. If a non-standard GraphQL endpoint is used on AEM side, the endpoint may contain a full path:. AEM 6. select the Endpoint appropriate to the Sites configuration that you want to use for your queries; directly input new queries; create, and access, Persisted Queries run your queries to immediately see the the results; manage Query Variables; save, and. ; Use GraphQL schema provided by: use the dropdown to select the required site/project. 5. This setup establishes a reusable communication channel between your React app and AEM. AEM 6. Before you begin your own SPA. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Content can be viewed in-context within AEM. Contribute to deepakkhetawat/aem-rockstar-2022 development by creating an account on GitHub. Content Fragment models define the data schema that is. src/api/aemHeadlessClient. 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. Content Fragments for use with the AEM GraphQL API. Let’s test the new endpoint. You will learn how to set up dependencies, design the component structure, retrieve and parse Content Fragments, and make the app editable using the. Developer. What you need is a way to target specific content, select what you need and return it to your app for further processing. Before going to. 1, this account must be created prior to installation of BPA by taking the following steps: Follow the instructions at Creating a new service user to create a. Read the Contributing. SPA application will provide some of the benefits like. Enable the update by setting the following variables for your instance using the Cloud Manager UI: Enables (!=0) or disables (0) triggering of Content Fragment migration job. Rich text with AEM Headless. GraphQL Persisted Queries. Unzip the download and copy the Quickstart jar ( aem-sdk-quickstart-XXX. Prerequisites. AEM Headless as a Cloud Service. Instead, it provides an API for developers to access and retrieve content, which can be displayed on any device or platform. Content models. Content Fragments. x. Caching AEM pages or fragments in the AEM Dispatcher is a best practice for any AEM project. The GraphiQL IDE is available in AEM for you to develop, test, and persist your GraphQL queries, before transferring to your production environment. Developer. TIP. Level 3: Embed and fully enable SPA in AEM. Typical AEM as a Cloud Service headless deployment. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. Access GraphQL from your apps. Allowing for bulk delivery of exactly what is needed for rendering as the response to a single API query. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. AEM GraphQL API provides a powerful query language to expose data of Content Fragments to JavaScript clients in Headless CMS implementations. Level 3: Embed and fully enable SPA in AEM. contributorList is an example of a query type within GraphQL. View the source code. You will learn how to set up dependencies, design the component structure, retrieve and parse Content Fragments, and make the app editable using the. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). GraphQL queries. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Tap the ellipsis next to the environment in the Environments section, and select Developer Console. AEM Headless quick setup using the local AEM SDK. Content Fragments can be used as a basis for GraphQL for AEM queries as: They enable you to design, create, curate and publish. To manage groups in AEM, navigate to Tools > Security > Groups. Multiple requests can be made to collect as many results as required. Author in-context a portion of a remotely hosted React application. 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 Create new GraphQL Endpoint dialog will open. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. Persisted queries. Create Content Fragments based on the. Next. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. js app uses AEM GraphQL persisted queries to query. AEM creates these based. Headless implementation forgoes page and component management, as is traditional in. The SPA retrieves this content via AEM’s GraphQL API. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). js (JavaScript) AEM Headless SDK for. AEM Headless quick setup using the local AEM SDK. Tech Talk with Ritesh. js v18; Git; 1. js + React Server Components + Headless GraphQL API + Universal Editor; Related references (other. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. The configuration file must be named like: com. Name the model Hero and click Create. Content Fragments used in AEM Headless content modeling, often reference image assets intended for display in the headless experience. This plugin will provide the GraphQL API that your frontend application will interact with. AEM Headless clients operating in a production capacity typically interact with AEM Publish, which contains the approved, published content. js implements custom React hooks. Content fragment via asset API (demo) Content fragment via graphql (demo) Some real-time use cases around using content fragments and their approaches. Persisted GraphQL queries help reduce query execution performance by utilizing the Content Delivery Network (CDN). We’ll guide you through configuring your React app to connect to AEM Headless APIs using the AEM Headless SDK. 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. 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 guide uses the AEM as a Cloud Service SDK. 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 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 zip file is an AEM package that can be installed directly. NOTE. 5 the GraphiQL IDE tool must be manually installed. On AEM 6. 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. Additional resources can be found on the AEM Headless Developer Portal. cors. js app uses AEM GraphQL persisted queries to query. Log into AEM and from the main menu select Tools -> General -> Configuration Browser. But the. “The AEM GraphQL API offers total control on the JSON output, and is an industry standard for querying content. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. AEM Headless Overview; GraphQL. Content Fragments are used in AEM to create and manage content for the SPA. Navigate to Tools > GraphQL Query Editor and choose our endpoint for the drop down in the top-right of the window. There are two types of endpoints in AEM: Global Available for use by all sites. Once headless content has been translated,. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. In AEM 6. The GraphiQL tool enables developers to create and test queries against content on the current AEM environment. a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL Persisted Queries. Headless Developer Journey: Explore this guided journey through the powerful and flexible headless features of AEM to prepare for your first headless project. Log into AEM as a Cloud Service and access the GraphiQL interface: You can access the query editor from either: Tools-> General-> GraphQL. AEM Headless tutorials - If you prefer to learn by doing and have existing knowledge of AEM, take our hands-on tutorials organized by API and framework, that explore creating and using applications built on AEM Headless. The following configurations are examples. 5 Developing Guide Headful and Headless in AEM. Traditional CMS uses a “server-side” approach to deliver content to the web. Welcome to the tutorial on building a web experience using React, fully powered by AEM Headless APIs and GraphQL. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. x. Navigate to Tools > GraphQL. granite. js (JavaScript) AEM Headless SDK for. . You can still optimize such GraphQL queries by combining filter expressions on fields of top-level fragments and those on fields of nested fragments with the AND operator. This guide uses the AEM as a Cloud Service SDK. This guide uses the AEM as a Cloud Service SDK. Content Fragments for use with the AEM GraphQL API. Prerequisites. After a user creates a Content Fragment based on the Article model, it can then be interrogated through GraphQL. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. AEM Headless Content Author Journey - Overview; Authoring for Headless with AEM - An Introduction; Authoring Basics for Headless with AEM; Learn about using references in Content Fragments; Learn about defining Metadata and Tagging for Content Fragments; Implementing. GraphQL endpoints. Updating your Content Fragments. Additional resources can be found on the AEM Headless Developer Portal. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. Ensure you adjust them to align to the requirements of your. js (JavaScript) AEM Headless SDK for. NOTE. 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. Create Content Fragments based on. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. Technical implementation guide: Audience Manager with Campaign;. Learn. In the query editor,. This guide describes how to create, manage, publish, and update digital forms. The SPA retrieves this content via AEM’s GraphQL API. A Headless Content Management System (CMS) is: "A headless content management system, or headless CMS, is a back-end only content management system (CMS) built from the ground up as a content repository that makes content accessible via an API for display on any device. These remote queries may require authenticated API access to secure headless content delive AEM Headless quick setup using the local AEM SDK. In AEM, navigate to Tools > Deployment > Packages to access Package Manager. If a filter addresses the fields of a nested fragment, AEM has to fall back to loading (into memory) all fragments that share the underlying model. Next, we’ll use the AEM Headless SDK to retrieve Content Fragment data from AEM’s GraphQL APIs. Tap in the Integrations tab. Enforce (!=0) re-migration of Content Fragments. js v18; Git; 1. In AEM 6. Tap or click the folder that was made by creating your configuration. This endpoint can use all Content Fragment Models from all Sites configurations (defined in the Configuration Browser ). Search for “GraphiQL” (be sure to include the i in GraphiQL ). A primary use case for The Adobe Experience Manager (AEM) GraphQL API for Content Fragment Delivery is to accept remote queries from third-party applications or services. Content Fragments can be used as a basis for GraphQL for AEM queries as: They enable you to design, create, curate and publish. 10. In order to support other 3rd-party "non-Adobe" commerce platforms, this project implements an example "reference" implementation that demonstrates how a 3rd-party commerce platform can be integrated with the CIF GraphQL connector and the AEM CIF Core Components via the Magento GraphQL API. Creating GraphQL Queries. GraphQL is: “…a query language for APIs and a runtime for fulfilling those queries with your existing data. The following tools should be installed locally:Yes, AEM provides OOTB Graphql API support for Content Fragments only. Learn how to use Adobe Experience Manager (AEM) as a Headless CMS (Content Management System), with features such as Content Fragment. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. Guide: Developers new to AEM and headless: 1 hour: Headless Setup: For experienced AEM users who need a short summary of the key AEM. Available for use by all sites. Next. x. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. Navigate to Tools > GraphQL Query Editor and choose our endpoint for the drop down in the top-right of the window. Topics: Content Fragments. This setup establishes a reusable communication channel between your React app and AEM. When authorizing requests to AEM as a Cloud Service, use. 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. 4 version but now i am unable to start GraphQL, anyone can guide me next, what is missing or what I should do now ? Rizwan 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. Getting Started with the AEM SPA Editor and React. 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 Developer Journey. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Clone and run the sample client application. API Reference. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. GraphQL Persisted Queries. The easiest way to manage group membership is to use Adobe Identity Management System (IMS) groups and assign IMS groups to local AEM groups. 5 and Headless. The GraphiQL tool enables developers to create and test queries against content on the current AEM environment. Navigate to Tools > GraphQL. This session will focus on the GraphQL API for Adobe Experience. The AEM project is bootstrapped with a very simple starting point for the Angular SPA. The project used in this chapter will serve as the basis for an implementation of the WKND SPA and is built upon in future chapters. Developer. Learning to use GraphQL with AEM - Sample Content and QueriesThe GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. GraphQL endpoints. Clients interacting with AEM Author need to take special care, as AEM Author is secure by default, requiring authorization for all requests, and may also contain work in progress, or unapproved. Content can be viewed in-context within AEM. Documentation AEM 6. Move faster with powerful developer tools. A name will be automatically generated based on the title and adjusted according to AEM naming conventions. Next, we’ll use the AEM Headless SDK to retrieve Content Fragment data from AEM’s GraphQL APIs. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. See: Persisted GraphQL queries. . 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. Log into AEM and from the main menu select Tools -> Assets -> Content Fragment Models. In the query editor, create a few different. The basic operation of queries with GraphQL for AEM adhere to the standard GraphQL specification. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. To address this problem I have implemented a custom solution. Brightspot, our API based CMS and DAM has developer tools for writing. Prerequisites. Using the GraphiQL IDE in AEM | Adobe Experience Manager Documentation AEM 6. Returns a Promise. AEM creates these based. This class provides methods to call AEM GraphQL APIs. View. The full code can be found on GitHub. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. Now that you have created some content fragments, you can use AEM’s APIs to deliver them headlessly. Don't miss out! Register nowThe 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. May 22, 2023GraphQL efficiently retrieves data from AEM, and we’ll set up and configure endpoints to expose desired data. Welcome to the tutorial on building a web experience using React, fully powered by AEM Headless APIs and GraphQL. Clients can send an HTTP GET request with the query name to execute it. This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. Navigate to Tools > GraphQL. 5 has enhanced its digital customer experience services by providing better content personalization, content fragment enhancements, and easier authoring. 5 Developing Guide Using the GraphiQL IDE Last update: 2023-11-07 Topics:. AEM’s GraphQL APIs for Content Fragments. ; For both points 1 and 2 above, you need to create an index definition as part of your custom code. impl. @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. Topics: Developing View more on this topic. The benefit of this approach is cacheability. AEM hosts;. The Content author and other internal users can. This feature is core to the AEM Dispatcher caching strategy. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Persisted queries. Headless Developer Journey. Rich text with AEM Headless. The diagram above depicts this common deployment pattern. Time; Headless Developer Journey: For users new to AEM and headless technologies, start here for a comprehensive introduction to AEM and its headless features from the theory of headless through going live with your first headless project. We'll guide you through optimizing your AEM projects, measure external service impact, Create customized views and Gain insights, boost performance, and enhance issue resolution. 0 versions enable the GraphQL runtime platform to expose the Content Fragments through GraphQL API. Understand how the Content Fragment Model. GraphQL API. GraphQL API. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. Content Fragments for use with the AEM GraphQL API. Brightspot, our API based CMS and DAM has developer tools for writing. js v18; Git; 1. 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. You’ll learn how to set. For developers new to AEM and headless technologies, start here for a comprehensive introduction to AEM and its headless features from the theory of headless through going live with your first headless project. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Created for: Beginner. This document is designed to be viewed using the frames feature. Navigate to Tools > GraphQL Query Editor and choose our endpoint for the drop down in the top-right of the window. Let’s test the new endpoint. Products such as Contentful, Prismic and others are leaders in this space. Looking for a hands-on. Organize and structure content for your site or app. : Guide: Developers new to AEM and headless: 1. Prerequisites. 0:00 / 5:23. See AEM GraphQL API for use with Content Fragments for details. The tagged content node’s NodeType must include the cq:Taggable mixin. AEM Headless APIs allow accessing AEM content from. 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 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. Understand headless translation in AEM; Get started with AEM headless translation AEM Headless first tutorial. ” Source This is a very good sign and we are excited what the future will bring for AEM Headless with GraphQL. Manage GraphQL endpoints in AEM. GraphQL endpoints. 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. Last update: 2023-05-17. AEM 6. The following tools should be installed locally: JDK 11; Node. A Content author uses the AEM Author service to create, edit, and manage content. In this video you will: Understand the power behind the GraphQL language. In this part of the AEM Headless Developer Journey, you will understand the steps to implementing your first headless experience in AEM including planning considerations and also learn best practices to make your path as smooth as possible. cfg. 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. 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. Throughout this tutorial, we will guide you through building the Image List component, handling nested references, rendering referenced image assets, and integrating the Universal Editor. This setup establishes a reusable communication channel between your React app and AEM. 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. GraphQL API. Search for “WPGraphQL”, then click “Install Now” and “Activate”. AEM Headless first tutorial. For AEM SPA Editor to integrate a SPA into it’s authoring context, a few additions must be made 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 sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. Select Full Stack Code option. The DAM Users is an out of the box group in AEM that can be used for “everyday” users that manage digital. json where appname reflects the name of your application. adobe. 5 Developing Guide Updating your Content Fragments for Optimized GraphQL Filtering Updating your Content Fragments for optimized GraphQL Filtering Last update: 2023-10-02Below is a summary of how the Next. For a third-party service to connect with an AEM instance it must have an. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. Learn how to use Content Fragments in Adobe Experience Manager (AEM) as a Cloud Service with the AEM GraphQL API. AEM has been adding support for headless delivery for a while,. How to Use. 10. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. 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. Creating GraphQL Queries. Index definitions can be categorized into three primary use cases, as follows: Add a new custom index definition. ; Remove an index definition that is no longer necessary. This guide uses the AEM as a Cloud Service SDK.