Registry / web-framework / vite-plugin-graphql-codegen

vite-plugin-graphql-codegen

JSON →
library3.9.0jsnpmunverified

Zero-config Vite plugin that leverages the Vite file watcher to run GraphQL Code Generator programmatically, eliminating the need for a separate watch process. Version 3.9.0 supports Vite 2.7–8, GraphQL 14–16, and @graphql-codegen/cli 1–6. Key differentiators: no CLI wrapper needed, integrates tightly with Vite's dev server and build pipeline, offers fine-grained control over when codegen runs (start/build/watch), and supports multi-project configurations. Ships TypeScript types. Released continuously since 2020, with active maintenance including support for Vite 8.

npm install vite-plugin-graphql-codegen
INSTALL
IMPORT
SIG · VITE-PLUGIN-GRAPHQ
V
vite-plugin-graphql-codegen
web-frameworkjavascriptv3.9.0
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–223 runs
build_error
glibc
node 18–223 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

default
✓ import codegen from 'vite-plugin-graphql-codegen'
✗ const codegen = require('vite-plugin-graphql-codegen')
Default export; CommonJS require works in CJS environments but ESM is recommended for Vite plugin usage.
vitePluginGraphqlCodegen
✓ import { vitePluginGraphqlCodegen } from 'vite-plugin-graphql-codegen'
✗ import codegen from 'vite-plugin-graphql-codegen/vitePluginGraphqlCodegen'
Named export available as an alternative to default; useful for explicit named imports.
PluginOptions
✓ import type { PluginOptions } from 'vite-plugin-graphql-codegen'
✗ import { PluginOptions } from 'vite-plugin-graphql-codegen'
TypeScript only - import type to avoid runtime inclusion. PluginOptions is not a value export.

Basic setup of vite-plugin-graphql-codegen in vite.config.ts with config override and conditional skip.

// vite.config.ts import { defineConfig } from 'vite'; import codegen from 'vite-plugin-graphql-codegen'; export default defineConfig({ plugins: [ codegen({ // Optional: override codegen config for specific triggers configOverrideOnStart: { generates: { 'src/generated/graphql.ts': { documents: './src/**/*.graphql', schema: 'https://api.example.com/graphql', plugins: ['typescript', 'typescript-operations'], }, }, }, // Skip codegen during CI build skip: (context) => context.trigger === 'build' && process.env.CI === 'true', }), ], });
Debug
Known issues
breakingvite-plugin-graphql-codegen v3 requires Vite >=2.7.0 and @graphql-codegen/cli >=1.0.0. Older versions may not work.
fix
Update Vite and @graphql-codegen/cli to compatible versions.
affects: >=3.0.0
breakingv3.7.0 drops support for @graphql-codegen/cli v5 and earlier. Checking compatibility issues with the codegen config.
fix
Upgrade @graphql-codegen/cli to v6 or later.
affects: >=3.7.0
deprecatedThe 'schema' and 'documents' options (in versions <1.4.0) are deprecated; use 'configOverride' or a codegen config file instead.
fix
Migrate to using 'config' or 'configOverride' option, or a separate codegen config file.
affects: <3.0.0
gotchaCodegen may run multiple times on startup due to Vite's file watcher detecting changes. The plugin provides 'runOnStart: false' option to disable initial run.
fix
Set runOnStart: false if you only want codegen on file changes.
affects: >=3.0.0
gotchaIf codegen config file is large, the plugin may cause startup delay. Use 'throwOnStart: false' to avoid build failure if codegen fails during dev start.
fix
Set throwOnStart: false to continue dev server even if initial codegen fails.
affects: >=3.0.0
gotchaThe 'skip' option callbacks can be async; ensure they return a boolean or Promise<boolean> or codegen might error.
fix
Use async/await or return a boolean directly.
affects: >=3.9.0
Errors
Common errors & fixes
Cannot find module 'vite-plugin-graphql-codegen' or its corresponding type declarations.
Plugin not installed or missing peer dependencies.
fix
Run npm install vite-plugin-graphql-codegen @graphql-codegen/cli graphql vite
Error: @graphql-codegen/cli version 5 is not supported. Please upgrade to >=6.0.0.
v3.7.0+ requires @graphql-codegen/cli v6 or later.
fix
Run npm install @graphql-codegen/cli@latest
TypeError: codegen is not a function
Importing the plugin incorrectly (e.g., using named import instead of default).
fix
Use import codegen from 'vite-plugin-graphql-codegen' instead of { codegen }.
Error: GraphQL Code Generator failed with 1 error(s). TypeScript errors found.
Codegen configuration (schema, documents, or plugins) are misconfigured.
fix
Check your codegen.yml or configOverride for errors, ensure schema URL is reachable and documents pattern matches files.
Upgrade
Version history
3.9.0latest on npm
Audit
Dependencies
@graphql-codegen/clirequiredPeer dependency - core codegen library that handles code generation logic
graphqlrequiredPeer dependency - required by @graphql-codegen/cli for parsing and executing GraphQL operations
viterequiredPeer dependency - plugin only works within a Vite project, provides dev server and build hooks
Agent activity
11 hits · last 30 days
node
8
OpenAI (training)
1
Resources