GraphQL Playground

The GraphQL Playground link under Tools opens GraphiQL – the standard interactive GraphQL IDE, with a schema explorer, a documentation panel, and saved query history. It points at the same /graphql endpoint your website calls, so it’s where you explore the schema, draft a query, and confirm the exact response shape before wiring it into your site.

What you’re querying

The playground talks to your site’s public GraphQL API – the same schema, endpoint, and viewer root documented in GraphQL API. It is not a separate admin console.¹¹Fontdue does run a separate admin GraphQL API at /admin/graphql, with a different and larger schema, but the playground doesn’t point there and that API isn’t documented yet. The createAdminToken mutation you’ll see in the schema is the bridge to it – it mints a short-lived bearer token that authenticates against the admin API.

You do have to be signed in to the admin to open the page, and that session does ride along on every request the playground makes – but it doesn’t switch you to a different schema or unlock admin-only data. What the session changes is visibility: the playground reveals catalog entries you’ve hidden from the public storefront – the same content storefront preview shows – that an anonymous request wouldn’t return.²²The queries go to the public /graphql endpoint carrying your browser session. The public schema reads your admin identity from that session only to reveal hidden catalog content (controlled by the fontdue-preview header – see Previewing hidden content) and to resolve the createAdminToken bridge – not to grant the broad read and write access the admin API has. Everything stays scoped to your store, so you’re always working against your own data.

Reading data

The main read root is viewer, the same entry point your site fetches from. Through it you reach everything your storefront exposes: your catalog, pages, articles, licenses, order variables, the storefront settings, the current cart, and the signed-in customer if there is one.

What you can’t read here is the admin’s view of your store – every order, every customer record, account-level settings. That data lives behind the separate admin API, not the public schema, so it isn’t reachable from the playground.

Running mutations

The mutations in this schema are the storefront and customer ones, not admin create/update/delete operations. They cover the flow a shopper goes through: building a cart (createOrderItems, updateOrder), applying and removing discounts (applyCoupon, removeDiscount), checking out (createOrderCheckoutSession, createOrderSnapshot, completeOrder), customer login and profile (login, updateCustomer), and library subscriptions (startLibraryStripeSubscriptionTrial, createLibraryStripeCheckoutSession).

These are real, though – running them outside test mode can create a genuine order or change a real customer record, exactly as if the action had come from your storefront. Before running a mutation that writes data, switch the store into test mode so nothing lands against live records.

Using GraphiQL

When GraphiQL opens, the documentation explorer – the book icon in the sidebar – holds the full schema; click through types and fields to see what’s available, or use the Explorer plugin to build a query by checking boxes. Write or paste a query into the left editor and press the run button (or ⌘/Ctrl + Enter). The variables and headers editors sit at the bottom, and your past queries are kept under the history tab.

A good starting point is viewer – expand it in the explorer to see the catalog, pages, settings, and current-cart fields your site reads from.

Taking a query to your site

Because the playground runs against the same public schema your site uses, a query you’ve drafted and verified here works unchanged in your own code. Once it returns what you expect, move it across – see Query the GraphQL API for the fetchGraphql helper and the generated types that wire it up.