) to render content from AEM Headless. Navigate to Tools > GraphQL Query Editor and choose our endpoint for the drop down in the top-right of the window. a query language for APIs and a runtime for fulfilling those queries with your existing data. 5 comes bundled with, which is targeted at working with content fragments exclusively. Understand Headless in AEM; Learn about CMS Headless Development; Getting Started with AEM Headless as a Cloud Service; Path to your first experience using AEM Headless; How. Creating GraphQL Queries. js v18; Git; 1. Install the AEM SDK, add sample content and deploy an application that consumes content from AEM using its GraphQL APIs. 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. GraphiQL is an IDE, included in your AEM environment; it is accessible/visible after you configure your endpoints. You are now ready to move on to the next tutorial chapter, where you will learn how to create an AEM Headless React application that consumes the Content Fragments and GraphQL endpoint you created in this chapter. Getting Started with the AEM SPA Editor and React. For an end-to-end example of building your own single-page application that is editable with AEM starting with project setup through application routing, see the WKND SPA Tutorials: Getting Started with the AEM SPA Editor and Angular. 0 versions enable the GraphQL runtime platform to expose the Content Fragments through GraphQL API. Navigate to Tools > GraphQL. The GraphiQL tool lets you test and debug your GraphQL queries by enabling you to:. Contribute to adobe/aem-headless-client-java development by creating an account on GitHub. Manage GraphQL endpoints in AEM. Learn about the various data types used to build out the Content Fragment Model. Headless architecture is an approach in which AEM is decoupled from the presentation layer, allowing content to be. 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. Headless, a new trend? 2 Headless capabilities in AEM. Caching of persisted queries is not enabled by default in the Dispatcher. With Adobe Experience Manager (AEM) as a Cloud Service, Content Fragments lets you design, create, curate, and publish page-independent content. 0+ version supports GraphQL API to expose the Content Fragment to enable the headless content experience. The AEM Publish tier is operated as a farm of AEM publish instances, each with their own content repository of published content. Content Fragments for use with the AEM GraphQL API. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Ensure you adjust them to align to the requirements of your. Documentation AEM AEM Tutorials AEM Headless Tutorial Creating GraphQL Queries. Search for “GraphiQL” (be sure to include the i in GraphiQL). Download the latest GraphiQL Content Package v. 5 the GraphiQL IDE tool must be manually installed. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. Sign In. 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. Provide a Model Title, Tags, and Description. x. The GraphQL API {#graphql-api} . Till now, not used GraphQL API in actual AEM application. In this chapter, you use the GraphiQL Explorer to define more advanced queries to gather data of the Content. . Supply the web shop with limited content from AEM via GraphQL. 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. 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. Resource Description Type Audience Est. These remote queries may require authenticated API access to secure headless content delivery. These are sample apps and templates based on various frontend frameworks (e. Embed the web. Start using @adobe/aem-headless-client-nodejs in your project by running `npm i @adobe/aem-headless-client-nodejs`. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. . Typical AEM as a Cloud Service headless deployment. @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. Level 3: Embed and fully enable SPA in AEM. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. Often, these headless consumers may need to authenticate to AEM in order to access protected content or actions. GraphQL Persisted Queries. You’ve also created a Content Fragment Model and Content Fragment, and defined a GraphQL endpoint and persisted query. The following tools should be installed locally: JDK 11; Node. But the. Learn how to bootstrap the SPA for AEM SPA Editor. Abstract. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. In this video you will: Learn how to use Content Fragments references to link one or more Content Fragments. For server-to-server authentication, you can use Service Credentials of AEM (Access tokens). Hello All, I am new to GraphQL features of AEM. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. Click into the new folder and create a teaser. For creating one please follow the steps below: Go to Tools → Assets → Content fragments models (If you don’t have Content Fragments Models here then that means your instance is not cloud sdk. This tutorial will cover the following topics: 1. Content Fragments architecture. Content can be created by authors in AEM, but only seen via the web shop SPA. This guide describes how to create, manage, publish, and update digital forms. In terms of. Allowing for bulk delivery of exactly what is needed for rendering as the response to a single API query. Content Models serve as a basis for Content. Limited content can be edited within AEM. Learn about the new headless capabilities with the most recent Content Fragment enhancements. Author in-context a portion of a remotely hosted React application. Last update: 2023-08-16. 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. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. Contributing. 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. Click Create and give the new endpoint a name and choose the newly created configuration. 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. Installing on AEM 6. AEM Headless Developer Portal; Overview; Quick setup. 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. GraphQL API. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. 5'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. Navigate to Tools > GraphQL Query Editor and choose our endpoint for the drop down in the top-right of the window. Client applications request persisted queries with GET requests for fast edge-enabled execution. Persisted queries are queries that are stored on the Adobe Experience Manager (AEM) server. The GraphQL API lets you create requests to access and deliver Content Fragments. The full code can be found on GitHub. Latest version: 1. Supply the web shop with limited content from AEM via GraphQL. Last update: 2023-05-17. Click Create and give the new endpoint a name and choose the newly created configuration. This guide uses the AEM as a Cloud Service SDK. The endpoint is the path used to access GraphQL for AEM. The full code can be found on GitHub. 5 Developing Guide Using the GraphiQL IDE Last update: 2023-11-07 Topics:. Content Fragments for use with the AEM GraphQL API. Level 3: Embed and fully enable SPA in AEM. cfg. Topics: Content Fragments View more on this topic. GraphQL has a robust type system. The ImageRef type has four URL options for content references:AEM Guides WKND - GraphQL - This GitHub project includes example applications that highlight AEM’s GraphQL APIs. 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. 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. . If you see this message, you are using a non-frame-capable web client. js app uses AEM GraphQL persisted queries to query. Further Reference. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. The Create new GraphQL Endpoint dialog will open. AEM Headless quick setup using the local AEM SDK. g. The multi-line text field is a data type of Content Fragments that enables authors to create rich text content. The GraphiQL IDE is available in AEM for you to develop, test, and persist your GraphQL queries, before transferring to your production environment. Welcome to the tutorial on building a web experience using React, fully powered by AEM Headless APIs and GraphQL. js (JavaScript) AEM Headless SDK for Java™. An end-to-end tutorial illustrating how to build-out and expose content using AEM's GraphQL APIs and consumed by an external app, in a headless CMS scenario. Next. To manage permissions of groups in AEM, navigate to Tools > Security > Permissions. 0, last published: 2 years ago. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. CAUTION. The ImageRef type has four URL options for content references:This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. AEM Headless supports a offset/limit and cursor-based pagination queries to smaller subsets of a larger result set. Prerequisites Welcome to the tutorial on building a web experience using React, fully powered by AEM Headless APIs and GraphQL. 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 setup establishes a reusable communication channel between your React app and AEM. Rich text with AEM Headless. 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. The benefit of this approach is cacheability. Let’s test the new endpoint. Set up folder policies to limit what Content Fragment Models can be included. The full code can be found on GitHub. Tech Talk with Ritesh. 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. Learn to use GraphQL with AEM so you can serve content headlessly by exploring sample content and queries. GraphQL for AEM - Summary of Extensions. AEM Headless Overview; GraphQL. Rich text with AEM Headless. The following configurations are examples. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. The response of a GET request can be cached at the Dispatcher and Content Delivery Network (CDN) layers, ultimately. See AEM GraphQL API for use with Content Fragments for details. If caching in the Dispatcher is enabled then the CORS Filter is not needed, and so that section can be ignored. Experience League. AEM Headless first tutorial. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Content Fragments are used in AEM to create and manage content for the SPA. React is a popular JavaScript library for building user interfaces, known for its simplicity, reusability, and component-based architecture. js v18; Git; 1. 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. 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. Further information More information on. Overview; 1 - Content modeling; 2 - AEM Headless APIs and. GraphQL API. : Guide: Developers new to AEM and headless: 1. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. Enter the preview URL for the Content Fragment. Content Fragments for use with the AEM GraphQL API. Prerequisites. Virtual Event - AEM GEMs feature two of our customers presenting a technical deep dive session on the usage of AEM as Headless. 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. GraphQL endpoints. If a non-standard GraphQL endpoint is used on AEM side, the endpoint may contain a full path:. 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. To install WPGraphQL, navigate to your WordPress dashboard, then go to Plugins > Add New. This setup establishes a reusable communication channel between your React app and AEM. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. In previous releases, a package was needed to install the. I am using AEM as a Cloud Service and have created a component in which the data is rendered through the Content Fragments. A single-page application is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the webserver, instead of the default method of a web browser loading entire new pages. This endpoint can use all Content Fragment Models from all Sites configurations (defined in the Configuration Browser ). In previous releases, a package was needed to install the GraphiQL IDE. Content Fragments used in AEM Headless content modeling, often reference image assets intended for display in the headless experience. AEM Headless as a Cloud Service. AEM Headless APIs allow accessing AEM content from. Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. All leading CMS products such as Drupal, WordPress, AEM and Sitecore, Kentico and others can also work in a “headless” mode. Technical implementation guide: Audience Manager with Campaign;. AEM 6. 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. Headless implementations enable delivery of experiences across platforms and channels at scale. CORSPolicyImpl~appname-graphql. GraphiQL is an IDE, included in your AEM environment; it is accessible/visible after you. We’ll guide you through configuring your React app to connect to 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. The GraphiQL tool enables developers to create and test queries against content on the current AEM environment. View the source code on GitHub. AEM’s GraphQL queries can be written to provide URLs to images based on where the image is referenced from. These remote queries may require authenticated API access to secure headless content delive AEM Headless quick setup using the local AEM SDK. In the query editor, create a few different. 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. js v18; Git; 1. In this part of the AEM Headless Developer Journey, you can learn how to use GraphQL queries to access the content of your Content Fragments and feed it to your app (headless delivery). AEM Headless Translation Journey - This documentation journey gives you a broad understanding of headless. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Headful and Headless in AEM; Headless Experience Management. Level 3: Embed and fully enable SPA in AEM. Last update: 2023-05-17. GraphQL is: ". 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. Brightspot, our API based CMS and DAM has developer tools for writing. Let’s test the new endpoint. The other fields were added automatically by AEM, and represent helpful methods to provide information about a certain Content Fragment; in this example, (the helper fields) _path, _metadata, _variations. The 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 AEM GraphQL API implementation is based on the GraphQL Java libraries. A name will be automatically generated based on the title and adjusted according to AEM naming conventions. 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 6. Anatomy of the React app. Navigate to Tools, General, then select GraphQL. jar. Some content is managed in AEM and some in an external system. com 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. Prerequisites. 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. Once headless content has been translated,. The AEM GraphQL API implementation is based on the GraphQL Java libraries. AEM creates these based. Cloud Service; AEM SDK; Video Series. Following AEM Headless best practices, the Next. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java objects to power the app. . Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). js, SvelteKit, etc. Select aem-headless-quick-setup-wknd in the Repository select box. Know the prerequisites for using AEM’s headless features. Upload and install the package (zip file) downloaded in the previous step. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. There are many ways by which we can implement headless CMS via AEM. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. That is, they can expose their content via REST APIs and other means, and we don’t have to do templating within the CMS itself. The SPA retrieves this content via AEM’s GraphQL API. GraphQL API. Select Create. The Single-line text field is another data type of Content. js (JavaScript) AEM Headless SDK for. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) 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). Understand Headless in AEM; Learn about CMS Headless Development; Getting Started with AEM Headless as a Cloud Service; Path to your first experience using AEM Headless; How. GraphQL API. : Guide: Developers new to AEM and headless: 1. Headless CMS. This session will focus on the GraphQL API for Adobe Experience. AEM hosts;. Authorization. ; For both points 1 and 2 above, you need to create an index definition as part of your custom code. 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. This guide uses the AEM as a Cloud Service SDK. 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. Once headless content has been translated,. Content can be created by authors in AEM, but only seen via the web shop SPA. 5. The Single-line text field is another data type of Content Fragments. 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. GraphQL for AEM - Summary of Extensions. 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. Documentation AEM as a Cloud Service User Guide Learning to use GraphQL with AEM - Sample Content and Queries. In this chapter of Advanced concepts of Adobe Experience Manager (AEM) Headless, learn to work with tabs, date and time, JSON objects, and fragment references in Content Fragments. how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. AEM GraphQL API requests. The AEM Headless quick setup gets you hands-on with AEM Headless using content from the WKND Site sample project, and a sample React App (a SPA) that consumes the content over AEM Headless GraphQL APIs. 5 and Headless. The Story So Far. The GraphQL API. Persisted queries are GraphQL queries that are created and stored on the Adobe Experience Manager (AEM) server. Using a REST API. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. PrerequisitesAdobe 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. These are defined by information architects in the AEM Content Fragment Model editor. GraphQL API. For example, to grant access to the. 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. GraphQL API. Multiple requests can be made to collect as many results as required. Tap or click Create. Content models. Browse the following tutorials based on the technology used. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. GraphiQL is included in all environments of AEM (but will only be accessible/visible when you configure your endpoints). Glad that it worked. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. 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. The AEM GraphQL API allows you to update the default cache-control parameters to your queries in order to. Last update: 2023-06-23. See AEM GraphQL API for use with Content Fragments for details. This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. They often represent a large amount of the processing that occurs in an AEM environment, so when custom workflow steps are not written according to best practices, or out-of-the-box workflows are not configured to run. Access GraphQL from your apps. 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. The full code can be found on GitHub. js. They can also be used together with Multi-Site Management to. NOTE. This guide covers how to build out your AEM instance. In this video you will: Understand the power behind the GraphQL language. See Wikipedia. Tap Create new technical account button. Click Create and give the new endpoint a name and choose the newly created configuration. Community. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Tap in the Integrations tab. Using a REST API introduce challenges: Tutorials by framework. Some content is managed in AEM and some in an external system. The following tools should be installed locally: JDK 11; Node. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Implementing User Guide: Understand how to build and customize experiences using AEM’s powerful features by exploring these development and deployment topics. Documentation AEM 6. In AEM 6. Learn how to use Content Fragments in Adobe Experience Manager (AEM) as a Cloud Service with the AEM GraphQL API. An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM). Playing headlessly with GraphQL capabilities in AEM! Evgeny Tugarev, Adobe. Clone and run the sample client application. If auth param is a string, it's treated as a Bearer token. It can be considered as a GraphQL client meant to provide ease of use and can be put above a normal fetch or axios API call, but it does not have as many advanced features like cache management as the apollo client, so functionality wise it. If auth is not defined, Authorization header will not be set. 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. 5 Developing Guide Headful and Headless in AEM. Headless implementations enable delivery of experiences across platforms and channels at scale. GraphQL has a robust type system. Documentation AEM AEM Tutorials AEM Headless Tutorial Creating GraphQL Queries. Learn how to use AEM’s Assets REST API to manage Content Fragments and the GraphQL API for headless delivery of Content Fragment content. BPA utilizes a system service user account named repository-reader-service to execute the Pattern Detector. AEM GraphQL query is an API for headless architecture to deliver content fragment data in the form of JSON. Next. Learn how to work with large result sets with AEM Headless. For the purposes of this getting started guide, we only need to create one configuration. The full code can be found on GitHub. Content Fragments for use with the AEM GraphQL API. The React App in this repository is used as part of the tutorial. 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. Create Content Fragments based on the. A classic Hello World message. PrerequisitesWelcome to the tutorial on building a web experience using React, fully powered by AEM Headless APIs and GraphQL. Topics: Developing View more on this topic. In the query editor, create a few different. Moving forward, AEM is planning to invest in the AEM GraphQL API. You will learn how to set up dependencies, design the component structure, retrieve and parse Content Fragments, and make the app editable using the. When authorizing requests to AEM as a Cloud Service, use. Looking for a hands-on. Learn how to deep link to other Content Fragments within a. GraphQL only works with content fragments in AEM. Persisted GraphQL queries. contributorList is an example of a query type within GraphQL. View the source code on GitHub. The. AEM GraphQL API for use with Content Fragments. This guide uses the AEM as a Cloud Service SDK. For the purposes of this getting started guide, you only must create one. Navigate to Tools > GraphQL Query Editor and choose our endpoint for the drop down in the top-right of the window. Level 3: Embed and fully enable SPA in AEM. Navigate to Tools > General > Content Fragment Models. Developer. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables. 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. In this video you will: Learn how to create and define a Content Fragment Model.