• Requirements
  • GraphiQL

GraphiQL explorer

For convenience, Hydrogen includes a local GraphiQL explorer to help you create queries and learn about Shopify's Storefront API.

Requirements

Anchor link to section titled "Requirements"

Make sure you have the following environment variables in place:

  • PUBLIC_STORE_DOMAIN
  • PUBLIC_STOREFRONT_API_VERSION
  • PUBLIC_STOREFRONT_API_TOKEN

GraphiQL

Anchor link to section titled "GraphiQL"

The GraphiQL interface is available by default when running the Hydrogen CLI in development mode.

With the development server running, go to /graphiql in your browser.

If you're not using the Hydrogen CLI, or want to customize the GraphiQL interface, you can do so by creating a graphiql route in your project:

Note

If you’re creating your own graphiql route, then make sure it's not available in production. You can use process.env.NODE_ENV to enforce tree-shaking.

On this page

  • Requirements
  • GraphiQL