---
title: graphiqlLoader
description: >-
  This function creates an instance of
  [GraphiQL](https://graphql.org/swapi-graphql) in your Hydrogen app when
  running on a development server. This enables you to explore, write, and test
  GraphQL queries using your store's live data from the Storefront API. You can
  visit the GraphiQL app at your storefront route /graphiql. Learn more about
  [using GraphiQL in
  Hydrogen](/docs/custom-storefronts/hydrogen/data-fetching/graphiql).
api_version: 2023-07
api_name: hydrogen
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/2023-07/utilities/graphiqlloader'
  md: 'https://shopify.dev/docs/api/hydrogen/2023-07/utilities/graphiqlloader.md'
---

# graphiql​Loaderutility

This function creates an instance of [GraphiQL](https://graphql.org/swapi-graphql) in your Hydrogen app when running on a development server. This enables you to explore, write, and test GraphQL queries using your store's live data from the Storefront API. You can visit the GraphiQL app at your storefront route /graphiql. Learn more about [using GraphiQL in Hydrogen](https://shopify.dev/docs/custom-storefronts/hydrogen/data-fetching/graphiql).

## Arguments([args](#arguments-propertydetail-args)​)

### Parameters

* args

  DataFunctionArgs

  required

### Returns

* Promise\<Response>

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

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

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

    return redirect('/');
  }
  ```

  ##### TypeScript

  ```ts
  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') {
      return graphiqlLoader(args);
    }

    return redirect('/');
  }
  ```