0Pricing
TypeScript Academy · Lesson

GraphQL Schema to TypeScript Types

Generate types from .graphql files with codegen.

GraphQL Schema to TypeScript Types is a free TypeScript Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Problem: Schema and Types Drift

In GraphQL projects, server schema and client TypeScript types easily fall out of sync without automation. Code generation solves this by deriving types directly from the schema.

# Without codegen: manual types that drift from schema
interface User { id: string; name: string; } // may not match schema

GraphQL Code Generator

@graphql-codegen/cli reads your GraphQL schema and generates TypeScript types automatically.

npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript

codegen.yml Configuration

Configure the schema source and output location in codegen.yml.

# codegen.yml
schema: "./api/schema.graphql"
generates:
  src/generated/types.ts:
    plugins:
      - typescript

Running the Generator

Run graphql-codegen to generate TypeScript types from your schema.

npx graphql-codegen
# Generates src/generated/types.ts with all schema types

Generated Output Example

The generated file contains TypeScript interfaces matching every GraphQL type in your schema.

// src/generated/types.ts (generated)
export type User = {
  __typename?: "User";
  id: string;
  name: string;
  email: string;
};

export type Query = {
  __typename?: "Query";
  user?: Maybe<User>;
};

Schema from a Remote Endpoint

Codegen can also fetch the schema from a live GraphQL endpoint using introspection.

# codegen.yml with remote schema
schema:
  - https://api.example.com/graphql:
      headers:
        Authorization: "Bearer ${AUTH_TOKEN}"

Scalar Type Mapping

Map custom GraphQL scalars to TypeScript types in the codegen config.

# codegen.yml
config:
  scalars:
    DateTime: string
    JSON: Record<string, unknown>
    Upload: File

Enum Handling

GraphQL enums are mapped to TypeScript string enums or union types depending on the codegen configuration.

# Generated from GraphQL enum Role { ADMIN USER GUEST }
export enum Role {
  Admin = "ADMIN",
  User = "USER",
  Guest = "GUEST",
}

Non-Null and Maybe

GraphQL nullable fields become Maybe (i.e., T | null | undefined) in generated types, reflecting the schema nullability.

// GraphQL: name: String (nullable)
// Generated: name?: Maybe<string>

// GraphQL: id: ID! (non-null)
// Generated: id: string

CI Integration

Run codegen in CI to verify the generated types are up to date. Fail the build if the schema changed without regenerating.

# CI: check no drift
npx graphql-codegen --check
# Exits 1 if generated files are out of date

Recap: Schema to Types

GraphQL Code Generator reads your schema and produces TypeScript types automatically. Configure with codegen.yml, run graphql-codegen, and integrate into CI to prevent schema drift.

Quick Check

What is the primary purpose of GraphQL Code Generator?

What You Learned

GraphQL Code Generator eliminates schema-type drift by generating TypeScript from your schema. Configure it with codegen.yml, map custom scalars, and integrate into CI to enforce freshness.

Frequently asked questions

Is the “GraphQL Schema to TypeScript Types” lesson free?

Yes — the full text of “GraphQL Schema to TypeScript Types” is free to read here on the web, and the TypeScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “GraphQL Schema to TypeScript Types”?

Generate types from .graphql files with codegen. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “GraphQL Schema to TypeScript Types” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. GraphQL Schema to TypeScript Types
  2. Typed Resolvers with GraphQL Code Generator
  3. Typed GraphQL Client with Apollo and urql
  4. End-to-End Type Safety: Schema First Workflow
← Back to TypeScript Academy