Code generation from schema in GraphQL - Step-by-Step Execution

Concept Flow - Code generation from schema

Start with GraphQL Schema

↓

Parse Schema Definitions

↓

Generate TypeScript Types

↓

Generate Query and Mutation Functions

↓

Output Code Files

↓

End

The process starts with a GraphQL schema, which is parsed to generate TypeScript types and query/mutation functions, then outputs code files.

Execution Sample

GraphQL

schema {
  query: Query
}
type Query {
  user(id: ID!): User
}
type User {
  id: ID!
  name: String
}

This schema defines a Query type with a user field that returns a User object by ID.

Execution Table

Step	Action	Input	Output
1	Parse schema	GraphQL schema text	AST (Abstract Syntax Tree) of schema
2	Generate TypeScript types	AST	TypeScript interfaces for Query and User
3	Generate query functions	AST	Functions to fetch user by ID
4	Write code files	Generated types and functions	Files: types.ts, queries.ts
5	End	All code generated	Code ready for use

💡 All schema parts processed and code files generated

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
schemaText	GraphQL schema string	GraphQL schema string	GraphQL schema string	GraphQL schema string	GraphQL schema string
AST	null	Parsed AST	Parsed AST	Parsed AST	Parsed AST
TypeScriptTypes	null	null	Generated interfaces	Generated interfaces	Generated interfaces
QueryFunctions	null	null	null	Generated functions	Generated functions
CodeFiles	empty	empty	empty	empty	Written files

Key Moments - 2 Insights

Why do we parse the schema before generating code?

Parsing converts the schema text into a structured AST, which is easier to analyze and use for generating accurate code, as shown in execution_table step 1.

What is the difference between TypeScript types and query functions generated?

TypeScript types define data shapes (step 2), while query functions are code to fetch data (step 3). Both are needed for type-safe API calls.

Visual Quiz - 3 Questions

Look at the execution_table, what is the output after step 2?

A Functions to fetch user by ID

B TypeScript interfaces for Query and User

C AST of schema

D Code files written

💡 Hint

Check the 'Output' column in row with Step 2 in execution_table

At which step are query functions generated?

A Step 3

B Step 1

C Step 4

D Step 5

💡 Hint

Look at the 'Action' column in execution_table for generating query functions

If the schema changes, which variable in variable_tracker will be updated first?

A QueryFunctions

B TypeScriptTypes

C AST

D CodeFiles

💡 Hint

Parsing schema updates the AST first as shown in variable_tracker after Step 1

Concept Snapshot

Code generation from schema:
- Start with GraphQL schema text
- Parse schema into AST
- Generate TypeScript types from AST
- Generate query/mutation functions
- Output code files for use
This automates creating type-safe API code.

Full Transcript

Code generation from schema starts by taking the GraphQL schema text and parsing it into an abstract syntax tree (AST). This structured form makes it easier to analyze the schema. Next, TypeScript interfaces are generated to represent the data types defined in the schema, such as Query and User types. Then, functions to perform queries and mutations are created based on the schema fields. Finally, all generated code is written into files ready to be used in applications. This process ensures type safety and reduces manual coding errors.

Practice

1. What is the main purpose of code generation from a GraphQL schema?

easy

A. To delete unused database tables

B. To manually write all database queries

C. To automatically create code based on the GraphQL schema

D. To convert GraphQL queries into HTML pages

Solution

1. Step 1: Understand code generation concept

   Code generation means creating code automatically from a source, here the GraphQL schema.

2. Step 2: Identify the purpose in GraphQL context

   In GraphQL, code generation helps create types and queries automatically from the schema to save time.

3. Final Answer:

   To automatically create code based on the GraphQL schema -> Option C

4. Quick Check:

   Code generation = automatic code creation [OK]

Hint: Code generation means automatic code creation from schema [OK]

Common Mistakes:

• Thinking code generation means manual coding
• Confusing code generation with deleting tables
• Assuming it converts queries to HTML

2. Which of the following is the correct way to specify the schema file in a GraphQL code generator config?

easy

A. "schema => './schema.graphql'"

