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

ExpandOn this page

* [Requirements](https://shopify.dev/docs/storefronts/headless/hydrogen/data-fetching/graphiql.md#requirements)
* [Graphi​QL](https://shopify.dev/docs/storefronts/headless/hydrogen/data-fetching/graphiql.md#graphiql)

# GraphiQL 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/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

```terminal
npx shopify hydrogen dev
```

```terminal
yarn shopify hydrogen dev
```

```terminal
pnpm shopify hydrogen dev
```

##### npm

```
npx shopify hydrogen dev
```

##### Yarn

```
yarn shopify hydrogen dev
```

##### 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:

## Optional route for GraphiQL

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

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

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

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

##### 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.

***

* [Requirements](https://shopify.dev/docs/storefronts/headless/hydrogen/data-fetching/graphiql.md#requirements)
* [Graphi​QL](https://shopify.dev/docs/storefronts/headless/hydrogen/data-fetching/graphiql.md#graphiql)