View the. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). AEM has multiple options for defining headless endpoints and delivering its content as JSON. Using a REST API introduce challenges: It supports creating a React or Angular SPA project template with the following: AEM base setup; Core Components; Setup for Sling Exporter Framework; A frontend build chain that builds and deploys all assets directly into AEM; Angular / React libraries for the AEM integration; A static preview server for local, AEM-independent frontend development This React application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. If you are. Tutorials by framework. 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. The absence of a headless architecture can lead to several challenges, including siloed development, slower time-to-market, heavy IT dependency, difficulty in. Adobe Experience Manager (AEM) is the leading experience management platform. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted. This service is done by way of the RemoteContentRenderer - Configuration Factory OSGi. 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. Name the model Hero and click Create. Slider and richtext are two sample custom components available in the starter app. js v18; Git; 1. Create and publish a headless form using starter kit; Use a custom react library to render a headless form; Create Headless adaptive formsThe 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. API Reference. 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 srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. When using the AEM React Editable Components with a SPA Editor-based React app, the AEM ModelManager SDK, as the SDK: Retrieves content from AEM. If you are. Now viewing. AEM Headless Translation Journey - This documentation journey gives you a broad understanding of headless. $ cd aem-guides-wknd-spa. AEM as a Cloud Service lets you capitalize on the AEM applications in a cloud-native way, so that you can: Scale your DevOps efforts with Cloud Manager: CI/CD framework, autoscaling, API connectivity, flexible deployment modes, code quality gates, service delivery transparency, and guided updates. Select the Content Fragment Model and select Properties form the top action bar. Update the WKND App. Review existing models and create a model. , reducers). This simple React app uses the AEM Headless SDK to query AEM Headless APIs for an Adventure content, and displays the web-optimized image using img element with srcset and picture element. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. I checked the Adobe documentation, including the link you provided. Sling Models are annotation driven Java “POJO’s” (Plain Old Java Objects) that facilitate the mapping of data from the JCR to Java variables. The following tools should be installed locally: JDK 11;. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Once headless content has been translated,. The TagID is added to the content node’s cq:tags property and resolves to a node of type cq:Tag. Populates the React Edible components with AEM’s content. Below is a summary of how the Next. Using headless e-commerce allows you to separate the CMS from the e-commerce engine part. Click Create and Content Fragment and select the Teaser model. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). With Headless Adaptive Forms, you can streamline the process of. This allows the engineering team to build the bulk of the site components outside of AEM and to scale. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. If auth is not defined, Authorization header will not be set. AEM supports client-defined GraphQL queries, however it is AEM best practice to use persisted GraphQL queries. AEM must know where the remotely rendered content can be retrieved. 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. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. Create a copy of the slider or richtext folder, and rename the copied folder to materialtextfield. X) the GraphiQL Explorer (aka GraphiQL IDE) tool needs to be manually installed, follow instruction from here. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. From USD*. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. Last update: 2023-09-26. To stop the starter kit, open your terminal, navigate to the react-starter-kit-aem-headless-forms, and press Ctrl-C (it’s the same on Windows, Mac & Linux). AEM’s SPA Editor provides authors the ability to edit content for a Single Page Application or SPA. View the source code on GitHub. 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. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. Tutorials by framework. This article introduces the basic concepts of SPAs before leading the reader through a walkthrough of the SPA editor by using a simple SPA application to demonstrate basic content editing. AEM Headless Translation Journey - This documentation journey gives you a broad understanding of headless technology, how AEM. This simple React app uses the AEM Headless SDK to query AEM Headless APIs for an Adventure content, and displays the web-optimized image using img element with srcset and picture element. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. AEM React Core Components uses features of React Router to implement the Navigation component used in the previous steps. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. If I click into one of the adventures, I can see more details about the adventure including the activity, type and itinerary. 5 Forms; Get Started using starter kit. Use the React EditableTitle component. js JSS app with advanced Sitecore editors. To stop the starter kit, open your terminal, navigate to the react-starter-kit-aem-headless-forms, and press Ctrl-C (it’s the same on Windows, Mac & Linux). Regardless of which model you choose to implement for SSR, you must specify to AEM how to access this remote rendering service. To tag content and use the AEM Tagging infrastructure : The tag must exist as a node of type cq:Tag under the taxonomy root node. A minimum of two pods allows for business continuity while maintenance tasks are running, or while a deployment process is happening. Next page. Hi @shelly-goel,. Learn about the architecture of AEM Forms Headless Adaptive Forms and how it can help you quickly build forms for various platforms. AEM Headless clients operating in a production capacity typically interact with AEM Publish, which contains the approved, published content. Learn. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. 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. The Headless implementation of AEM uses Content Fragments Models and Content Fragments to focus on the creation of structured, channel-neutral, and reusable fragments of content and their cross-channel delivery. 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. Deploying a SPA that interacts AEM in a headless manner involves hosting the SPA and making it accessible via a web browser. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. Persisted queries. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. Last update: 2023-08-16. AEM Headless as a Cloud Service. Enable Headless Adaptive Forms on AEM 6. AEM Headless as a Cloud Service. Prerequisites. Sign In. REACT_APP_BASIC_AUTH_USER: the AEM username by the SPA to authenticate while retrieving AEM content. How does AEM work in headless mode for SPAs? Rendering HTML in the backend vs Single Page Application The SPA WYSIWYG content editor Content APIs Benefits of. Author in-context a portion of a remotely hosted React application. React Router is a collection of navigation components for React applications. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Learn about deployment considerations for mobile AEM Headless deployments. Experience League. The AEM Headless SDK is set of libraries that can. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. AEM 6. If you are using. To explore how to use the various options. GraphQL queries. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component. In this video you will: Learn how to create and define a Content Fragment Model. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Anatomy of the React app. Search. Learn to use modern front-end tools, like the Angular's CLI tool, to rapidly develop the SPA against the AEM JSON model API. This example, loosely based on the AEM Headless React app, illustrates how AEM GraphQL API requests can be configured to connect to different AEM Services based on environment variables. All leading CMS products such as Drupal, WordPress, AEM and Sitecore, Kentico and others can also work in a “headless” mode. AEM Headless APIs allow accessing AEM content from any client app. AEM provides AEM React Editable Components v2, an Node. Tap Create to bring up the New Content Fragment dialog and enter the following values: Tap Create. Previous page. 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. Storyblok is the headless content management system that empowers developers and content teams to create better content experiences across any digital channel. View the source code on GitHub. New useEffect hooks can be created for each persisted query the React app uses. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. Tutorials by framework. This tutorial explores how AEM’s GraphQL APIs and headless capabilities can be used to power the experiences surfaced in an external app. 5 has enhanced its digital customer experience services by providing better content personalization, content fragment enhancements, and easier authoring. See how AEM powers omni-channel experiences. The React app should contain one. The creation of a Content Fragment is presented as a wizard in two steps. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. When developing a custom AEM Headless client, ensure the AEM service’s host is parameterize-able based on build parameters. The full code can be found on GitHub. It is used to hold and structure the individual components that hold the actual content. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. Populates the React Edible components with AEM’s content. This EditableTitle React component wraps the Title React component, wrapping and decorating it to be editable in AEM SPA Editor. The Open Weather API and React Open Weather components are used. View the source code on GitHub. If you are. If you are. 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. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. Update Policies in AEM. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL IDE. The Single-line text field is another data type of Content. Beginner Developer For publishing from AEM Sites using Edge Delivery Services, click here. The AEM Headless client, provided by. If you are using Webpack 5. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java. Once headless content has been. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. Rich text with AEM Headless. This session highlights the latest AEM developer tools for building frontend web applications with JavaScript, including Headless GraphQL clients, content fragment. The ImageComponent component is only visible in the webpack dev server. The AEM emulator framework: Provides content authoring within a simulated User Interface (UI), for example, a mobile device or. Overview; Single-page app; Web Component; Mobile; Server-to-server; Configurations. js: Execute SSR/ISR from AEM GraphQL API on a separate server that is not AEM. Objective. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. Let’s set it to use Google’s Material UI: Ensure that the starter kit is not running. Prerequisites. There are many ways to build the web; most of the ways can be implemented in AEM, which one works best is going to depend on your authors. AEM: GraphQL API. At its simplest level, creating digital experiences in AEM requires the following steps: Your content authors create your headless content in the author instance. Understand how the source code for a Single Page Application (SPA) written in Angular can be integrated with an Adobe Experience Manager (AEM) Project. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Persisted queries. React Aria. js based, Headless CMS that saves developers a lot of development time while giving them the freedom to use their favorite tools and frameworks. Prerequisites. Enable developers to add automation. The following tools should be installed locally: JDK 11; Node. npm module; Github project; Adobe documentation; For more details and code. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Web Component/JS deployments differ from SPA deployments in that they don’t use a robust SPA framework, and are expected to be embedded in the context. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java objects to power the app. React apps should use the AEM Headless Client for JavaScript to interact with AEM’s GraphQL APIs. 1. What we did in our case, we created react component as normal clienlibs and mapped with aem component without SPA and loaded with normal. 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. Manage GraphQL endpoints in AEM. A classic Hello World message. Clients interacting with AEM Author need to take special care, as. AEM Forms Headless Adaptive Forms provide a fast and efficient way to create forms for various platforms including Headless or Headful CMS, React applications, Single Page Applications (SPA), Web Apps, Mobile apps, Amazon Alexa, Google Assistant, WhatsApp, and more. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. Organize and structure content for your site or app. In this chapter, we add an editable container to the home view allowing authors to compose and layout rich content experiences using Editable React components directly in the SPA. The full code can be found on GitHub. Learn to use the delegation patter for extending Sling Models and features of Sling Resource. Following AEM Headless best practices, the Next. Learn how to create a custom weather component to be used with the AEM SPA Editor. Now viewingOverview. PSD files with a color space other than CMYK, RGB, Grayscale, or Bitmap are not supported. AEM components, that maps to editable React components, must implement AEM’s Component Exporter. Webpack 5+ The AEM Headless JS SDK has dependencies on util which is not included in Webpack 5+ by default. AEM Headless as a Cloud Service. , a backend-only content management system allows you to manage and re-use digital content from a single repository and publish it on different applications. The AEM Author tier is operated as a cluster of AEM author pods sharing a single content repository. REACT_APP_BASIC_AUTH_PASS: the AEM password by the SPA to authenticate while retrieving AEM content. By leveraging AEM Headless APIs, you can retrieve content, assets, and data from your AEM instance and use them to power your React application. Populates the React Edible components with AEM’s content. js application is invoked from the command line. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. View the source code on GitHub. These assets can then be. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. They are suitable only for content pages. Spectrum provides adaptive, accessible, and cohesive experiences for all Adobe applications. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. Persisted queries. 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. src/api/aemHeadlessClient. js app uses AEM GraphQL persisted queries to query adventure data. Create Content Fragments based on the. At this point, you should have completed the entire AEM Headless Developer Journey and understand the basics of headless delivery in AEM including an understanding of: The difference between headless and headful content delivery. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. In the Content Fragment Editor, the multi-line text field’s menu bar provides authors with standard rich text formatting capabilities, such as bold, italics, and underline. Typical AEM as a Cloud Service headless deployment architecture_. Wrap the React app with an initialized ModelManager, and render the React app. They can also be used together with Multi-Site Management to. AEM as a Cloud Service lets you capitalize on the AEM applications in a cloud-native way, so that you can: Scale your DevOps efforts with Cloud Manager: CI/CD framework, autoscaling, API connectivity, flexible deployment modes, code quality gates, service delivery transparency, and guided updates. See generated API Reference. The AEM Headless client, provided by. This endpoint can use all Content Fragment Models from all Sites configurations (defined in the Configuration Browser ). 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. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. AEM offers the flexibility to exploit the advantages of both models in one project. Slider and richtext are two sample custom components available in the starter app. Certain points on the SPA can also be enabled to allow limited editing. Please find my comments inline in green. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. Products such as Contentful, Prismic and others are leaders in this space. In the previous chapter, you created and updated persisted queries using GraphiQL Explorer. The AEM Headless SDK is available for various platforms: AEM Headless SDK for client-side browsers (JavaScript) AEM Headless SDK for server-side/Node. Build Engaging Forms Using Core Components and Headless Adaptive Forms on AEM 6. Departs. Contributing. Enable Headless Adaptive Forms on AEM 6. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. The following diagram illustrates the architecture of integrating a Next. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. To interact with those features, Headless provides a collection. js 14+. 5 and React integration. They allow you to prepare content ready for use in multiple locations/over multiple channels, ideal for headless delivery. The Open Weather API and React Open Weather components are used. Author in-context a portion of a remotely hosted React application. Hi , The Headless implementation of AEM uses Content Fragments Models and Content Fragments to focus on the creation of structured, channel-neutral, and reusable fragments of content and their cross-channel delivery. Do not attempt to close the terminal. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. reactjs - How to protect AEM pages and assets in headless architecture in AEM 6. It also provides an optional challenge to apply your AEM. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. 4. Locate the Layout Container editable area beneath the Title. It then dives down into the construction of the page and how the SPA application relates to and interacts with the AEM SPA Editor. Populates the React Edible components with AEM’s content. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java. The. We’ll be using the sample Weekend React app that is an AEM headless app, so the majority of the content on this app is powered by content fragments over AEM’s GraphQL APIs. New useEffect hooks can be created for each persisted query the React app uses. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. This chapter walks you through the steps to integrate the persisted queries with the WKND client application (aka WKND App) using HTTP GET requests within existing React components. You can't add SPA react component to normal AEM page OOTB. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as. Content populating the editable React components, must be exposed via AEM pages that extend the SPA Page component. Opening the multi-line field in full screen mode enables additional formatting tools like Paragraph type, find and replace, spell check, and more. This simple React app uses the AEM Headless SDK to query AEM Headless APIs for an Adventure content, and displays the web-optimized image using img element with srcset and picture element. 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. Learn how to create a custom weather component to be used with the AEM SPA Editor. New useEffect hooks can be created for each persisted query the React app uses. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. The following tools should be installed locally: JDK 11;. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). AEM React Core Components uses features of React Router to implement the Navigation component used in the previous steps. Persisted queries. New useEffect hooks can be created for each persisted query the React app uses. Learn how to add editable container components to a remote SPA that allow AEM authors drag and drop components into them. Create your first React Single Page Application (SPA) that is editable in Adobe Experience Manager AEM with the WKND SPA. Created for: Beginner. But if you are looking to. GraphQL endpoints. Preview URLs, using URL expressions, are set on the Content Fragment Model’s Properties. Persisted queries. Tap or click Create -> Content Fragment. AEM Headless as a Cloud Service. The below video demonstrates some of the in-context editing features with. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. When using the AEM React Editable Components with a SPA Editor-based React app, the AEM ModelManager SDK, as the SDK: Retrieves content from AEM. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java. 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. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Experience League. Populates the React Edible components with AEM’s content. Experience League. Developer. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Integrate the ModelManager APIAnatomy of the React app. 7 NT NORTHBOUND ALASKA & HUBBARD GLACIER. js app uses AEM GraphQL persisted queries to query adventure data. From the command line navigate into the aem-guides-wknd-spa. Now even AEM as a cloud service has react as inbuilt program into its archetype as part of Adobe’s best practices known to its Headless CMS architecture. The full code can be found on GitHub. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. 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 latest version of AEM and AEM WCM Core Components is always recommended. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. Build from existing content model templates or create your own. This simple React app uses the AEM Headless SDK to query AEM Headless APIs for an Adventure content, and displays the web-optimized image using img element with srcset and picture element. Learn how to develop author dialogs and Sling Models to extend the JSON model to populate a custom component. 5 - Stack Overflow How to protect AEM pages and assets in headless. Developer. View the source code on GitHub. Ensure that the React app is running on Node. 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. The full code can be found on GitHub. “Adobe Experience Manager is at the core of our digital experiences. js (JavaScript) AEM Headless SDK for Java™. This Next. React Router is a collection of navigation components for React applications. Once headless content has been translated,. The full code can be found on GitHub. src/api/aemHeadlessClient. GraphQL queries. Tap Home and select Edit from the top action bar. React apps should use the AEM Headless Client for JavaScript to interact with AEM’s GraphQL APIs. The <Page> component has logic to dynamically create React components based on the. js app uses AEM GraphQL persisted queries to query. Image. 90 reviews of FRS Clipper "We took the Clipper from Seattle to Victoria recently, as it is the easiest way to get between the two places. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Explore the power of a headless CMS with a free, hands-on trial. js 14+. Adobe Experience Manager projects can be implemented in both headful and headless models, but the choice is not binary. React apps should use the AEM Headless Client for JavaScript to interact with AEM’s GraphQL APIs. To force AEM to always apply the caching headers, one can add the always option as follows:Adobe Experience Manager (AEM) Gems is a series of technical deep dives into Adobe Experience Manager delivered by Adobe experts. Welcome to a multi-part tutorial designed for developers new to the SPA Editor feature in Adobe Experience Manager (AEM). We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. The engine’s state depends on a set of features (i. AEM supports client-defined GraphQL queries, however it is AEM best practice to use persisted GraphQL queries. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the.