graphiql
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 argsargsDataFunctionArgsrequired
Anchor to Arguments-returnsReturns
Promise<Response>
Examples
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 LoaderArgs} from '@shopify/remix-oxygen'; export async function loader(args: LoaderArgs) { if (process.env.NODE_ENV === 'development') { return graphiqlLoader(args); } return redirect('/'); }
Was this page helpful?