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:

  1. Open the XM Cloud Deploy app Projects tab.

  2. Click the relevant project.

  3. Click the environment you want to view the Delivery API for.

  4. 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.

  5. Open the Delivery API playground in a browser: https://edge.sitecorecloud.io/api/graphql/ide.

  6. On the HTTP Headers tab, paste the following, entering the copied token value as your own API key: {"sc_apikey":"YOUR-API-KEY"}.

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:

  1. In XM Cloud, on the Tools tab, launch the Content Editor.

  2. Navigate to /sitecore/system/Settings/Services/API Keys/xmcloudpreview.

  3. In the Item ID field, copy the value. This is your Preview API key.

    The Preview API API Key in Content Editor.
  4. Open the XM Cloud Deploy app Projects tab.

  5. Click the relevant project.

  6. Click the environment you want to view the Preview API for.

  7. On the Details tab, under Edge Preview Endpoint, 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.

  8. On the HTTP Headers tab, paste the following, entering your own Preview API key instead: {"sc_apikey":"YOUR-API-KEY"}.

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:

RequestResponsegraphql
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,