GraphQL Codegen

Overview

shopify-app-nuxt can auto-generate TypeScript types from your Shopify Admin API GraphQL queries. When enabled, the module fetches the Admin API schema via introspection during nuxt prepare and generates typed definitions using @shopify/graphql-codegen.

Generated types are importable via #shopify/types/<version>/admin.

Setup

1. Install peer dependencies

bun add -d @graphql-codegen/cli @shopify/graphql-codegen graphql

2. Enable codegen in your config

export default defineNuxtConfig({
  modules: ['shopify-app-nuxt'],

  shopify: {
    apiKey: '...',
    apiSecretKey: '...',
    appUrl: '...',

    // Generate types for the default apiVersion
    codegen: true

    // Or specify multiple API versions
    // codegen: ['2025-10', '2026-01'],
  }
})

3. Add store credentials

The module needs to introspect your store's Admin API to fetch the schema. Add these environment variables to your .env:

SHOPIFY_CODEGEN_STORE_DOMAIN=your-store.myshopify.com
SHOPIFY_CODEGEN_ADMIN_ACCESS_TOKEN=shpca_xxxxx

You can obtain an Admin API access token from a custom app in your Shopify store settings, or from the Shopify Partners Dashboard.

4. Generate types

bun run dev:prepare

The module will:

1. Fetch the Admin API schema via GraphQL introspection
2. Scan your server/**/* and app/**/* files for #graphql tagged queries
3. Generate typed .d.ts files in .nuxt/types/shopify/
4. Register #shopify/types/<version>/admin aliases

Usage

Once types are generated, import them in your server routes or composables:

import type { GetProductsQuery } from '#shopify/types/2026-01/admin'

export default defineEventHandler(async (event) => {
  const { admin } = await useShopifyAdmin(event)

  const response = await admin.graphql(`#graphql
    query GetProducts {
      products(first: 10) {
        nodes {
          id
          title
          description
        }
      }
    }
  `)

  const data: GetProductsQuery = await response.json()
  return data
})

Multiple API versions

If your app needs to support multiple API versions (e.g., during migration), pass an array:

export default defineNuxtConfig({
  shopify: {
    codegen: ['2025-10', '2026-01']
  }
})

Each version gets its own alias:

import type { GetProductsQuery as V2025 } from '#shopify/types/2025-10/admin'
import type { GetProductsQuery as V2026 } from '#shopify/types/2026-01/admin'

Caching

Schemas are cached in .nuxt/shopify-schema/ after the first fetch. Subsequent nuxt prepare runs will reuse the cached schema and skip the network request.

To force a re-fetch, delete the cache directory:

rm -rf .nuxt/shopify-schema
bun run dev:prepare

How it works

Graceful degradation

The codegen step is non-blocking. If any of the following are missing, the module warns and continues without generating types:

• Peer dependencies not installed
• Store credentials env vars not set
• Shopify API returns an error (invalid token, network issue)

Your app will still build and run — you just won't have the generated types until the issue is resolved.