GraphQL Code Generation Guide
GraphQL's type system maps naturally to TypeScript. Use the converter above to paste any GraphQL SDL schema and get TypeScript interfaces instantly — no CLI setup required.
GraphQL to TypeScript Converter
Convert GraphQL SDL schemas to TypeScript interfaces, types, enums, and operations. Paste your schema and get typed code instantly.
// ── Scalars ──
export type DateTime = string;
// ── Enums ──
export enum UserRole {
ADMIN = "ADMIN",
EDITOR = "EDITOR",
AUTHOR = "AUTHOR",
READER = "READER",
}
// ── Types ──
/** A blog post */
export interface Post {
id: string;
title: string;
content: string;
slug: string;
published: boolean;
createdAt: string;
updatedAt?: string;
author: User;
tags: Tag[];
comments: Comment[];
}
export interface User {
id: string;
name: string;
email: string;
avatar?: string;
bio?: string;
posts: Post[];
role: UserRole;
}
export interface Comment {
id: string;
body: string;
author: User;
post: Post;
createdAt: string;
}
export interface Tag {
id: string;
name: string;
slug: string;
posts: Post[];
}
// ── Input Types ──
export interface CreatePostInput {
title: string;
content: string;
slug?: string;
published?: boolean;
tagIds?: string[];
}
export interface UpdatePostInput {
title?: string;
content?: string;
slug?: string;
published?: boolean;
tagIds?: string[];
}
// ── Operations ──
export interface Query {
/** Args: (limit: number, offset: number, published: boolean) */
posts: Post[];
/** Args: (id: string) */
post?: Post;
users: User[];
/** Args: (id: string) */
user?: User;
tags: Tag[];
}
export interface PostsArgs {
limit?: number;
offset?: number;
published?: boolean;
}
export interface PostArgs {
id: string;
}
export interface UserArgs {
id: string;
}
export interface Mutation {
/** Args: (input: CreatePostInput) */
createPost: Post;
/** Args: (id: string, input: UpdatePostInput) */
updatePost?: Post;
/** Args: (id: string) */
deletePost: boolean;
/** Args: (name: string, email: string, password: string) */
register: User;
}
export interface CreatePostArgs {
input: CreatePostInput;
}
export interface UpdatePostArgs {
id: string;
input: UpdatePostInput;
}
export interface DeletePostArgs {
id: string;
}
export interface RegisterArgs {
name: string;
email: string;
password: string;
}
4
Types
2
Inputs
1
Enums
0
Unions
0
Interfaces
1
Scalars
2
Operations
45
Fields
Press Ctrl+Enter to copy
Default Scalar Mappings
Why generate TypeScript from GraphQL?
GraphQL schemas define types, fields, and relationships. Manually writing matching TypeScript interfaces is error-prone and quickly becomes stale as the schema evolves. Automated code generation ensures your frontend types always match your API contract, catching mismatches at compile time instead of runtime.
Schema-first vs code-first
Schema-first development writes the .graphql SDL file first, then generates types and resolvers. Code-first uses libraries like Nexus or TypeGraphQL to define the schema in TypeScript, which generates the SDL. Both approaches benefit from codegen: schema-first generates client types, code-first generates the SDL for documentation and client sharing.
What gets generated?
A typical GraphQL-to-TypeScript pipeline produces: interfaces for object types and input types, TypeScript enums or const objects for GraphQL enums, union types for GraphQL unions, and argument types for query/mutation fields. Advanced tools also generate typed hooks (useQuery, useMutation) for React, Vue, or Angular.
Online tool vs CLI codegen
CLI tools like @graphql-codegen/cli integrate into your build pipeline and watch for schema changes. Online tools like this converter are ideal for quick one-off conversions, exploring unfamiliar APIs, or when you don't want to install dependencies. Both produce the same TypeScript output from the same SDL input.
Frequently Asked Questions
Can I convert a GraphQL introspection result to TypeScript?
This tool accepts GraphQL SDL (Schema Definition Language). If you have an introspection JSON result, you can convert it to SDL first using tools like graphql-js's buildClientSchema and printSchema functions, then paste the SDL here.
Does this tool support GraphQL fragments?
This tool focuses on schema types (type, input, enum, union, interface, scalar). Fragment definitions are query-level constructs and are handled by query-aware codegen tools like @graphql-codegen/typescript-operations.
How are custom scalars handled?
Common scalars like DateTime, JSON, UUID, and BigInt are mapped to appropriate TypeScript types automatically. Unknown scalars default to 'unknown'. You can customize these mappings in advanced codegen configurations.
Related Convert Tools
OpenAPI to TypeScript
Convert OpenAPI 3.x and Swagger 2.0 specs to TypeScript interfaces and types with $ref resolution, allOf/oneOf/anyOf, enums, and API operation types
JSON to Zod Converter
Convert JSON or JSON Schema to Zod validation schemas with $ref resolution, allOf/oneOf/anyOf, enum, format constraints, and required/optional fields
TypeScript to JavaScript
Convert TypeScript to JavaScript — strip types, interfaces, enums, generics, and access modifiers to get clean JS output
JSON to SQL Converter
Convert JSON arrays to SQL CREATE TABLE and INSERT statements for PostgreSQL, MySQL, and SQLite with automatic type inference