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.

npx shopify hydrogen dev

yarn shopify hydrogen dev

pnpm shopify hydrogen dev

With the development server running, navigate to the /graphiql path on your local development server (such as http://localhost:3000/graphiql).

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:

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('/');
}