Why Generate Code From a Schema
GraphQL Code Generator (graphql-codegen) reads your schema and your .graphql operation files, then outputs TypeScript types, typed React hooks, or resolver signatures automatically. This removes the manual, error-prone step of hand-writing interfaces that mirror your schema — when the schema changes, regenerating code immediately surfaces type errors anywhere the frontend used a field that no longer exists.
Cricket analogy: Like a scoring app auto-generating the match scorecard template from the official ICC rules rather than a scorer manually redrawing it each match, codegen derives types straight from the schema so they can't drift out of sync.
Configuring codegen.yml
A typical setup points schema at your GraphQL endpoint or a local SDL file, documents at a glob of .graphql or .tsx files containing operations, and lists plugins such as typescript, typescript-operations, and typescript-react-apollo. Running graphql-codegen (often via a codegen npm script) then emits a generated/graphql.ts file exporting types like GetBooksQuery and hooks like useGetBooksQuery, ready to import directly into components.
Cricket analogy: Like a coach's pre-match config specifying which fielders (plugins) go where based on the pitch report (schema), codegen.yml drives what output gets generated for a given schema and document set.
# codegen.yml
schema: 'https://api.example.com/graphql'
documents: 'src/**/*.graphql'
generates:
src/generated/graphql.ts:
plugins:
- typescript
- typescript-operations
- typescript-react-apollo
config:
withHooks: true
scalars:
DateTime: stringUsing Generated Hooks and Handling Schema Drift
Once generated, components import typed hooks directly — useGetBooksQuery() returns data typed as GetBooksQuery, so autocomplete and compile-time checks catch typos like data.books[0].titel. Running codegen in CI (or with --watch locally) means any backend schema change that removes or renames a field breaks the TypeScript build immediately rather than surfacing as a runtime undefined error in production.
Cricket analogy: Like a DRS review immediately flagging an incorrect umpire call before the next ball is bowled, typed hooks catch a broken field reference at compile time instead of at runtime in production.
Add graphql-codegen --check (or run codegen as part of npm run build) to your CI pipeline so schema changes that break the frontend fail the build, not production.
- GraphQL Code Generator produces TypeScript types and hooks directly from your schema and operation files.
- codegen.yml declares the schema source, documents glob, output path, and plugins.
- Common plugins include typescript, typescript-operations, and typescript-react-apollo.
- Generated hooks like useGetBooksQuery give autocomplete and compile-time type safety.
- Running codegen in CI catches schema drift at build time instead of at runtime.
- Custom scalar mappings (e.g., DateTime) can be configured to map to appropriate TypeScript types.
- Codegen eliminates manual, error-prone hand-written interfaces that mirror the schema.
Practice what you learned
1. What is the primary benefit of using GraphQL Code Generator?
2. In a codegen.yml file, what does the 'documents' field specify?
3. Which plugin is typically used to generate typed React hooks for Apollo Client?
4. Why is it valuable to run codegen as part of a CI pipeline?
5. What does the scalars config option in codegen.yml do?
Was this page helpful?
You May Also Like
Apollo Client Basics
Learn how Apollo Client manages GraphQL queries, mutations, and the normalized cache in front-end applications.
Testing GraphQL APIs
Learn strategies for unit testing resolvers, integration testing schemas, and mocking GraphQL clients in tests.
GraphQL Quick Reference
A condensed cheat sheet of core GraphQL syntax, type system rules, and common patterns for fast lookup.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics