GraphiQL explorer

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

Anchor to RequirementsRequirements

Make sure you have the following environment variables in place:

PUBLIC_STORE_DOMAIN
PUBLIC_STOREFRONT_API_VERSION
PUBLIC_STOREFRONT_API_TOKEN

Anchor to GraphiQLGraphiQL

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

Terminal

npx shopify hydrogen dev

yarn shopify hydrogen dev

pnpm shopify hydrogen dev

npx shopify hydrogen devyarn shopify hydrogen devpnpm shopify hydrogen dev

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:

Optional route for GraphiQL

<root>/app/routes/graphiql.jsx

import {graphiqlLoader} from '@shopify/hydrogen';

import {redirect} from '@shopify/remix-oxygen';

export async function loader(args) {

if (process.env.NODE_ENV === 'development') {

// Default Hydrogen GraphiQL behavior

return graphiqlLoader(args);

}

return redirect('/');

}

import {graphiqlLoader} from '@shopify/hydrogen';

import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';

export async function loader(args: LoaderArgs) {

if (process.env.NODE_ENV === 'development') {

// Default Hydrogen GraphiQL behavior

return graphiqlLoader(args);

}

return redirect('/');

}

import {graphiqlLoader} from '@shopify/hydrogen';
import {redirect} from '@shopify/remix-oxygen';

export async function loader(args) {
  if (process.env.NODE_ENV === 'development') {
    // Default Hydrogen GraphiQL behavior
    return graphiqlLoader(args);
  }

  return redirect('/');
}

import {graphiqlLoader} from '@shopify/hydrogen';
import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';

export async function loader(args: LoaderArgs) {
  if (process.env.NODE_ENV === 'development') {
    // Default Hydrogen GraphiQL behavior
    return graphiqlLoader(args);
  }

  return redirect('/');
}

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.

Was this page helpful?