Set up the GraphQL playgrounds to test published content

The GraphQL playground (also called the GraphQL IDE) helps you test GraphQL queries before you use them in your application. You can use either of two playgrounds, with a similar interface, to run your queries:

Delivery API playground - uses the Delivery API. You query your published content in Experience Edge.
Preview API playground - uses the Preview API. You query your content management instance, regardless of what is published to Edge.

Additionally, you can use the same interface to manage and author content in the CM instance. We recommend you use the content management and authoring IDE only on nonproduction environments.

The Delivery API playground for Sitecore XM Cloud.

Set up the Delivery API playground

The Delivery API is a GraphQL API that provides access to content that is published to Experience Edge.

To use the Delivery API playground:

Open the XM Cloud Deploy app Projects tab.
Click the relevant project.
Click the environment where you want to use the Delivery API.
On the Details tab, click Generate Delivery API token, and copy the token.

Note

This is the same token you use for authentication when you call the Delivery API.
Under Live GraphQL IDE (Experience Edge), click Launch IDE. The Delivery API IDE opens.
On the HTTP HEADERS tab, add {"sc_apikey":"YOUR-API-TOKEN"}, replacing YOUR-API-TOKEN with your Delivery API token. For example: {"sc_apikey":"NSsvWUNaWk9..."}.

You can now run GraphQL queries to test your published content.

Set up the Preview API playground

The Preview API IDE provides the same functionality as the Delivery playground, but it runs against content in your content management instance.

To use the Preview API playground:

Open the XM Cloud Deploy app Projects tab.
Click the relevant project.
Click the environment where you want to use the Preview API.
On the Details tab, click Generate Preview API token, and copy the token.

Note

You can also get the Preview API token by opening the Content Editor and navigating to /sitecore/system/Settings/Services/API Keys/xmcloudpreview. The Preview API token is the item ID of the xmcloudpreview item. If you delete or modify this item, you might break the Generate Preview API token button.
Under Preview GraphQL IDE, click Launch IDE. The Preview API IDE opens.

Note

You can open the IDE manually by navigating to https://<your host>/sitecore/api/graph/edge/. If you're developing locally, you can use your local host.
On the HTTP HEADERS tab, add {"sc_apikey":"YOUR-API-TOKEN"}, replacing YOUR-API-TOKEN with your Preview API token. For example: {"sc_apikey":"NSsvWUNaWk9..."}.

You can now run GraphQL queries to test the content in your content management instance.

Example query

You can start using the playground by running a query similar to this one, to return the first 10 pages (routes) in English of "site1", with their paths and item IDs:

RequestResponse

query { 
  layout(language: "en", routePath: "/", site: "site1") { 
    item { 
      rendered 
    } 
  } 
  site { 
    siteInfoCollection { 
      name 
      routes(first: 10, language: "en") { 
        results { 
          routePath 
          route { 
            id 
          } 
        } 
      } 
    } 
  } 
}

Do you have some feedback for us?

If you have suggestions for improving this article,