How do I convert a GraphQL schema to TypeScript?
Paste your GraphQL SDL schema and instantly get TypeScript interfaces, types, enums, unions, and operation types. The tool handles non-null/nullable types, list types, field arguments, implements, and 15+ custom scalar mappings. Download as .ts or copy. Everything runs in your browser.
type User {
id: ID!
name: String!
email: String!
posts: [Post!]!
}
type Post {
id: ID!
title: String!
content: String
}export interface User {
id: string;
name: string;
email: string;
posts: Post[];
}
export interface Post {
id: string;
title: string;
content: string | null;
}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
Tips & Best Practices
Generate types from the schema, not from sample responses
Schema-based generation captures every possible field, nullable type, and union variant. Response-based generation only captures what appeared in one query. Use your .graphql schema files as the source of truth for comprehensive TypeScript types.
GraphQL nullable fields should be T | null, not optional (T?)
In GraphQL, a nullable field (without !) can explicitly return null. In TypeScript, field?: T means the field might be undefined (missing from the object). These are semantically different. Use field: T | null for nullable GraphQL fields to preserve the distinction.
Auto-generate types from your GraphQL API for end-to-end type safety
Combine graphql-codegen with this converter to auto-generate TypeScript types from your GraphQL schema on every build. Your queries, mutations, and React hooks get typed automatically — changing a field name in the schema immediately surfaces type errors across your frontend.
Don't expose internal schema types in client-side code
Generated types from your full schema may include admin-only types (AdminUser, InternalMetrics, AuditLog). Only generate client types from the public schema or specific operations. Exposing internal type names helps attackers understand your data model.