graphiql
utility
This function creates an instance of GraphiQL 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.
Anchor to ArgumentsArguments(
Arguments(
Anchor to Arguments-parametersParameters
- Anchor to argsargsLoaderFunctionArgs<any>required
Anchor to Arguments-returnsReturns
Promise<Response>
GraphiQLLoader
- args
LoaderFunctionArgs<any>
Promise<Response>type GraphiQLLoader = (args: LoaderFunctionArgs) => Promise<Response>;Was this section helpful?
Example code
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('/');
}
examples
Example code
description
I am the default example
JavaScript
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
import {graphiqlLoader} from '@shopify/hydrogen'; import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen'; export async function loader(args: LoaderFunctionArgs) { if (process.env.NODE_ENV === 'development') { return graphiqlLoader(args); } return redirect('/'); }