Editor

To get the best developer experience when working with the Nuxt Shopify module, set up your IDE to understand the GraphQL schemas provided by Shopify. You then get autocompletion, validation, and hover documentation directly inside your GraphQL operations.

VSCode Setup

Install the GraphQL: Language Feature Support extension for autocompletion, validation and go-to-definition.

For syntax highlighting of GraphQL inside template literals and standalone documents, also install the GraphQL: Syntax Highlighting extension.

GraphQL Config

The module generates the GraphQL config for you. On every nuxt prepare, nuxt dev and nuxt build it writes a .nuxt/graphql.config.mjs file containing one graphql-config project per configured client. Each project wires that client's generated schema (.nuxt/schema/<client>.schema.json) to the files where you write its operations, so the language server routes every file to the correct API.

Because editors read their GraphQL config from the workspace root, add a one-line file there that re-exports the generated config:

export { default } from './.nuxt/graphql.config.mjs'

If you'd rather manage your own GraphQL config, disable generation:

export default defineNuxtConfig({
  shopify: {
    graphql: {
      generateConfig: false,
    },
  },
})

Writing operations

The language server picks up GraphQL operations written as a #graphql-prefixed template literal, a template literal preceded by a /* GraphQL */ comment, or a gql/graphql tagged template:

export const PRODUCT_FRAGMENT = `#graphql
  fragment ProductFields on Product {
    id
    title
  }
`

export const PRODUCT_FRAGMENT = /* GraphQL */ `
  fragment ProductFields on Product {
    id
    title
  }
`