You wrote a GraphQL schema, deployed a server, but client types don't match — runtime error in production. Manual synchronization eats up to 40% of development time, and each mismatch error accounts for 15–20% of pull requests that get returned for rework. We've seen projects where type mismatch crashed search, and the fix took a week. One such incident cost tens of hours of overtime, which at average team rates means a loss of $5,000–$10,000.
Automated typing with GraphQL Code Generator is 5x faster than manual type maintenance and completely eliminates mismatch errors. The tool analyzes the schema and operations, generates TypeScript types, hooks, and resolvers. No manual work — errors are caught at compile time. Over the last few years, we have integrated codegen into 20+ projects of various scales: from startups to enterprise systems with 200+ operations and 80+ GraphQL types. Average reduction in typing time is 70%, equivalent to a budget saving of up to $15,000 per year for a team of 5 developers. The number of bugs related to schema mismatch dropped to zero. Teams that previously spent hours on synchronization now simply run npm run codegen.
What problems we solve
- Schema and type desynchronization. Every schema change breaks types. Codegen updates them automatically on each run.
- N+1 query on the client. Generated hooks are strictly typed — it's impossible to request a non-existent field or forget to add a field to a query.
- Code duplication. One source of truth — the schema. Types, resolvers, and even validations are generated from it.
- Errors in resolvers. TypeScript checks signatures and return types — whole classes of errors disappear.
We integrated codegen into a project with 80+ types and 200+ operations. Typing time was reduced by 70%, and the number of bugs in resolvers dropped to zero. The integration took 3 days: configuration, testing, CI/CD.
Why automate type generation?
Manual type maintenance is a source of bugs and wasted time. Compare:
| Criteria | Without codegen | With codegen |
|---|---|---|
| Time for synchronization | 4–6 hours per week | 0 hours |
| Mismatch errors | 15–20% of PRs | 0% |
| Code confidence | low | high |
Time savings directly convert to money: at $50/hour, a team of 5 saves up to $1,500 per week.
Eliminating desynchronization with codegen
Codegen uses a configuration file codegen.yml, where you specify the schema, documents, and target plugins. It parses the schema, finds all operations, and generates types, resolvers, and hooks. On each run — full regeneration, so types are always up to date.
What is Fragment Masking and why do you need it?
Fragment Masking guarantees that a component receives only the requested fields — no accidental dependencies. For example, fragment fragment UserAvatar on User { id name avatarUrl } isolates data for the avatar component and prevents it from reading extra fields. This prevents errors where a change in one component's query breaks another.
Configuring Fragment Masking
To enable Fragment Masking, you need to add the typed-document-node plugin and use useFragment from @graphql-codegen/typescript-react-apollo. In codegen.yml, just specify withHooks: true — fragment masking is generated automatically. Example usage:
const UserAvatar = ({ userRef }) => { const user = useFragment(userRef, UserAvatarFragment); return <img src={user.avatarUrl} alt={user.name} />; }; This guarantees that user contains only fields from the fragment.
Installation and configuration
npm install -D @graphql-codegen/cli @graphql-codegen/typescript \ @graphql-codegen/typescript-resolvers \ @graphql-codegen/typescript-operations \ @graphql-codegen/typescript-react-apollo \ @graphql-codegen/introspection # codegen.yml overwrite: true schema: "http://localhost:4000/graphql" documents: "src/**/*.graphql" generates: src/generated/graphql-server.ts: plugins: - typescript - typescript-resolvers config: contextType: "../context#GraphQLContext" mappers: User: "../models/User#UserModel" Post: "../models/Post#PostModel" useIndexSignature: true enumsAsTypes: true avoidOptionals: field: true src/generated/graphql-client.ts: plugins: - typescript - typescript-operations - typescript-react-apollo config: withHooks: true withComponent: false withHOC: false dedupeFragments: true src/generated/introspection.json: plugins: - introspection How we do it: implementation process
- Schema and operations analysis. We study the current schema, documents, and file structure. We identify common patterns — mappers, context, nullability.
- Configuration setup. We describe
codegen.yml: specify schema, documents, target plugins, and mappers. We consideravoidOptionalsandenumsAsTypesfor strictness. - Generation and testing. We run codegen, verify that all types are correct, and compile the project. We enable strict mode and TypeScript.
- CI/CD integration. We add a script to
package.jsonand a workflow for GitHub Actions — we check that generated files are committed and synchronized. - Documentation and handover. We describe the process for the team, set up watch-mode for local development.
Example CI/CD workflow
name: GraphQL Codegen Check on: [pull_request] jobs: check: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - run: npm ci - name: Start GraphQL server run: npm run dev & - name: Wait for server run: npx wait-on http://localhost:4000/graphql - name: Run codegen run: npm run codegen - name: Check for uncommitted changes run: | if [[ -n $(git diff --name-only) ]]; then echo "Generated files are out of sync. Run npm run codegen." git diff exit 1 fi - name: TypeScript check run: npm run type-check What's included in the work
- Configuration of
codegen.ymlfor your schema and operations. - Generation of server and client types.
- Setup of mappers for resolvers and context.
- CI/CD integration with pull request checks.
- Documentation on running and maintenance.
- Team training (1–2 hours).
Timelines
Basic setup takes from 2 to 5 working days. The cost is calculated individually based on schema complexity and number of operations. We'll estimate your project for free — contact us.
Get a consultation. Order GraphQL Code Generator implementation — eliminate runtime errors and accelerate development. Our engineers hold GraphQL certifications and have experience with code generation on projects of any complexity.