GraphQL Explorer

Exploring the Shopify APIs from your Nuxt dev server

The Nuxt Shopify module mounts a GraphQL explorer for each API client that you can access in development mode to explore and test your GraphQL queries.

When starting the Nuxt development server you can then access each explorer in your browser:

Explorers are only registered in dev mode, and they are unauthenticated: anyone who can reach your dev server can run queries against the configured clients, including the Admin API. Set explorer: false on the admin client (or bind the dev server to localhost only) when sharing your dev server over a tunnel or a local network.

By default, each client mounts an explorer when running in dev mode. You can customize this behavior by setting the explorer option in the client config:

~/nuxt.config.ts

export default defineNuxtConfig({
  shopify: {
    clients: {
      storefront: {
        explorer: true,
      },
      customerAccount: {
        explorer: false,
      },
      admin: {
        explorer: true,
      },
    },
  },
})

The explorer UI is currently rendered by graphql-yoga. The explorer option describes the capability rather than the renderer, so swapping it out later will not change your config.

Edit this pageorReport an issue

Hooks

Hooks for the Nuxt Shopify module

Webhooks

Using Webhooks with Shopify in Nuxt