For convenience, Hydrogen includes a local GraphiQL explorer to help you create queries and learn about Shopify's [Storefront API](https://shopify.dev/api/storefront).

## Requirements

Make sure you have the following [environment variables](/docs/storefronts/headless/hydrogen/environments#environment-variables) in place:

- `PUBLIC_STORE_DOMAIN`
- `PUBLIC_STOREFRONT_API_VERSION`
- `PUBLIC_STOREFRONT_API_TOKEN`

## GraphiQL

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


```bash?title: 'npm'
npx shopify hydrogen dev
```

```bash?title: 'Yarn'
yarn shopify hydrogen dev
```

```bash?title: 'pnpm'
pnpm 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:


```jsx?filename: '<root>/app/routes/graphiql.jsx', title: 'JavaScript'
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('/');
}
```

```tsx?filename: '<root>/app/routes/graphiql.tsx', title: 'TypeScript'
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.