GraphQL Code Generator

GraphQL Code Generator is a CLI tool, maintained by The Guild, that parses a GraphQL schema and your queries/mutations/subscriptions and emits generated code — TypeScript types, typed React hooks, resolver signatures, and more — through a large ecosystem of official and community plugins. Rather than hand-writing types that drift out of sync with the schema, teams run graphql-codegen (via a config file or the interactive init wizard) as part of their build or watch loop to keep frontend and backend code type-safe against the actual GraphQL contract.

What You Get

• A graphql-codegen CLI with an interactive init wizard that scaffolds a working codegen config for your stack
• A large official plugin catalog (TypeScript, TypeScript Operations, React Apollo, urql, Vue Apollo, resolvers, and more) plus support for custom plugins
• Watch mode that regenerates output automatically as your schema or documents change
• Presets (e.g. near-operation-file, client) for organizing generated output alongside source files

Common Use Cases

• Generating TypeScript types for a GraphQL schema and operations so frontend code fails to compile on schema drift
• Producing typed React/Vue/Angular hooks bound directly to specific GraphQL queries and mutations
• Generating typed resolver signatures for a GraphQL server to keep backend implementations in sync with the schema
• Running codegen as a watch-mode step in local development so generated types stay current with every schema edit

Under The Hood

Architecture - The CLI’s src/bin.ts entry point delegates to cli.ts, which parses flags and hands off to codegen.ts (598 lines) — the orchestration core that loads config via config.ts (568 lines, using cosmiconfig and graphql-config.ts), loads the schema/documents through @graphql-tools loaders (file, git, GitHub, URL), resolves the requested plugins via plugins.ts/presets.ts, and hands the assembled context to @graphql-codegen/core for the actual generation pass, with generate-and-save.ts and hooks.ts handling output writing and lifecycle hooks (beforeAllFileWrite, etc.); documentTransforms.ts applies pre-generation transforms like @babel/generator-based document rewriting. Tech Stack - A pnpm-workspace TypeScript monorepo built with modern tooling (Vitest, ESLint flat config, Prettier), where the CLI package itself depends on @graphql-codegen/core, @graphql-codegen/client-preset, @graphql-codegen/plugin-helpers, the @graphql-tools loader family, @inquirer/prompts for the init wizard, cosmiconfig for config discovery, and chalk for terminal output. Code Quality - The CLI package has a dedicated tests/ directory with Vitest specs covering config loading, CLI flags, the init wizard, watch-mode behavior, and end-to-end generate-and-save flows, reflecting the broader monorepo’s very active development and maintenance-consistency scores from GitHub activity data. API Design - The graphql-codegen init wizard walks new users through schema location, target plugins, and output paths in one interactive flow, while advanced users configure everything declaratively via a codegen.yml/codegen.ts config file discovered through cosmiconfig, giving both a low-friction onboarding path and a fully scriptable, CI-friendly configuration surface.