GraphQL to TypeScript
GraphQL Code Generator

GraphQL SDL to TypeScript Types & Interfaces Converter

Transform GraphQL Schema Definition Language (SDL) types, inputs, and enums directly into clean, zero-dependency TypeScript interfaces.

Presets:
Input
/**
 * -----------------------------------------------------------------------------
 * GraphQL SDL to TypeScript Types & Interfaces
 * Zero-dependency, client-synthesized TypeScript definitions.
 * -----------------------------------------------------------------------------
 */

/* =============================================================================
 * GRAPHQL SCALARS & UTILITY HELPER TYPES
 * ============================================================================= */

export type Maybe<T> = T | null;
export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };

/** All custom GraphQL scalar types defined in schema */
export type DateTime = string;
export type JSON = Record<string, any>;


/* =============================================================================
 * ENUMS
 * ============================================================================= */

export enum UserRole {
  ADMIN = 'ADMIN',
  CUSTOMER = 'CUSTOMER',
  VENDOR = 'VENDOR',
}

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


/* =============================================================================
 * GRAPHQL INTERFACES, OBJECT TYPES & UNIONS
 * ============================================================================= */

export interface Node {
  id: string;
}

export interface Timestamps {
  createdAt: string;
  updatedAt: string | null;
}

/**
 * Represents a customer or administrator account in the store.
 */
export interface User extends Node, Timestamps {
  id: string;
  email: string;
  displayName: string;
  role: UserRole;
  orders: Order[];
  defaultAddress: Address | null;
  createdAt: string;
  updatedAt: string | null;
}

export interface Product extends Node, Timestamps {
  id: string;
  sku: string;
  title: string;
  price: number;
  inventoryCount: number;
  tags: string[];
  createdAt: string;
  updatedAt: string | null;
}

export interface Order extends Node, Timestamps {
  id: string;
  orderNumber: string;
  customer: User;
  status: OrderStatus;
  items: OrderItem[];
  totalAmount: number;
  shippingAddress: Address;
  createdAt: string;
  updatedAt: string | null;
}

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

export interface Address {
  street: string;
  city: string;
  postalCode: string;
  country: string;
}

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

export interface Mutation {
  createProduct: Product;
  checkoutCart: Order;
  cancelOrder: Order;
}

export type SearchResult = Product | User | Order;


/* =============================================================================
 * GRAPHQL INPUT OBJECTS & OPERATION ARGUMENTS
 * ============================================================================= */

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

export interface CheckoutCartInput {
  userId: string;
  itemIds: string[];
  shippingAddress: AddressInput;
}

export interface AddressInput {
  street: string;
  city: string;
  postalCode: string;
  country: string;
}

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

/**
 * Arguments for Query.user
 */
export interface QueryUserArgs {
  id: string;
}

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

/**
 * Arguments for Query.products
 */
export interface QueryProductsArgs {
  limit?: number | null;
  cursor?: 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.checkoutCart
 */
export interface MutationCheckoutCartArgs {
  input: CheckoutCartInput;
}

/**
 * Arguments for Mutation.cancelOrder
 */
export interface MutationCancelOrderArgs {
  orderId: string;
  reason?: string | null;
}

Schema Symbols
15 Entities
Object types, inputs, interfaces, enums and unions parsed
Typed Fields
56 Generated
Strongly-typed TypeScript attributes and argument definitions
Compilation Speed
$<span suppressHydrationWarning>{generated.metrics.parseTimeMs}ms</span> (Pure Client AST)
Instantaneous in-memory recursive descent SDL compilation

Zero-Knowledge Local Execution

All data processing, parsing, and compilation execute strictly inside your local browser memory. Zero external server uploads.

Sub-Millisecond AST Engine

All data payloads remain strictly local with zero external server communication.

Production Ready Export

Clean, optimized output formats ready for immediate deployment.

Technical Reference & Architecture Guide

GraphQL SDL to TypeScript Types & Interfaces Converter — Reference Guide

Transform GraphQL Schema Definition Language (SDL) types, inputs, and enums directly into clean, zero-dependency TypeScript interfaces.

Key Parameters & Controls

Declaration FormatEnum (interface | type)

Output TypeScript structures as extensible interfaces or strict type alias unions.

Default: interface
Nullable Field StrategyEnum (null | undefined | both)

Typing strategy applied to optional and nullable GraphQL fields without the non-null (!) modifier.

Default: both
Array SyntaxEnum (T[] | Array<T>)

Typing convention applied to GraphQL list collections [Type].

Default: T[]
Enum RepresentationEnum (enum | union | const_object)

TypeScript emission style for GraphQL enum definitions (standard enum, string literal union, or const assertion object).

Default: union
Custom Scalar MappingRecord<string, string>

JSON dictionary mapping domain-specific GraphQL scalar types to standard TypeScript types.

Default: {"DateTime": "string", "JSON": "Record<string, unknown>"}

Pro Tips & Best Practices

Typename Narrowing Support

Enable the __typename property in generated interfaces to leverage automatic discriminated union narrowing in Apollo Client, Urql, and Relay cache normalizers.

String Literal Union Enums

Emit enums as string literal unions (e.g. "ADMIN" | "USER") instead of TypeScript enums to avoid extra JavaScript runtime output and maximize tree-shaking.

Separate Input and Entity Types

Keep GraphQL input object types and query argument interfaces distinctly typed (e.g., CreateUserInput) to maintain a strict separation from domain entities.

List Nullability Semantics

Notice GraphQL list nullability semantics: [Item!]! generates Item[], [Item]! produces (Item | null)[], and [Item!] creates Item[] | null.

Common Gotchas & Troubleshooting

TypeScript compilation error TS2304: Cannot find name for custom GraphQL scalars

Define explicit scalar mappings in the Custom Scalar Mapping configuration (for example, mapping DateTime to string or Date, and BigInt to string).

Circular type dependency error with recursive GraphQL SDL models

Switch Declaration Format from "type" alias to "interface", as TypeScript interfaces natively resolve circular and self-referencing declarations.

GraphQL schema directives trigger unrecognized syntax warnings

The parser automatically extracts @deprecated directives into standard JSDoc tags; ensure custom domain directives follow valid SDL AST syntax.

Frequently Asked Questions

How are GraphQL non-null (!) constraints translated to TypeScript?▼

A non-null field (e.g., name: String!) maps to a required property (name: string). Unadorned fields without ! map to optional or nullable properties (name?: string | null) according to your configured strategy.

Does this tool support GraphQL Union and Interface types?▼

Yes. GraphQL interfaces are converted to TypeScript interfaces that child types extend, while GraphQL unions compile to discriminated union types combining __typename qualifiers.

Are schema directives like @deprecated converted to TypeScript annotations?▼

Yes. Directives like @deprecated(reason: "...") are parsed from the SDL AST and emitted as standard JSDoc /** @deprecated ... */ comment blocks above the generated property.

Is my proprietary GraphQL SDL schema sent to external servers or logged?▼

No. All SDL lexical analysis, AST parsing, and TypeScript interface generation execute 100% client-side inside your browser sandbox. No schema data, identifiers, or tokens leave your local device.

Can I convert GraphQL input types as well as standard types?▼

Yes. Both GraphQL type and input declarations are supported. Input types are converted to TypeScript interfaces or type aliases suited for mutation payload variables.

Related Tools & Utilities

All Tools →