vite-plugin-graphql-codegen weekly downloads statistics

Vite Plugin GraphQL Codegen

Zero-config vite plugin that uses the vite file watcher to run graphql codegen programmatically without needing to start a separate watcher.

Setup GraphQL Codegen

Installation instructions found here. Optional if already set up in project.

Install Plugin

# ✨ Auto-detect
npx nypm install -D vite-plugin-graphql-codegen

# vp
vp install -D vite-plugin-graphql-codegen

# npm
npm install -D vite-plugin-graphql-codegen

# yarn
yarn add -D vite-plugin-graphql-codegen

# pnpm
pnpm install -D vite-plugin-graphql-codegen

# bun
bun add -D vite-plugin-graphql-codegen

# deno
deno install -D vite-plugin-graphql-codegen

Initialize Plugin

// vite.config.ts

import { defineConfig } from "vite";
import codegen from "vite-plugin-graphql-codegen";

export default defineConfig({
  plugins: [codegen()],
});

Options

Providing options is not required as sensible defaults are in place, but there may be times where it's helpful to disable codegen under certain circumstances, like when running builds in CI.

codegen({
  /**
   * Run codegen on server start.
   *
   * @default true
   */
  runOnStart: boolean,
  /**
   * Run codegen on build. Will prevent build if codegen fails.
   *
   * @default true
   */
  runOnBuild: boolean,
  /**
   * Enable codegen integration with vite file watcher.
   *
   * @default true
   */
  enableWatcher: boolean,
  /**
   * Automatically add schemas and documents referenced in the codegen config
   * to the file watcher.
   *
   * @default true
   */
  watchCodegenConfigFiles: boolean,
  /**
   * Throw an error if codegen fails on server start.
   *
   * @default false
   */
  throwOnStart: boolean,
  /**
   * Throw an error if codegen fails on build.
   *
   * @default true
   */
  throwOnBuild: boolean,
  /**
   * Run codegen when a document matches.
   *
   * @default true
   */
  matchOnDocuments: boolean,
  /**
   * Run codegen when a schema matches.
   *
   * @default false
   */
  matchOnSchemas: boolean,
  /**
   * Manually define the codegen config.
   */
  config: CodegenConfig,
  /**
   * Override parts of the codegen config just for this plugin.
   */
  configOverride: Partial<CodegenConfig>,
  /**
   * Override parts of the codegen config just for this plugin on server start.
   */
  configOverrideOnStart: Partial<CodegenConfig>,
  /**
   * Override parts of the codegen config just for this plugin on build.
   */
  configOverrideOnBuild: Partial<CodegenConfig>,
  /**
   * Override parts of the codegen config just for this plugin in the watcher.
   */
  configOverrideWatcher: Partial<CodegenConfig>,
  /**
   * Override the codegen config file path.
   */
  configFilePathOverride: string,
  /**
   * Skip codegen for a given cycle when true.
   *
   * The callback receives the current trigger and the changed file path
   * for watcher-driven runs.
   */
  skip:
    boolean |
    ((context: { trigger: "start" | "build" | "watch"; filePath?: string }) =>
      boolean | Promise<boolean>),
  /**
   * Log various steps to aid in tracking down bugs.
   *
   * @default false
   */
  debug: boolean,
});