# GraphQL Code Generator — Auto-Generate Typed Code from GraphQL Schemas

> A tool that generates typed code (TypeScript, React hooks, resolvers, SDKs) from GraphQL schemas and operations, eliminating manual type definitions and keeping client and server code in sync.

## Install

Save as a script file and run:

# GraphQL Code Generator — Auto-Generate Typed Code from GraphQL Schemas

## Quick Use
```bash
npm install -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations

# Initialize config
npx graphql-code-generator init

# Generate types from your schema
npx graphql-codegen
```

## Introduction
GraphQL Code Generator is a tool that reads your GraphQL schema and operations, then generates fully typed code for your preferred language and framework. It eliminates the tedious process of manually writing TypeScript interfaces, React hooks, resolver type signatures, and SDK clients. By generating code directly from the schema, it ensures type safety across your entire stack and catches breaking changes at build time.

## What GraphQL Code Generator Does
- Generates TypeScript types from GraphQL schemas for both client-side operations and server-side resolvers
- Creates framework-specific code including React hooks, Vue composables, and Angular services
- Produces fully typed SDK clients from your GraphQL operations for any API consumer
- Watches for schema and operation changes in development mode, regenerating code on save
- Supports custom plugins so teams can generate any kind of output from their GraphQL documents

## Architecture Overview
The code generator operates in three phases: loading, parsing, and output. In the loading phase, it reads GraphQL schemas from files, URLs, or code-first sources, and collects operation documents from your codebase. The parsing phase normalizes and validates everything into a unified document model. The output phase runs a configurable chain of plugins, each of which receives the parsed schema and operations and emits code strings. Plugins are composable — for example, the TypeScript plugin generates base types, and the TypeScript Operations plugin extends those types with operation-specific interfaces.

## Self-Hosting & Configuration
- Install the CLI and desired plugins as dev dependencies via npm or yarn
- Create a `codegen.ts` or `codegen.yml` configuration file specifying schema source, document globs, and output targets
- Point the schema config at a local file, a running GraphQL endpoint URL, or a GitHub repository
- Run `npx graphql-codegen --watch` during development for automatic regeneration
- Integrate into CI/CD pipelines to verify generated code is up to date before merging

## Key Features
- Over 60 community and official plugins covering TypeScript, Java, C#, Python, and more
- Client preset that generates minimal, tree-shakeable code optimized for bundle size
- Near-instant regeneration in watch mode using incremental parsing
- Schema-aware document validation that catches errors in your .graphql files before runtime
- Monorepo support with per-project configuration and shared schema sources

## Comparison with Similar Tools
- **Apollo Codegen** — generates types for Apollo Client specifically; GraphQL Code Generator supports any client or server framework through its plugin system
- **graphql-zeus** — generates a typed client from schema; Code Generator is more flexible with its plugin architecture for different output targets
- **GenQL** — generates a typed GraphQL client; Code Generator covers a broader range of outputs beyond just client code
- **gqlgen (Go)** — generates Go server code from GraphQL; Code Generator focuses on the JavaScript/TypeScript ecosystem with broader framework support
- **Stellate** — a commercial GraphQL platform with some codegen; GraphQL Code Generator is fully open source

## FAQ
**Q: What languages does GraphQL Code Generator support?**
A: The primary focus is TypeScript and JavaScript, but community plugins exist for Java, C#, Python, Dart, and more. The plugin system is open for any language target.

**Q: Does it work with schema-first and code-first approaches?**
A: Yes. It can read schemas from .graphql files (schema-first) or introspect running servers built with code-first tools like Nexus, TypeGraphQL, or Pothos.

**Q: How do I use it with React and Apollo Client?**
A: Use the client preset with the `@graphql-codegen/typescript-react-apollo` plugin. It generates typed React hooks for each of your GraphQL operations that you can import and use directly.

**Q: Will it slow down my build?**
A: Code generation typically runs in under a second for most projects. In watch mode, it only regenerates affected outputs. It runs as a separate step before your build, not during it.

## Sources
- https://github.com/dotansimha/graphql-code-generator
- https://the-guild.dev/graphql/codegen

---
Source: https://tokrepo.com/en/workflows/asset-9975b8db
Author: Script Depot