> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# BigCommerce GraphQL Tools

Plan: Developer Foundations

Lesson 5 of 28 · 30 min

Storefront API Playground

The Storefront API Playground is a testing tool that can be accessed from the control panel of a Stencil store. BigCommerce's GraphQL API uses the Storefront API Playground to let you run requests in the browser.

> **Info**
>
> The Storefront API Playground is our implementation of [GraphiQL](https://github.com/graphql/graphiql), which is a fairly common tool. Developers who have used GraphQL before should immediately be able to make the connection to their previous experience.

### Accessing the Storefront API Playground

To access the Storefront API Playground and documentation:

1. **Log in** to a BigCommerce store
2. **Navigate** to *Settings > API > Storefront API Playground*

![GraphQL Playground](/_fern-img/1cb6cd6f00da03f217f9df05c7e04382f3ac1272258369e24701bf6b0c1a0e19.webp)

> **Info**
>
> If the Storefront API Playground link is not visible, this may be because your store is not using a Stencil theme. Apply a Stencil theme to access the Storefront API Playground.

### Accessing the Storefront API Playground Manually

Accessing the Storefront API Playground manually (i.e., from [gql-playground.bigcommerce.com](https://gql-playground.bigcommerce.com/)) doesn't automatically connect to your store to the playground like the control panel flow does. Instead, this link is connected to the Buy Button Sample Store and can still be used to test out simple queries. You can still use this link to connect to your store, but you will need to provide your own Storefront API token, which is covered in the next module.

### How to Use the Storefront API Playground

To use the playground, input queries on the left side and then **click the** **play button**. Query results will be displayed on the right side:

![Query Example](/_fern-img/281ed8aac7ec9f4b2c6aed68e8db28772cfba9a51b63a73b4f9857bba8dca916.webp)

### View Documentation and Schema

To explore the storefront GraphQL schema, click on the **Docs** tab on the left side of the Storefront API Playground.

![View Docs and Schema](/_fern-img/c4e575c6356135467ad9ff067e01d8dc138ce7b2f45cc254c7c4528730492f3e.webp)

### GraphQL Storefront API Reference

The dynamic API reference available in the BigCommerce docs is an exhaustive and cross-linked list of the GraphQL Storefront API schema, including all queries, mutations, and types. This reference can be used to drill down easily from a top-level query or mutation to all fields and sub-fields below it.

* [GraphQL Storefront API Reference](/developer/api-reference/graphql/storefront#group-Operations-Queries)

### Example: Building a Query

Using the Docs tab and the API reference, you can determine the structure of any query. For example, the structure of the query for `categoryTree` would be:

```graphql showLineNumbers={false}
query{
  site{
    categoryTree{
      entityId
      name
      description
      productCount
      hasChildren
    }
  }
}
```

Use the GraphQL Playground to run the query and see what information you receive.

![GraphQL Playground Demo](/_fern-files/bigcommerce.docs.buildwithfern.com/063724500579b23594344155b4ce7f49b9000abbec92923f75746373177fb765/assets/learn/graphql-storefront-api/playgroundexample.gif)

> **Info**
>
> **Pro Tip!**
>
> Use the command **option + space bar (Mac OS) or control + space bar (Window OS)** when writing a query in the GraphQL Playground to view possible sub-selections.