Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). The CIF Core Components and the Commerce Add-On connect to a Magento (or alternative) via GraphQL. Then you can do this : allCategories (filter: {tag: "mystery"}) { books { id } }. The com. The React app is developed and designed to be deployed with AEM’s SPA Editor, which maps React components to AEM components. Namely, this was developing an offline. ts and . SSR is also covered. This persisted query drives the initial view’s adventure list. model. The GraphiQL IDE is available in AEM for you to develop, test, and persist your GraphQL queries, before transferring to your production environment. The AEM Commerce Add-On for AEM 6. Chapter 7 of the tutorial uses a native Android Mobile App to consume content from AEM Content Services. By using the --template typescript flag, CRA will generate your files as . React, Redux, and GraphQL. Already serving notice max November 2nd week joiners. Extensive knowledge of the AEM architecture and technology. React was made for creating great user experiences with JavaScript. Developed React components using MaterialUI, Routers for redirection, Personalization through Rules. Build a React JS app using GraphQL in a pure headless scenario. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to query adventure data. This tutorial builds upon the WKND GraphQL App, a React app that consumes AEM Content Fragment content over AEM’s GraphQL APIs, however does not provide any in-context authoring of SPA content. 1. This is built with the Maven profile classic and uses v6. React app with AEM Headless View the source code on GitHub A full step by step tutorial describing how this React app was build. The JSON Export is based on Sling Models, and on the Sling Model Exporter framework (which itself relies on Jackson annotations). Experience League. js. run npm command: npm install --save @apollo/react-hooks apollo-cache-inmemory apollo-client apollo-link-graphql graphql-tag isomorphic-unfetch next-with-apollo. Search for “GraphiQL” (be sure to include the i in GraphiQL ). Q&A for work. By utilizing the AEM Headless SDK, you can easily query and fetch Content Fragment data using. The application uses two persisted queries: wknd/adventures-all persisted query, which returns all adventures in AEM with an abridged set of properties. The future of e-commerce is now. The GraphQL API of AEM provide a powerful query language to expose data of Content Fragments to downstream applications. This persisted query drives the initial view’s adventure list. Persisted queries are queries that are stored on the Adobe Experience Manager (AEM) server. 5 with Service Pack 16 or 17, when in the List view of sites with the “Workflow” column enabled, you cannot sort the list based on the items in that column. Within AEM, the delivery is achieved using the selector model and . but once I add the dependency and try to build the code so the OSGI bundle is always in the installed state. 0+ and NPM v5. Learn about the various data types used to build out the Content Fragment Model. Reproduce Scenario (including but not limited to) Starting over in a new directory causes the problem to reproduce. You’re now able to read data from the server, but in order to have a full CRUD app, you’ll need to be able to create, update, and delete. js provides two important capabilities: building a type schema and serving queries against that type schema. GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. The simplest way to expose a connection. GraphQL Playground is a GraphQL IDE built on top of GraphiQL, developed by Prisma. Last update: 2023-08-15 Topics: Content Fragments GraphQL API Learn to use GraphQL with AEM so you can serve content headlessly by exploring sample content and queries. Fetching data from a GraphQL API endpoint. It is also a server-side runtime for executing queries when you define a type system for your data. Without Introspection and the Schema, tools like these wouldn't exist. Create your first React SPA in AEM. Limited content can be edited within AEM. npm install -E @okta/[email protected] GraphQL server to retrieve all the posts. React Native + Relay Modern + GraphQL: an app to display information about . Created for: Developer. Developer. This tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. The version of Dispatcher Tools is different from that of the AEM SDK. Dates and timezones are one of the most commonly used data types in building modern apps. Deploy the front-end code repository to this pipeline. 6 Answers. Apart from the existing features of GraphiQL, it includes improvements and enhancements to the original GraphiQL experience, like enhanced documentation and schema exploration, and better query debugging. commerce. 3 - Explore GraphQL APIs; 4 - Build a React app; Advanced Tutorial. The basic operation of queries with GraphQL for AEM adhere to the standard GraphQL specification. You would use syntax similar to that below, and can read more about it here . Tap Create new technical account button. Created for: Developer. We create fields, attach Sling injector annotations to them, add getters and, thus, receive data-filled objects. React training is available as "online live training" or "onsite live training". Using the same variable to construct the GraphQL API request as the image URL, ensure that the React app interacts with the same AEM service for both use cases. fly. Navigate to Tools, General, then select GraphQL. If you want to know more about GraphQL, you can read more about why Gatsby uses it and check out this conceptual guide on querying data with GraphQL. This architecture will be the most common for greenfield projects. 3. Consume AEM’s GraphQL APIs from the SPA application;. It does not look like Adobe is planning to release it on AEM 6. 0 or higher; Documentation. yarn add -D @graphql-codegen/cli. 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. 1k 2 2 gold badges 27 27 silver badges 38 38 bronze badges. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. “GraphQL” is a trademark managed by the GraphQL Foundation. Part 4: Optimistic UI and client side store updates. ) custom useEffect hook used to fetch the GraphQL data from AEM. Navigate to the Software Distribution Portal > AEM as a Cloud Service and download the latest version of the AEM SDK. Master the process of thinking about your applications data in terms of a graph structure. The SPA retrieves this content via AEM’s GraphQL API. Adobe Experience Manager as a Cloud Service uses AEM Publish Dispatcher filters to ensure only requests that should reach AEM do reach AEM. Built for Magento PWA. Ensure that the version of Dispatcher Tools is provided via the AEM SDK version matching the AEM as a Cloud Service version. Use source plugins to load your data, then develop using Gatsby’s uniform GraphQL interface. A current workaround might be to introduce a new model Category with a many-to-many relation to Book. Fragment References in GraphQL If you create a deep query that returns multiple Content Fragments referenced by each other, it returns null at first. Each argument must be named and have a type. Nov 7, 2022. 5 or AEM SDK) Pre-compiled AEM packages are available under the latest release for easy installation on local environments using CRX Package Manager. The useQuery hook expects a key ( get-posts) and a GraphQL query. Alternatively, you can also use CRXDE Lite to get a list of all the components available in the repository. AEM supports client-defined GraphQL queries, however it is AEM best practice to use persisted GraphQL queries. ) custom useEffect hook used to fetch the GraphQL data from AEM. Build React app that fetches content/data from AEM GraphQL API, also see how AEM Headless JS SDK is used. 2_property. In addition, I've wanted to build a fully-functioning E-commerce website with payment processing and an email server to improve my back-end skills. (React or Angular) with AEM. Start by creating a new React project by running the following commands: 1 npx create-react-app my-graphql-react-project 2 cd my-graphql-react-project 3 yarn add @apollo/client graphql. Let’s jump in! 🚀. 5 the GraphiQL IDE tool must be manually installed. Editor’s Note: This post was updated on 14 May 2021 to reflect updated information and new code using TypeScript to add type safety and with DataLoader to avoid N+1s, using Prisma instead of Knex for the database layer, and incorporating a code-first GraphQL schema approach. zip: AEM 6. In the Basic Tutorial - Build a React app that uses AEM’s GraphQL APIs step we had reviewed and enhanced few key files to get hands-on expertise. By default all requests are denied, and patterns for allowed URLs must be explicitly added. They allow you to prepare content ready for use in multiple locations/over multiple channels, ideal for headless delivery. AEM as a Cloud Service and AEM 6. To avoid this and to allow logical organization of client-side libraries AEM uses client-side library. To improve network performance for large query strings, Apollo Server supports Automatic Persisted Queries (APQ). We would like to show you a description here but the site won’t allow us. 0, last published: a year ago. The key configuration properties are: alloworigin and/or alloworiginregexp specifies the origins the client connecting to AEM web runs on. cd next-graphql-app. Part 3: Writing mutations and keeping the client in sync. js Full-Stack CRUD App Overview. In this section, we’ll go over some GraphQL CRUD examples to help you understand how CRUD operations work in a React and GraphQL app. Note that the integration is currently based. References to other content, such as images or other Content Fragments can be dynamically inserted in-line within the flow of the text. GraphQL is best suited for microservices and complex systems because of using a simple query. Apollo Client is UI framework agnostic, which is super beneficial. Explore AEM’s GraphQL capabilities by building out a React App that consumes Content Fragments via AEM’s GraphQL APIs. The graphql-upload package adds a special middleware that parses POST requests with a Content-Type of multipart/form-data. Select Edit from the mode-selector in the top right of the Page Editor. Adobe developer’s adhere to these best practices as they develop core AEM product updates and customer code for customer implementations. ViewsApp Setup. Tools like GraphiQL and GraphQL Playground use the introspection Query to then be able to give the user autocompletion functionalities. ”. NOTE Read this page along with the following: Content Fragments Content Fragment Models AEM GraphQL API for use with Content Fragments The GraphiQL tool enables developers to create and test queries against content on the current AEM environment. Available for use by all sites. In the Query tab, select XPath as Type. Example applications are a great way to explore the headless capabilities of Adobe Experience Manager (AEM). Client type. AEM as a Cloud Service GraphQL API used with Content Fragments is heavily based on the standard, open source GraphQL API. Managing Content. zip: AEM 6. This setup establishes a reusable communication channel between your React app and AEM. User. This endpoint can use all Content Fragment Models from all Sites configurations (defined in the Configuration Browser ). 2_property=navTitle group. React Router is a collection of navigation components for React applications. Before you start your. 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. Rich text with AEM Headless. Finally, we’ll execute npm install in the backend folder. 5 is also available on the Software Distribution portal. Open a terminal in the client’s project folder and install the okta-angular dependency by running the following command. react project directory. Ensure you adjust them to align to the requirements of your project. With the Next. and operational stability Have a hands on experience on frontend technologies such as JavaScript, React, Redux, and GraphQL. These remote queries may require authenticated API access to secure headless content delivery. In this chapter, you explore how AEM’s GraphQL APIs can drive the experience in an external application. Last update: 2023-10-25. NOTE. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. This tutorial uses a simple native Android Mobile App to consume and display Event content exposed by AEM Content Services. 1_property=jcr:title group. Allowing for bulk delivery of exactly what is needed for rendering as the response to a single API query. To enable the corresponding endpoint: . html and add the following code to it. Sickfits is an opportunity to learn more about React, GraphQL and a host of other modern technologies (listed below) to stay on the cutting edge of web development. From the command line, run the React App $ cd ~/Code/aem-guides-wknd-graphql/react-app $ npm install $ npm startContent fragments in AEM enable you to create, design, and publish page-independent content. 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. npx create-next-app --ts next-graphql-app. GraphQL comes with default scalar types like Int, Float, String, Boolean and ID. GraphQL: APIs for humans. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. This simple React app uses the AEM Headless SDK to query AEM Headless APIs for an Adventure content,. Yes, AEM provides OOTB Graphql API support for Content Fragments only. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL IDE. Create Content Fragments based on the. 5. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. Tap in the Integrations tab. 3 - Explore GraphQL APIs; 4 - Build a React app; Advanced Tutorial. 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. Next, explore the power of AEM’s GraphQL API using the built-in GraphiQL Explorer. dev. 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. This method can then be consumed by your own applications. From the AEM Start menu, navigate to Tools > Deployment > Packages. Make a new folder. Authentication for Remote AEM GraphQL Queries on Content Fragments; AEM GraphQL API with Content Fragments - Sample Content and Queries; Hybrid and SPA AEM Development. The GraphiQLInterface component renders the UI that makes up GraphiQL. Since the SPA will render the component, no HTL script is needed. Create a Basic Project Structure. 5. 1" } } Then, run the following command, and there should be no errors. Contributions. The completed SPA, deployed to AEM, can be dynamically authored with traditional in. For demonstration — WKND and REACT sample. Solved: I am unable to consume response from AEM to React application. Incrementally adoptable: Drop Apollo into any JavaScript app and incorporate it feature by feature. Manage GraphQL endpoints in AEM. Storing rate-limiting data. To use GraphQL in AEM, you will need to create a GraphQL endpoint in AEM. The application uses two persisted queries: wknd/adventures-all persisted query, which returns all adventures in AEM with an abridged set of properties. This post could easily be a recounting of every single lesson I learned during this project (GraphQL, React Hooks, React Context, SSL, etc. 1. all: Using the all policy is the best way to notify your users of potential issues while still showing as much data as possible from your server. This multi-part tutorial walks through the implementation of a React application for a fictitious lifestyle brand, the WKND. All the AEM concepts required to work on real world projects. The idea is to define several GraphQL schemas, and tell the server which one to use on runtime, based on the requested endpoint. In this video you will: Learn how to create and define a Content Fragment Model. Tap Home and select Edit from the top action bar. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to query adventure data. 1. This persisted query drives the initial view’s adventure list. For over a decade, she has taught. One of Gatsby’s main strengths is the ability to query data from a variety of sources in a uniform way with GraphQL. To work with GraphQL, we require a few dependencies. This persisted query drives the initial view’s adventure list. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. Enabling GraphQL in AEM. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment. The GraphQL query for this takes an argument which specifies the ID of the book to retrieve. This same REACT_APP_AEM_HOST environment variable is used to initialize the AEM Headless client used by useAdventureByPath(. Then you'll have books as a list of { data: book: { title } }. When I move the setup the AEM publish SDK, I am encountering one issue. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. The Single-line text field is another data type of Content Fragments. GraphQL is the developer-friendly query language for the modern web. Integrate with AEM; Advanced. Run the following command to build and deploy the entire project to AEM: $ mvn. For a step-by-step guide to creating your own SPA, see the Getting Started with the AEM SPA Editor - WKND Events Tutorial. Tutorials. It is possible to merge (combine) multiple gql queries into one with interpolation (credit to @maxdarque): const fieldsOnBook = gql` fragment fieldsOnBook on Book { id author. Client type. You will use configure Apollo Client and then the useQuery to. 5 or later; AEM WCM Core Components 2. The VLT tool has similar functions as source control system client (such as a Subversion (SVN) client), providing normal check-in, check-out and management operations, and. Community driven: Share knowledge with thousands of developers in the GraphQL community. allowedpaths specifies the URL path patterns allowed from the specified origins. TIP. Learn how to create a SPA using the React JS framework with AEM's SPA Editor. Intermediate Developer Welcome to this tutorial chapter where we will explore configuring a React app to connect with Adobe Experience Manager (AEM) Headless. x. In CRXDE Lite, select Tools from the toolbar, then Query, which opens the Query tab. 6. Direct message the job poster from eJAmerica. The naming of the keys in the colors map tries to align closely with the names of the class. NOTE: You can also use the Okta Admin Console to create your app. Not only can you use it to fetch remote data with GraphQL, which we're. This is a multi-part tutorial and it is assumed that an AEM author environment is available. Based on the input data model, it auto-generates the GraphQL schema, all resolvers, and the database stack. Before calling any method initialize the instance with GraphQL endpoint, GraphQL serviceURL and auth if needed Typedefs Model: object . This schema will receive and. GraphQL variables?: To better understand GraphQL variables and how they work, I recommend reading “The Anatomy of a GraphQL Query“. This tutorial will introduce you to the fundamental concepts of GraphQL including −. This can be done through either npm or yarn. 5 has enhanced its digital customer experience services by providing better content personalization, content fragment enhancements, and easier authoring. A simple React app is used to query and display Team and Person content exposed by AEM’s GraphQL APIs. We will build a Next. Select Edit from the mode-selector in the top right of the Page Editor. For example, a URL such as:With Adobe Experience Manager (AEM) as a Cloud Service, Content Fragments lets you design, create, curate, and publish page-independent content. In this article, we will learn how to make Graphql calls in React Native apps. React Query + Fetch API. Developer Console is accessed per AEM as a Cloud Service. Develop Single-Page Applications with React in AEM is a 2-day, instructor-led (classroom or virtual) course, formerly known as Getting Started with Single-Page App Editor v6 and is relevant for all deployment methods. Say goodbye to glue code, and hello to our unified GraphQL data layer! Learn More. Improve this answer. Next, you can start to frame out your web application. Contributing . Step 4 — Setting Up the React App. Overview; 1 - Content modeling; 2 - AEM Headless APIs and. The tutorial intended to illustrate how a Remote SPA, or a SPA running outside the context of AEM, can be. Create a single Cache instance and use the component Provider to. Project Setup. You could use it with Angular, Vue, React or even native iOS and Android applications. json extension. aem-guides-wknd. Clients can send this identifier instead of the corresponding query string, thus reducing request. Build ReactJS (with Apollo Client library) and jQuery client applications to consume the API. 5. Related. jar. This setup establishes a reusable communication channel between your React app and AEM. Filtering, Pagination & Sorting. Courses Recommended courses Tutorials Certification Events Instructor-led training Browse content library View all learning options. 0 versions enable the GraphQL runtime platform to expose the Content Fragments through GraphQL API. Content Fragments in AEM provide structured content management. TIP. In this video you will: Learn how to create and define a Content Fragment Model. We are going to spin off a simple GraphQL server using express-graphql and get it connected to a MySQL database. Following AEM Headless best practices, the React application uses AEM GraphQL persisted queries to query adventure data. Expertise in designing and developing responsive web pages that meet the needs of users on all devices. In AEM 6. It offers several features that make AEM development easier: Seamless integration with AEM instances through Eclipse Server Connector. A “Hello World” Text component displays, as this was automatically added when generating the project from the AEM Project archetype. Contribute to adobe/aem-react-spa development by creating an account on GitHub. The content for the editable areas is enabled by AEM content. Next, we’ll use the AEM Headless SDK to retrieve Content Fragment data from AEM’s GraphQL APIs. “Really, it’s speed and agility that’s going to take you to the next level, rather than the technology itself. An end-to-end tutorial illustrating how to build-out and expose content using AEM Headless. This tutorial walks through the implementation of a Angular application for a fictitious lifestyle brand, the WKND. Provides a link to the Global Navigation. It also allows AEM Authors to use Product and Category Pickers and the Product Console to browse through product and. ELEKS SOFTWARE UK LIMITED. We start by installing it: yarn add graphql. value=My Page group. Before going to. GraphQL API. We will be using GitHub Graphql APIs and apollo to show it. day. or and p. Currently t he GraphQL feature is enabled by default only on the AEM SDK from 2021-02-04 or newer on AEM as Cloud Service. Learn how to be an AEM Headless first application. React can be easily integrated with other tools and libraries, such as Redux for state management, React Router for routing, and GraphQL for data fetching. A query language for your API. Welcome to a multi-part tutorial designed for developers new to Adobe Experience Manager (AEM). Prerequisites. AEM content fragments are based on Content Fragment Models [i] and. $ cd aem-guides-wknd-spa. If you have created your project with create-react-app, all the dependencies should be there when you run npm install. Using the Content Fragment Editor to include an image and reference to another fragment in a multi-line text field. Run the following command to build and deploy the entire project to AEM: $ mvn clean install -PautoInstallSinglePackage. js initializes and exports the AEM Headless Client used to communicate with AEM; src/api/usePersistedQueries. Brands have a lot of flexibility with Adobe’s CIF for AEM. This is a multi-part tutorial and it is assumed that an AEM author environment is available. Tap Get Local Development Token button. js application run from the command line to update asset metadata on AEM as a Cloud Service using Assets HTTP API. AEM provides a Translation Integration Framework for headless content, allowing Content Fragments and supporting assets to be easily translated for use across locales. javascript mysql api graphql cms app node typescript sql database dashboard vue sqlite postgresql oracle data-visualization mssql directus headless-cms no-codeSaved searches Use saved searches to filter your results more quicklyThe Explorer accepts a colors prop as a map of the class names in GraphiQL's css to hex colors. AEM React Core Components uses features of React Router to implement the Navigation component used in the previous steps. Next, we need to initialize the wizard and go through the steps: yarn graphql. Learn how to query a list of. src. Sling Models are annotation driven Java “POJO’s” (Plain Old Java Objects) that facilitate the mapping of data from the JCR to Java variables. ) custom useEffect hook used to fetch the GraphQL data from AEM. It saves both data and errors into the Apollo Cache so. all-2. The completed SPA, deployed to AEM, can be dynamically authored with traditional in-line editing tools of. The I18n class provides the get method that retrieves localized strings from the Adobe Experience Manager (AEM) dictionary. Solved: Hi Team, AEM : 6. 0. With CRXDE Lite,. Cloud Manager Onboarding Playbook; Cloud Manager Environment Types; Cloud Manager UI; AEM. When using a JavaScript server, a convenient way to achieve this is with. Add the CUD part of CRUD to Your GraphQL Node. Install Required Dependencies. 13+. 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. The application uses two persisted queries: wknd/adventures-all persisted query, which returns all adventures in AEM with an abridged set of properties. 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. Due to he missing features and non-standard and poorly documented syntax in the AEM graphQL implementation, we abandoned it, and use servlets + queryBuilder instead. The configured AEM service’s host/domain is then used to construct the AEM GraphQL API URLs and Image URLs. Docs. or=true group. Getting Started with the AEM SPA Editor and React. A simple React app is used to query and display Team and Person content exposed by AEM’s GraphQL APIs. A persisted query is a query string that's cached on the server side, along with its unique identifier (always its SHA-256 hash). js project ready, open a terminal window at the root of the application and install both Nexus Schema and Prisma. The query could look like this: query GetAlbumById { album (id: "1") { title genre artist { name } } } And in the resolver on the server, we’d pull the id value out from args and use it to filter our data. All the authoring aspects including components, templates, workflows, etc. The schema defines the types of data that can be queried and. In such cases there is the danger that multiple copies of the same JS library may be included in the final HTML output. Part 2: Setting up a simple server. Topics: Content Fragments. extract-files; is-plain-obj; react-waterfall-render; Polyfill any required globals (see Requirements) that are missing in your server and client environments. Starting with version 6. Once headless content has been translated, and. First, build a GraphQL type schema which maps to your codebase. Author in-context a portion of a remotely hosted React application. This React application demonstrates how to query content using AEM's GraphQL APIs using persisted queries. For an overview of how a simple SPA in AEM is structured and how it works, see the getting started guide for both React and Angular. The execution flow of the Node. GraphCommerce® is a headless storefront replacement for Magento 2 (PWA), that delivers a faster, better user experience. Browse the following tutorials based on the technology used. js example (often outdated as the Next. The basic operation of queries with GraphQL for AEM adhere to the standard GraphQL specification. View the source code on GitHub. Overview; 1 - Content modeling; 2 - AEM Headless APIs and. Kotlin: Get Started. Locate the Publish Service (AEM & Dispatcher) link Environment Segments table; Copy the link’s address, and use it as the AEM as a Cloud Service Publish service’s URI; In the IDE, save the changes to . . Updating your Content Fragments for optimized GraphQL Filtering; Authentication for Remote AEM GraphQL Queries on Content Fragments; AEM GraphQL API with Content Fragments - Sample Content and Queries; Hybrid and SPA AEM Development. Similarly, the @include directive can be used to include a field based on the value of the if argument. About the tutorial. The GraphiQL Explorer tool enables developers to create, and test queries against content on the current AEM environment.