whatisgithub

What is graphql-code-generator?

dotansimha/graphql-code-generator — explained in plain English

Analysis updated 2026-06-24

11,243TypeScriptAudience · developerComplexity · 3/5LicenseSetup · moderate

In one sentence

A developer tool that reads your GraphQL schema and query files and automatically generates typed code, TypeScript types, React hooks, Angular services, so you don't have to write repetitive boilerplate by hand.

Mindmap

mindmap
  root((GQL CodeGen))
    What it does
      Schema reading
      Code generation
      Type safety
    Output types
      TypeScript types
      React hooks
      Angular services
      Custom plugins
    Tech stack
      TypeScript
      GraphQL
    Audience
      Frontend developers
      Full-stack teams
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Automatically generate TypeScript types for all your GraphQL queries and mutations so your frontend stays type-safe without manual type writing.

USE CASE 2

Generate ready-to-use React hooks for your GraphQL operations so components can call them directly with no boilerplate.

USE CASE 3

Generate Angular services that wrap your GraphQL operations for use with Angular's dependency injection system.

USE CASE 4

Write a custom plugin to output generated code in any language or format your project needs beyond the official plugins.

What is it built with?

TypeScriptGraphQL

How does it compare?

dotansimha/graphql-code-generatorgetumbrel/umbrelseerr-team/seerr
Stars11,24311,24311,245
LanguageTypeScriptTypeScriptTypeScript
Setup difficultymoderateeasymoderate
Complexity3/53/53/5
Audiencedevelopergeneralops devops

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Requires an existing GraphQL schema file or endpoint URL, initial setup uses an interactive CLI wizard that asks about output format and plugins.

Free to use for any purpose including commercial projects, you must keep the copyright notice.

So what is it?

GraphQL Code Generator is a developer tool that reads a GraphQL schema, along with any query, mutation, or subscription files your project uses, and automatically generates code you would otherwise write by hand. The tool analyzes how your data is shaped and produces typed code that matches that shape, saving time and reducing mismatches between your data layer and the rest of your application. The output format is controlled by plugins. A set of official plugins covers common targets: TypeScript types, Angular services, React hooks, and several others. If the built-in plugins do not match your setup, you can write your own. The plugin system accepts custom templates, so the generator can produce code in any language or format your project needs. Getting started involves installing two packages, then running a setup command that asks a series of questions. The interactive setup walks you through selecting plugins, choosing an output file path, and other configuration options. After that, you run the generator whenever your schema or operations change to keep the generated code in sync. The project supports targets beyond TypeScript, including Flow, Angular, MongoDB models, and others listed in the plugin directory on the project website. There is also a live demo on the project website where you can try the generator in a browser without installing anything. The project is maintained by The Guild, an open-source software collective, and is released under the MIT license. Community-contributed plugins extend the official set, and the project welcomes pull requests from outside contributors.

Copy-paste prompts

Prompt 1
I have a GraphQL API and a React TypeScript frontend. Help me install graphql-code-generator and set it up to generate typed hooks for all my queries and mutations automatically.
Prompt 2
My GraphQL schema keeps changing and my generated types go out of sync. Show me how to configure graphql-code-generator to watch for schema changes and regenerate files automatically.
Prompt 3
Help me write a custom graphql-code-generator plugin that outputs a plain JavaScript client SDK from my schema instead of TypeScript types.
Prompt 4
I'm setting up graphql-code-generator for the first time using the interactive CLI wizard. Walk me through each question it asks and what I should answer for a React TypeScript project.

Frequently asked questions

What is graphql-code-generator?

A developer tool that reads your GraphQL schema and query files and automatically generates typed code, TypeScript types, React hooks, Angular services, so you don't have to write repetitive boilerplate by hand.

What language is graphql-code-generator written in?

Mainly TypeScript. The stack also includes TypeScript, GraphQL.

What license does graphql-code-generator use?

Free to use for any purpose including commercial projects, you must keep the copyright notice.

How hard is graphql-code-generator to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is graphql-code-generator for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.