B. "schema = './schema.graphql'"

C. "schema: schema.graphql"

D. "schema: './schema.graphql'"

Solution

1. Step 1: Recall config syntax for GraphQL code generator

   The config uses key-value pairs with colon and string paths in quotes.

2. Step 2: Identify correct syntax

   "schema: './schema.graphql'" uses colon and quotes correctly: "schema: './schema.graphql'".

3. Final Answer:

   "schema: './schema.graphql'" -> Option D

4. Quick Check:

   Config uses colon and quotes for paths [OK]

Hint: Config uses colon and quotes for file paths [OK]

Common Mistakes:

• Using equals sign instead of colon
• Omitting quotes around file path
• Using arrow syntax which is invalid here

3. Given this config snippet:

{
  schema: './schema.graphql',
  generates: {
    './src/types.ts': { plugins: ['typescript'] }
  }
}

What will be generated after running the code generator?

medium

A. A JavaScript file with database connection code

B. A TypeScript file with types matching the GraphQL schema

C. An HTML file showing the schema documentation

D. A JSON file with raw schema data

Solution

1. Step 1: Analyze the config's generates section

   The config says to generate './src/types.ts' using the 'typescript' plugin.

2. Step 2: Understand what the 'typescript' plugin does

   This plugin creates TypeScript types based on the GraphQL schema.

3. Final Answer:

   A TypeScript file with types matching the GraphQL schema -> Option B

4. Quick Check:

   typescript plugin = TypeScript types file [OK]

Hint: Plugin name hints the generated file type [OK]

Common Mistakes:

• Confusing TypeScript with JavaScript output
• Expecting HTML or JSON instead of types
• Ignoring the plugin specified

4. You run the GraphQL code generator but get an error: "Cannot find schema file './schema.graphql'". What is the most likely cause?

medium

A. The schema file path in the config is incorrect or file is missing

B. The code generator does not support GraphQL schemas

C. The output file path is invalid

D. The plugins array is empty

Solution

1. Step 1: Understand the error message

   The error says it cannot find the schema file at the given path.

2. Step 2: Identify the cause

   This usually means the path is wrong or the file does not exist at that location.

3. Final Answer:

   The schema file path in the config is incorrect or file is missing -> Option A

4. Quick Check:

   File not found = wrong path or missing file [OK]

Hint: Check schema file path and existence first [OK]

Common Mistakes:

• Blaming plugins or output path
• Assuming code generator lacks schema support
• Ignoring file system errors

5. You want to generate both TypeScript types and React hooks from your GraphQL schema. Which config snippet correctly sets this up?

hard

A. {
schema: './schema.graphql',
generates: {
'./src/types.ts': { plugins: ['typescript'] },
'./src/hooks.ts': { plugins: ['typescript-react-apollo'] }
}
}

B. {
schema: './schema.graphql',
generates: {
'./src/types.ts': { plugins: ['typescript-react-apollo'] },
'./src/hooks.ts': { plugins: ['typescript'] }
}
}

C. {
schema: './schema.graphql',
generates: {
'./src/types.ts': { plugins: ['react-hooks'] },
'./src/hooks.ts': { plugins: ['typescript'] }
}
}

D. {
schema: './schema.graphql',
generates: {
'./src/types.ts': { plugins: ['typescript'] },
'./src/hooks.ts': { plugins: ['react-hooks'] }
}
}

Solution

1. Step 1: Identify plugins for types and hooks

   'typescript' plugin generates TypeScript types; 'typescript-react-apollo' generates React Apollo hooks.

2. Step 2: Match plugins to correct output files

   Types go to './src/types.ts' with 'typescript'; hooks go to './src/hooks.ts' with 'typescript-react-apollo'.

3. Final Answer:

   Config with 'typescript' for types and 'typescript-react-apollo' for hooks -> Option A

4. Quick Check:

   Correct plugins match output files [OK]

Hint: Match plugins to output files by their purpose [OK]

Common Mistakes:

• Swapping plugins between files
• Using non-existent plugins like 'react-hooks'
• Missing one of the required plugins