GraphQL IDE

The GraphQL integrated development environment (IDE) supports the Graph QL query function and improves your development workflow by making it easier to develop queries. With real-time syntax and error highlighting, and with snippets of the schema documentation, you know what you are adding to your query.

Important

You need a valid API key to use the IDEs. You can create and manage API keys using either the Content Hub ONE app or the Content Management API.

A GraphQL IDE is available for:

  • The Preview API, which allows access to all your content, including drafts and other content that is not yet approved.

  • The Delivery API, which has an identical schema to the Preview API IDE, but only provides access to approved and published content.

Features of the GraphQL IDE

The Sitecore GraphQL IDE uses GraphQL Playground, which provides the following features.

Feature

Description

Query History

The GraphQL IDE keeps a history of your queries.

Bookmarks

You can bookmark queries you use often, keeping them at the top of your history and marking them with a star icon.

Prettify

Prettify formats your query by adding the correct indentation.

Autocompletion

The Autocomplete feature helps you intuitively find the fields you need. It provides syntax highlighting, linting, autocompletion, and navigation to fragments.

SCHEMA tab

The SCHEMA tab gives you access to the defined schema.

DOCS tab

The DOCS tab displays the documentation available for GraphQL. It is interactive, viewable in multiple columns, and has native keyboard support. Using the DOCS tab, you can find all the information about the parameters that the query expects and what fields you can specify for the response.

Variables

You can pass values as arguments instead of reconstructing a new query. You can add your query variables on the QUERY VARIABLES tab in the IDE.

Using the DOCS tab in the GraphQL IDE, you can perform the following actions:

Action

Description

Find a specific schema field.

Searches for a field by name. The interface helps you differentiate between fields with the same name. The search is fuzzy, meaning it can return fields based on an approximate spelling if the exact one is not known.

Find the ideal path to a field from the schema’s entry points.

After identifying a type-field pair, the explorer can list all paths to that field, starting at the schema’s entry points. Paths are listed in depth order.

Do you have some feedback for us?

If you have suggestions for improving this article,