---
title: GraphiQL explorer
description: Explore and learn Shopify's Storefront API using the GraphiQL explorer.
source_url:
  html: >-
    https://shopify.dev/docs/storefronts/headless/legacy/hydrogen/data-fetching/graphiql
  md: >-
    https://shopify.dev/docs/storefronts/headless/legacy/hydrogen/data-fetching/graphiql.md
api_name: hydrogen
---

Legacy Hydrogen

These pages refer to Hydrogen versions 2026-04 and earlier. For versions 2026-10 and later, refer to the latest [Hydrogen docs](https://shopify.dev/docs/storefronts/hydrogen). If you're not using the latest version of Hydrogen, then we recommend that you migrate your storefront. To learn more, refer to [Migrate to the latest version of Hydrogen](https://shopify.dev/docs/storefronts/hydrogen/migrate).

# Graphi​QL explorer

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](https://shopify.dev/docs/storefronts/headless/legacy/hydrogen/environments#environment-variables) in place:

* `PUBLIC_STORE_DOMAIN`
* `PUBLIC_STOREFRONT_API_VERSION`
* `PUBLIC_STOREFRONT_API_TOKEN`

***

## Graphi​QL

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

## Terminal

##### npm

```terminal
npx shopify hydrogen dev
```

##### Yarn

```terminal
yarn shopify hydrogen dev
```

##### pnpm

```terminal
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:

## Optional route for GraphiQL

## \<root>/app/routes/graphiql.jsx

##### JavaScript

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

##### TypeScript

```tsx
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.

***