Using the GraphiQL IDE graphiql-ide

An implementation of the standard GraphiQL IDE is available for use with the GraphQL API of Adobe Experience Manager (AEM).

The GraphiQL tool lets you test and debug your GraphQL queries by enabling you to:

You can access the query editor from either:

You can use GraphiQL on your system so that queries can be requested by your client application using GET requests, and for publishing queries. For production usage, you can then move your queries to your production environment. Initially to production author for validating newly authored content with the queries, and finally production publish for live consumption.

Selecting your endpoint selecting-endpoint

As a first step you need to select the Endpoint that you want to use for the queries. The endpoint is appropriate to the Sites configuration that you want to use for your queries.

This is available from the drop-down list at the top-right.

Creating, and persisting, a new query creating-new-query

You can enter your new query in the editor - which is in the middle-left panel, directly under the GraphiQL logo.

Just start typing, the editor also:

Use Save As to persist your new query.

Updating your persisted query updating-persisted-query

Select the query you want to update from the list in the Persisted Queries panel (far left).

The query is shown in the editor panel. Make any changes you need, then use Save to commit your updates to the persisted query.

Running queries running-queries

You can run a new query immediately, or you can load and run a persisted query. To load a persisted query, select it from the list - the query is shown in the editor panel.

In either case, the query showing in the editor panel is the query that will be executed when you either:

Query variables query-variables

The GraphiQL IDE also lets you manage your Query Variables.

For example:

Publishing persisted queries publishing-persisted-queries

Once you have selected your persisted query from the list (left panel) you can use the Publish and Unpublish actions. This will activate them to your publish environment (for example, dev-publish) for easy access by your applications when testing.

Copy URL to directly access the query copy-url

The Copy URL option lets you simulate a query, by copying the URL used to directly access the persisted query and see the results. This can then be used for testing; for example, by accessing in a browser:

For example:

http://localhost:4502/graphql/execute.json/global/article-list-01

By using this URL in a browser, you can confirm the results:

The Copy URL option is accessible via the three vertical dots to the right of the persisted query name (far left panel):

Deleting persisted queries deleting-persisted-queries

The Delete option is also accessible via the three vertical dots to the right of the persisted query name (far left panel).

Installing your Persisted Query on Production installing-persisted-query-production

After developing and testing your persisted query with GraphiQL, the final goal is to transfer it to your production environment for use by your applications.

Keyboard shortcuts keyboard-shortcuts

There are a selection of keyboard shortcuts that provide direct access to action icons in the IDE: