GraphQL SDLTypeScript 5.xZero Overhead

GraphQL Schema to TypeScript Types Generator

Convert GraphQL schema definitions (SDL) into strongly typed TypeScript interfaces and type aliases instantly. Includes support for field arguments, unions, custom scalars, enums, directives, and JSDoc annotations.

Upload .graphql

Quick Samples:

GraphQL Schema (SDL)

141 lines•2375 chars

"""
Represents an individual customer or administrator account.
"""
type User implements Node & Timestamps {
  id: ID!
  email: String!
  fullName: String!
  role: Role!
  isActive: Boolean!
  orders(limit: Int = 10, offset: Int = 0): [Order!]!
  defaultAddress: Address
  createdAt: DateTime!
  updatedAt: DateTime
}

"Core relay pagination node"
interface Node {
  id: ID!
}

"Auditing timestamps contract"
interface Timestamps {
  createdAt: DateTime!
  updatedAt: DateTime
}

"""
System permission access role
"""
enum Role {
  ADMIN
  CUSTOMER
  SUPPORT
  GUEST @deprecated(reason: "Guest accounts are now tracked anonymously")
}

enum OrderStatus {
  PENDING
  PROCESSING
  SHIPPED
  DELIVERED
  REFUNDED
  CANCELLED
}

type Product implements Node & Timestamps {
  id: ID!
  sku: String!
  title: String!
  description: String
  price: Float!
  compareAtPrice: Float
  inventory: Int!
  tags: [String!]!
  category: Category!
  variants: [ProductVariant!]!
  createdAt: DateTime!
  updatedAt: DateTime
}

type ProductVariant {
  id: ID!
  title: String!
  sku: String!
  price: Float!
  weightInGrams: Int
  barcode: String
}

type Category implements Node {
  id: ID!
  name: String!
  slug: String!
  parent: Category
}

type Order implements Node & Timestamps {
  id: ID!
  orderNumber: String!
  customer: User!
  status: OrderStatus!
  items: [OrderItem!]!
  subtotal: Float!
  tax: Float!
  shipping: Float!
  total: Float!
  shippingAddress: Address!
  notes: String
  createdAt: DateTime!
  updatedAt: DateTime
}

type OrderItem {
  id: ID!
  product: Product!
  quantity: Int!
  unitPrice: Float!
}

type Address {
  street: String!
  city: String!
  state: String!
  postalCode: String!
  country: String!
}

union SearchResult = Product | Category | User

input CreateProductInput {
  sku: String!
  title: String!
  description: String
  price: Float!
  inventory: Int = 0
  tags: [String!]
  categoryId: ID!
}

input CheckoutInput {
  customerId: ID!
  cartItemIds: [ID!]!
  shippingAddressId: ID!
  couponCode: String
}

scalar DateTime
scalar JSON

type Query {
  me: User
  product(id: ID!): Product
  products(limit: Int = 20, cursor: String, category: String): [Product!]!
  search(query: String!, limit: Int = 10): [SearchResult!]!
}

type Mutation {
  createProduct(input: CreateProductInput!): Product!
  checkout(input: CheckoutInput!): Order!
}

Generated TypeScript Types4.69ms

/** Represents an individual customer or administrator account. */
export interface User extends Node, Timestamps {
  __typename?: 'User';
  id: string;
  email: string;
  fullName: string;
  role: Role;
  isActive: boolean;
  orders: Order[];
  defaultAddress?: Address | null;
  createdAt: string;
  updatedAt?: string | null;
}

/** Core relay pagination node */
export interface Node {
  __typename?: 'Node';
  id: string;
}

/** Auditing timestamps contract */
export interface Timestamps {
  __typename?: 'Timestamps';
  createdAt: string;
  updatedAt?: string | null;
}

/** System permission access role */
export enum Role {
  ADMIN = 'ADMIN',
  CUSTOMER = 'CUSTOMER',
  SUPPORT = 'SUPPORT',
  /** @deprecated Guest accounts are now tracked anonymously */
  GUEST = 'GUEST',
}

export enum OrderStatus {
  PENDING = 'PENDING',
  PROCESSING = 'PROCESSING',
  SHIPPED = 'SHIPPED',
  DELIVERED = 'DELIVERED',
  REFUNDED = 'REFUNDED',
  CANCELLED = 'CANCELLED',
}

export interface Product extends Node, Timestamps {
  __typename?: 'Product';
  id: string;
  sku: string;
  title: string;
  description?: string | null;
  price: number;
  compareAtPrice?: number | null;
  inventory: number;
  tags: string[];
  category: Category;
  variants: ProductVariant[];
  createdAt: string;
  updatedAt?: string | null;
}

export interface ProductVariant {
  __typename?: 'ProductVariant';
  id: string;
  title: string;
  sku: string;
  price: number;
  weightInGrams?: number | null;
  barcode?: string | null;
}

export interface Category extends Node {
  __typename?: 'Category';
  id: string;
  name: string;
  slug: string;
  parent?: Category | null;
}

export interface Order extends Node, Timestamps {
  __typename?: 'Order';
  id: string;
  orderNumber: string;
  customer: User;
  status: OrderStatus;
  items: OrderItem[];
  subtotal: number;
  tax: number;
  shipping: number;
  total: number;
  shippingAddress: Address;
  notes?: string | null;
  createdAt: string;
  updatedAt?: string | null;
}

export interface OrderItem {
  __typename?: 'OrderItem';
  id: string;
  product: Product;
  quantity: number;
  unitPrice: number;
}

export interface Address {
  __typename?: 'Address';
  street: string;
  city: string;
  state: string;
  postalCode: string;
  country: string;
}

export type SearchResult = Product | Category | User;

export interface CreateProductInput {
  sku: string;
  title: string;
  description?: string | null;
  price: number;
  inventory?: number | null;
  tags?: string[] | null;
  categoryId: string;
}

export interface CheckoutInput {
  customerId: string;
  cartItemIds: string[];
  shippingAddressId: string;
  couponCode?: string | null;
}

export type DateTime = string;

export type JSON = Record<string, unknown>;

export interface Query {
  __typename?: 'Query';
  me?: User | null;
  product?: Product | null;
  products: Product[];
  search: SearchResult[];
}

export interface Mutation {
  __typename?: 'Mutation';
  createProduct: Product;
  checkout: Order;
}

// ==========================================
// Field Arguments
// ==========================================

/** Arguments for `User.orders` */
export interface UserOrdersArgs {
  limit?: number | null;
  offset?: number | null;
}

/** Arguments for `Query.product` */
export interface QueryProductArgs {
  id: string;
}

/** Arguments for `Query.products` */
export interface QueryProductsArgs {
  limit?: number | null;
  cursor?: string | null;
  category?: string | null;
}

/** Arguments for `Query.search` */
export interface QuerySearchArgs {
  query: string;
  limit?: number | null;
}

/** Arguments for `Mutation.createProduct` */
export interface MutationCreateProductArgs {
  input: CreateProductInput;
}

/** Arguments for `Mutation.checkout` */
export interface MutationCheckoutArgs {
  input: CheckoutInput;
}

188 TS lines•3845 characters

Ready for Next.js, React, Node, Apollo, URQL

Object Types9type / interface

Interfaces2abstract contracts

Enums2enum format

Unions1polymorphic types

Inputs2mutation payloads

Custom Scalars2mapped types

Zero Dependencies & Instant

Computes 100% inside your browser using a custom lightweight GraphQL Lexer & AST parser. No heavy bundler compilation or CLI installations required.

100% Client-Side Privacy

Your schema definitions, proprietary models, and business domain objects never leave your browser. Zero server uploads and zero telemetry tracking.

Production-Ready Output

Generates clean TypeScript code that integrates immediately with Apollo Client, GraphQL Code Generator, urql, Relay, or native fetch query wrappers.

GraphQL to TypeScript Type Mapping Rules

GraphQL SDL Construct	TypeScript Translation	Explanation & Practical Use
type User { id: ID! }	interface User { id: string; }	Object types become TypeScript interfaces or type aliases with strongly typed properties.
String! (Non-Null)	string	Guaranteed to exist. Never null or undefined.
String (Nullable)	string \| null \| undefined	In GraphQL, all unadorned types are nullable by default.
[String!]!	string[]	Non-nullable list containing non-nullable strings.
[String]	(string \| null)[] \| null	Nullable list where each element can also be null.
union SearchResult = User \| Post	type SearchResult = User \| Post;	Polymorphic unions map directly to TypeScript union types with discriminated unions.
enum Role { ADMIN, USER }	enum Role { ADMIN = 'ADMIN' }	Converted to TS enum, string union ('ADMIN' \| 'USER'), or const object per settings.
field(limit: Int): [Post]	UserPostsArgs { limit?: number \| null }	Field arguments are isolated into strongly-typed parameter interfaces.

Frequently Asked Questions

Why choose interfaces over type aliases for GraphQL types?

TypeScript interfaces support recursive definitions, declaration merging, and native extension syntax (extends), which closely models GraphQL interface implementations. However, if you prefer pure types, you can toggle the Declaration setting to type.

How are GraphQL custom scalars resolved?

Common scalars like DateTime, JSON, UUID, and Upload are automatically mapped to standard TypeScript equivalents. You can add or modify any custom scalar mapping in the Type Options panel above.

Does this generator support field directives and deprecation?

Yes! Directives such as @deprecated(reason: "...") are recognized and automatically transformed into JSDoc @deprecated comments so VS Code and IDEs display strikethrough notices during development.

Is my schema data private and safe?

Completely. The entire conversion runs locally inside your browser via client-side JavaScript. No API calls or background telemetry are transmitted to any server.