logo
logo

GraphQL IDEs

The GraphQL IDEs help you with sending requests to the GraphQL server and facilitate data retrieval. They support the query function of the GraphQL language.

The GraphQL IDEs provide real-time syntax and error highlighting. As you type, GraphQL gives you snippets of the schema documentation, so you know what you are adding to your query.

With these IDEs, you can see all of your organization's data sources as one connected data graph always up to date.

There is a GraphQL IDE built on top of the Preview API and the Delivery API with additional features such as automatic schema reloading.

Important

You need a valid authentication to use the IDEs.

The Sitecore GraphQL integrated development environment (IDE) with Content Hub provides:

  • a Preview API IDE
  • a Delivery API IDE
  • syntax and error highlighting
  • automatic schema reloading
  • a running history of your queries
  • an autocomplete feature
  • a DOCS tab where you can find all the information about parameters.
  • code formatting using Prettify
Note

You cannot use mutations in the Sitecore Content Hub implementation of GraphQL.

Preview API IDE

The Preview API IDE uses the Preview API. It runs live against your Content Hub instance. It allows access to all your content, including drafts and other content that is still not approved.

Delivery API IDE

The Delivery API IDE uses the Delivery API. It has an identical schema to the Preview API IDE. It is hosted on the Delivery Platform and provides access only to approved and published content.

History

GraphQL IDEs keep a running history of your queries. You can even star queries to keep them at the top of your history if you use them repeatedly.

To star a query:

  1. In the IDE, select History.
  2. To select the desired query, click the star.
  3. Click Use:

Prettify

Prettify formats your query by adding the correct indentation.

Autocompletion

The IDEs have an autocomplete feature, so you can intuitively find the fields you need. It provides syntax highlighting, linting, autocomplete, and navigating to fragments.

Schema

In the Schema tab, you can get details of the defined schema. The following screenshot shows the SCHEMA displayed on the right-hand side of the IDE:

To download the schema:

  1. On the top-right corner, click Download.

  2. Select a schema download format:

    • JSON
    • SDL

Docs

The GraphQL IDEs display the documentation available for GraphQL. It is interactive, viewable in multiple columns, with 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.

As you step into a field and its subfields, the explorer keeps track of your current path within the schema.

To see more details about the queries, on the documentation column, click the DOCS tab.

The following screenshot displays the allM_Asset query, including the types and arguments:

There are two main functions you can use in the DOCS:

FunctionDescription
Find the schema field you are looking forYou search for a field by its name, for example, asset. The interface helps you differentiate between fields with the same name. The search is fuzzy, so it works even if you do not know a field's exact spelling.
Find the ideal path to that field from your schema's entry pointsAfter you identify a type-field pair, the explorer lists all the paths to that field that start at your schema's entry points. These paths are ordered by depth.

Query variables

In the client code, you can pass different values as arguments instead of reconstructing a new query. You can add your query variables under the QUERY VARIABLES tab of the IDE.

In the following screenshot, we create the hasComplexRights query variable as a Boolean set to true. Then, we use this variable in the assetComplexDRM query.

Can we improve this article ? Provide feedback