Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to. O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download NowDeploy the updates to a local AEM environment from the root of the project directory, using your Maven skills: $ cd aem-guides-wknd-spa $ mvn clean install -PautoInstallSinglePackage Update the Template Policy. Wrap the React app with an initialized ModelManager, and render the React app. Wrap the React app with an initialized ModelManager, and render the React app. Build a React JS app using GraphQL in a pure headless scenario. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the image, so change the. First select which model you wish to use to create your content fragment and tap or click Next. Locate the Layout Container editable area beneath the Title. Let’s explore the WKND App, a simple React application that displays adventures from AEM using AEM Headless GraphQL APIs. PSD files with a color space other than CMYK, RGB, Grayscale, or Bitmap are not supported. Tap Home and select Edit from the top action bar. In the future, AEM is planning to invest in the AEM GraphQL API. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java. Sign In. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. Adobe Experience Manager (AEM) enables authors to view a page in an emulator that simulates the environment in which an end-user will view the page, as for example, on a mobile device or in an email client. Select Edit from the mode-selector in the top right of the Page Editor. Prerequisites. Authorized requests to AEM GraphQL APIs they typically occur in the context of server-to-server apps, since other app types, such as single-page apps, mobile, or Web Components, typically do use authorization as it is difficult to secure the credentials . Learn how AEM can go beyond a pure headless use case, with options for in-context authoring and experience management. The tagged content node’s NodeType must include the cq:Taggable mixin. Prerequisites. The tutorial covers the end to end creation of the SPA and the. js app uses AEM GraphQL persisted queries to query. Once headless content has been translated,. Update the WKND App. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment (preferably Development) New useEffect hooks can be created for each persisted query the React app uses. AEM Headless APIs allow accessing AEM content from any client app. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. json extension. There are several other imports from @adobe/aem-core-components-react-spa and @adobe/aem-core-components-react-base. When this content is ready, it is replicated to the publish instance. AEM Headless as a Cloud Service. 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. All of the WKND Mobile components used in this. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java objects to power the app. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. It uses the Sites console as a basis. Run the following command to build and deploy the entire project to AEM: $ mvn. Following AEM Headless best practices, the Next. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. If you are. AEM Headless clients operating in a production capacity typically interact with AEM Publish, which contains the approved, published content. It also provides an optional challenge to apply your AEM. js application is as follows: The Node. Prerequisites. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. Install the AEM SDK, add sample content and deploy an application that consumes content from AEM using its GraphQL APIs. Server-to-server Node. js API routes, and the Next. Navigate to Tools > GraphQL Query Editor and choose our endpoint for the drop down in the top-right of the window. AEM Headless SDK. From the command line navigate into the aem-guides-wknd-spa. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. AEM Headless Translation Journey - This documentation journey gives you a broad understanding of headless. AEM Headless as a Cloud Service. Commerce Layer is a headless commerce platform that allows businesses to easily build and manage their online stores. 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. 2 - AEM Headless APIs and React; 3 - Complex components; Deployments. The GraphiQL tool also enables users to persist or save queries to be used by client applications in a production setting. This server-to-server application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and print it on terminal. The full code can be found on GitHub. 5 also includes several digital experience platform features such as GraphQL support, built-in Adobe Target integration, and a new user interface for the AEM Screens device. AEM has multiple options for defining headless endpoints and delivering its content as JSON. 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. Webpack 5+ The AEM Headless JS SDK has dependencies on util which is not included in Webpack 5+ by default. Developer. When authorizing requests to AEM as a Cloud Service, use. The URLs or routes used to preview a Content Fragment must be composable using URL expressions. The following are required to follow this quick setup: AEM as a Cloud Service Sandbox environment. Authorized requests to AEM GraphQL APIs they typically occur in the context of server-to-server apps, since other app types, such as single-page apps, mobile, or Web Components, typically do use authorization as it is difficult to secure the credentials . 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. Command line parameters define: The AEM as a Cloud Service Author service host. Once headless content has been translated,. Navigate to the folder you created previously. supports headless CMS scenarios where external client applications render experiences using content managed in AEM. Learn how to use Headless principles with React 11/26/2019. React has three advanced patterns to build highly-reusable functional components. Slider and richtext are two sample custom components available in the starter app. e. AEM Headless as a Cloud Service. This Android application demonstrates how to query content using the GraphQL APIs of AEM. By default, the starter kit uses Adobe’s Spectrum components. This tutorial explores how AEM Content Services can be used to power the experience of an Mobile App that displays Event information (music, performance, art, etc. As a result, I found that if I want to use Next. However, you cannot use WYSIWYG in CMS, preview, or quickly update the content,. Prerequisites. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. react. Remote Renderer Configuration. The React app should contain one. Ensure the new Single line text input is selected on the left, and the Properties. This Android application demonstrates how to query content using the GraphQL APIs of AEM. GraphQL, a flexible query language for APIs, provides an efficient and precise way to request specific data from your AEM instance, enabling a seamless integration between React and AEM. X. The full code can be found on GitHub. AEM. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. React is a popular JavaScript library for building user interfaces, known for its simplicity, reusability, and component-based architecture. New useEffect hooks can be created for each persisted query the React app uses. For convenience, this quick start connects the React app to AEM Author. 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. js (JavaScript) AEM Headless SDK for Java™. Opening the multi-line field in full screen mode enables additional formatting tools like Paragraph type, find and replace, spell check, and more. Learn how AEM can go beyond a pure headless use case, with. The engine’s state depends on a set of features (i. These are importing the React Core components and making them available in the current project. Within AEM, the delivery is achieved using the selector model and . The AEM Headless client, provided by. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. GraphQL queries. Next, deploy the updated SPA to AEM and update the template policies. Repeat the above steps to create a fragment representing Alison Smith:4 - Build a React app; Advanced Tutorial. If you are using. Available for use by all sites. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. A Next. Below is a summary of how the Next. If auth param is a string, it's treated as a Bearer token. AEM Headless Translation Journey - This documentation journey gives you a broad understanding of headless. This session highlights the latest AEM developer tools for building frontend web applications with JavaScript, including Headless GraphQL clients, content fragment. $ cd aem-guides-wknd-spa. If auth is not defined, Authorization header will not be set. Learn to use the delegation patter for extending Sling Models and features of Sling Resource. 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. 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. Persisted queries. Now viewingReact Spectrum. Spectrum provides adaptive, accessible, and cohesive experiences for all Adobe applications. Tap Create to bring up the New Content Fragment dialog and enter the following values: Tap Create. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Prerequisites. 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. Overview; 1 - Content modeling; 2 - AEM Headless APIs and React; 3 - Complex. 5 Forms; Get Started using starter kit. Sign In. X) the GraphiQL Explorer (aka GraphiQL IDE) tool needs to be manually installed, follow instruction from here. New useEffect hooks can be created for each persisted query the React app uses. The example code is available on Github. Open the react-starter-kit-aem-headless-forms directory in a code editor and navigate to eact-starter-kit-aem-headless-formssrccomponents. 4 - Build a React app; Advanced Tutorial. js application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries. The AEM Headless client, provided by. AEM supports client-defined GraphQL queries, however it is AEM best practice to use persisted GraphQL queries. New useEffect hooks can be created for each persisted query the React app uses. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. js app is built, how it connects to AEM Headless to retrieve content using GraphQL persisted queries, and how that data is presented. PSB files. Authorization. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. React apps should use the AEM Headless Client for JavaScript to interact with AEM’s GraphQL APIs. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. Author in-context a portion of a remotely hosted React application. The React app should contain one instance of the <Page> component exported from @adobe/aem-react-editable-components. Update the WKND App. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. In the future, AEM is planning to invest in the AEM GraphQL API. AEM Headless APIs allow accessing AEM content from any client app. Learn how to integrate AEM Headless with Adobe Target, by exporting AEM Content Fragments to Adobe Target, and use them to personalize headless experiences using the Adobe Experience Platform Web SDK’s alloy. AEM Headless supports a offset/limit and cursor-based pagination queries to smaller subsets of a larger result set. New useEffect hooks can be created for each persisted query the React app uses. The full code can be found on GitHub. Browse the following tutorials based on the technology used. Learn about the architecture of AEM Forms Headless Adaptive Forms and how it can help you quickly build forms for various platforms. Open the Page Editor’s side bar, and select the Components view. 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. e. So for the web, AEM is basically the content engine which feeds our headless frontend. Let’s test the new endpoint. Prerequisites. If you are. e. Learn how to add editable container components to a remote SPA that allow AEM authors drag and drop components into them. AEM Headless clients operating in a production capacity typically interact with AEM Publish, which contains the approved, published content. Headless Adaptive Forms will allow a mechanism to deliver forms in a headless, channel-agnostic format and render them in a channel-optimal manner leveraging front end expertise in frameworks like React, Angular or native IOS, Android Apps. An end-to-end tutorial illustrating advanced concepts of Adobe Experience Manager (AEM) GraphQL APIs. In the folder’s Cloud Configurations tab, select the configuration created earlier. 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. Here, the AEM will act as a mere repository, exposing content as a service in REST/ GraphQL endpoints. The AEM Author tier is operated as a cluster of AEM author pods sharing a single content repository. Next page. Right now there is full support provided for React apps through SDK, however the model can be used using. This Web Component/JS application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. js (JavaScript) AEM Headless SDK for Java™. AEM Headless as a Cloud Service. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. Created for: Intermediate. See how AEM powers omni-channel experiences. The <Page> component has logic to dynamically create React components based on the. Next Steps. APIs can then be called to retrieve this content. Persisted queries. From the AEM Start screen, navigate to Tools > General > GraphQL Query Editor. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Last update: 2023-09-26. AEM Headless as a Cloud Service. 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. You can also select the components to be available for use within a specific paragraph system. js-based SDK that allows the creation of React components, that support in-context component editing using AEM SPA Editor. This document provides and overview of the different models and describes the levels of SPA integration. Rich text with AEM Headless. AEM Headless APIs allow accessing AEM content from any client app. The AEM Headless Client for JavaScript is used to execute the GraphQL persisted queries that power the app. npm module; Github project; Adobe documentation; For more details and code. 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. Below is a summary of how the Next. In this chapter, a new AEM project is deployed, based on the AEM Project Archetype. ) that is curated by the. 924. 7 NT NORTHBOUND ALASKA & HUBBARD GLACIER. 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. AEM Headless clients operating in a production capacity typically interact with AEM Publish, which contains the approved, published content. 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. Create a copy of the slider or richtext folder, and rename the copied folder to materialtextfield. The AEM Headless SDK is set of libraries that can. These assets can then be. Learn how to create a SPA using the React JS framework with AEM’s SPA Editor. To add a container component to the Home view: Import the AEM React Editable Component’s ResponsiveGrid componentThe headless approach in AEM has the following features and functionalities: Omnichannel delivery: Headless is preferred when the content is consumed through multiple channels. src/api/aemHeadlessClient. The ImageComponent component is only visible in the webpack dev server. Remote Renderer Configuration. React Router is a collection of navigation components for React applications. The full code can be found on GitHub. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Once headless content has been. With these operation the API lets you operate Adobe Experience Manager as a headless CMS (Content Management System) by providing. Learn how multiple views in the SPA are supported using AEM Pages and the SPA Editor SDK. AEM Preview is intended for internal audiences, and not for the general delivery of content. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. In, some versions of AEM (6. I was very pleased with the service both on. AEM: GraphQL API. Quick links. Learn about the various data types used to build out the Content Fragment Model. View the. 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. A React implementation of Spectrum, Adobe’s design system. With a traditional AEM component, an HTL script is typically required. Log in to AEM Author service as an Administrator. Located on Belleville Street, these government legislative. Enable Headless Adaptive Forms on AEM 6. This Web Component application demonstrates how to query content using AEM’s GraphQL APIs using persisted queries and render a portion of UI, accomplished using pure JavaScript code. 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. Below is a summary of how the Next. Beginner Developer For publishing from AEM Sites using Edge Delivery Services, click here. AEM React Editable Components work with both SPA Editor or Remote SPA React apps. Developer. This is the same framework used to translate other AEM content, such as Pages, Experience Fragments, Assets, and Forms. Departs. 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. ” Tutorial - Getting Started with AEM Headless and GraphQL. The AEM Headless client, provided by. 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. Build Engaging Forms Using Core Components and Headless Adaptive Forms on AEM 6. 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. If you are. New useEffect hooks can be created for each persisted query the React app uses. Now that the EditableTitle React component is registered in and available for use within the React app, replace the hard-coded title text on the Home view. I have an external React component library of ~70 React components, which feeds a web frontend (Websphere Commerce site, which pulls in Experience Fragments via AJAX calls to get the fragment HTML), and also a React Native app. Webpack 5+ The AEM Headless JS SDK has dependencies on util which is not included in Webpack 5+ by default. AEM React Core Components uses features of React Router to implement the Navigation component used in the previous steps. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. js application is invoked from the command line. AEM supports client-defined GraphQL queries, however it is AEM best practice to use persisted GraphQL queries. AEM components, that maps to editable React components, must implement AEM’s Component Exporter framework - such as AEM Core WCM. A modern content delivery API is key for efficiency and performance of Javascript-based frontend applications. 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. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. 4 - Build a React app; Advanced Tutorial. js implements custom React hooks return data from AEM. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Here I’ve got a react based application that displays a list of adventures from AEM. Welcome to this tutorial chapter where we will explore configuring a React app to connect with Adobe Experience Manager (AEM) Headless APIs using the AEM Headless SDK. Build Engaging Forms Using Core Components and Headless Adaptive Forms on AEM 6. . Search. AEM React Core Components uses features of React Router to implement the Navigation component used in the previous steps. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. Do not attempt to close the terminal. In the query editor, create a few different. The sample React app has three main parts: The src/api folder contains files used to make GraphQL queries to AEM. Populates the React Edible components with AEM’s content. React example. Persisted queries. Slider and richtext are two sample custom components available in the starter app. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the image, so change the. src/api/aemHeadlessClient. AEM Headless clients operating in a production capacity typically interact with AEM Publish, which contains the approved, published content. Recommended courses. AEM Preview is the service that mimics AEM Publish in behavior, but has content published to it for preview or review purposes. View next: Learn. There are several other imports from @adobe/aem-core-components-react-spa and @adobe/aem-core-components-react-base. 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. Image. AEM Headless as a Cloud Service. AEM React Core Components uses features of React Router to implement the Navigation component used in the previous steps. json Welcome to this tutorial chapter where we will explore configuring a React app to connect with Adobe Experience Manager (AEM) Headless APIs using the AEM Headless SDK. AEM Headless as a Cloud Service. By leveraging AEM Headless APIs, you can retrieve content, assets, and data from your AEM instance and use them to power your React application. This Android application demonstrates how to query content using the GraphQL APIs of AEM. To explore how to use the. Persisted queries. 5 or later; AEM WCM Core Components 2. This Android application demonstrates how to query content using the GraphQL APIs of AEM. Understand how the source code for a Single Page Application (SPA) written in Angular can be integrated with an Adobe Experience Manager (AEM) Project. There are several other imports from @adobe/aem-core-components-react-spa and @adobe/aem-core-components-react-base. The advanced tutorial illustrates in-depth aspects of working with Content Fragment Models, Content Fragments, and the AEM GraphQL persisted queries, including using the GraphQL persisted queries in a client application. Following AEM Headless best practices, the Next. , reducers). AEM provides AEM React Editable Components v2, an Node. The page content architecture of /content/wknd-mobile/en/api has been pre-built. Once headless content has been translated,. 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. These are then mapped to project specific AEM components using the MapTo, just like with the Text component example earlier. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). AEM Headless as a Cloud Service. Organize and structure content for your site or app. The absence of a headless architecture can lead to several challenges, including siloed development, slower time-to-market, heavy IT dependency, difficulty in. React apps should use the AEM Headless Client for JavaScript to interact with AEM’s GraphQL APIs. The AEM Headless Client for Java is used to execute the GraphQL queries and map data to Java objects to. Next, inspect how React Router is integrated with the SPA and experiment using React Router’s Link component. For publishing from AEM Sites using Edge Delivery Services, click here. Preview URLs, using URL expressions, are set on the Content Fragment Model’s Properties. Learn how to develop author dialogs and Sling Models to extend the JSON model to populate a custom component. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. Learn about deployment considerations for mobile AEM Headless deployments. 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. 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. In this video you will: Learn how to create and define a Content Fragment Model. There are several other imports from @adobe/aem-core-components-react-spa and @adobe/aem-core-components-react-base. This end-to-end tutorial continues the basic tutorial that covered the fundamentals of Adobe Experience Manager (AEM) Headless and GraphQL. AEM supports client-defined GraphQL queries, however it is AEM best practice to use persisted GraphQL queries. Learn. 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. 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’s GraphQL APIs and consumed by an external app, in a headless CMS scenario. The srcset and sources use a custom setParams function to append the web-optimized delivery query parameter to the _dynamicUrl of the. GraphQL Persisted Queries. 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. On this page. In this part of the AEM Headless Content Author Journey, you can learn the (basic) concepts and terminology necessary to understand authoring content when using Adobe Experience Manager (AEM) as a Cloud Service as a Headless CMS. Learn to use modern front-end tools, like a webpack dev server, to rapidly develop the SPA against the AEM JSON model API. When authorizing requests to AEM as a Cloud Service, use. Wrap the React app with an initialized ModelManager, and render the React app. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all. Prerequisites. The build will take around a minute and should end with the following message: Level 1: Content Fragments and the AEM headless framework can be used to deliver AEM content to the SPA. Tap on the Bali Surf Camp card in the SPA to navigate to its route. Sign In. Experience League. AEM’s headless features. Webpack 5+ The AEM Headless JS SDK has dependencies on util which is not included in Webpack 5+ by default. External SPA with Editable Areas: In this design, the SPA is hosted outside of AEM, the developer keeps control over the app by only enabling authoring in restricted areas of the app. We’ll cover retrieving Content Fragment data from AEM’s GraphQL APIs and displaying it in the React app. Content models. Next.