Graph Playground

Explore a GraphQL schema before writing code#

Graph Playground is the read-only GraphQL explorer in Contoprix Admin. It helps developers inspect the current schema, generate a starter query, provide variables, run the query, and inspect the response without first building an application page.

Open it from Content Studio -> Developer Tools -> Graph Playground.

What you need#

1. An admin user with the developer/API-client viewing permission.
2. The correct website and language selected in Admin.
3. A delivery credential with the graphql:read scope for that website.

Graph Playground asks for the GraphQL delivery key and keeps it in the current browser tab's session storage. It is masked in the UI, cleared when the tab closes, and is sent only with the GraphQL requests you run. Still, use a least-privilege key and do not paste production secrets into screenshots or shared notes.

First query in five steps#

1. Select the intended website and language.
2. Paste the GraphQL delivery key in the Headers area.
3. Load the schema, when schema discovery is available in the environment.
4. Choose a sample query such as Site, Navigation, or Page by path.
5. Review the variables, run the query, and inspect the Data, Errors, or Raw response tabs.

Start with a stable query that does not assume a tenant-specific content type:

query PlaygroundSite {
  site {
    id
    name
    domain
    defaultLanguageCode
  }
}

Then try a page:

query PageByPath($path: String!, $locale: String) {
  page(path: $path, locale: $locale) {
    id
    name
    slug
  }
}

{ "path": "/", "locale": "en" }

Understand the schema browser#

The site, navigation, page, and pageById roots are stable. Content-type roots are generated from the active content model, so the list differs per tenant.

For example, a content type code of blog_post becomes a likely blogPost root. The exact fields and whether it is a singleton or collection are determined by the live schema. The playground can generate a starting query from the real fields instead of making you guess them.

Standard public GraphQL introspection is enabled in development by default and disabled in production by default. That means the Playground can still run a known query in production, but its schema browser may not be able to load the schema there. For production code generation, use:

npx contoprix graphql sync

The CLI uses the separate, scope-gated GraphQL schema export and needs schema:read.

Work with a content collection#

Suppose the active schema contains an article collection. A collection root returns a connection:

query Articles($locale: String, $after: String) {
  article(first: 5, after: $after, locale: $locale) {
    nodes {
      id
      title
      slug
    }
    totalCount
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

The title and slug selections are examples. Check the schema before using them. To request the next page, paste the previous response's endCursor into the after variable.

Reading the response#

A GraphQL request can return both data and errors. That can mean one nullable field failed while the rest of the query succeeded. Review the error path before deciding whether the UI can use the partial data.

Safe Playground habits#

• Use a development or staging website for exploration whenever possible.
• Check that the key resolves to the same website selected in the interface.
• Start small: ask for a page ID and name before requesting nested blocks and relations.
• Use variables instead of hard-coding changing values in the query text.
• Copy a reviewed query into server-side application code, not a browser bundle.
• Keep page sizes small; collection first is capped at 100.
• Graph Playground is read-only. It blocks mutation operations even if a schema later exposes them.

Common problems#

When your query is ready, move it into a server-side integration using the GraphQL guide or the typed GraphQL CLI workflow.