DevFlow logoDevFlow

GraphQL to TypeScript Converter — Free GraphQL Schema to TS

GraphQL Schema to TypeScript Generator

Generate TypeScript types from GraphQL SDL schema definitions.

Free online GraphQL to TypeScript converter. Paste a GraphQL SDL schema and instantly generate TypeScript interfaces for all object types, input types, and interfaces. Converts unions to TypeScript union types, enums to union literals, enum keyword, or const objects. Handles nullable fields, ReadonlyArray, and custom scalar type mappings. Runs entirely in your browser — no data is ever sent to a server.

Keywords: graphql to typescript, graphql schema to typescript, graphql to types, graphql to interfaces, graphql sdl to typescript, graphql type generator, graphql typescript converter, convert graphql to typescript, graphql to ts online, graphql schema types generator, graphql typescript types

Tags: graphql, typescript, schema, types, converter, sdl

Popular Developer Tools tools

Browse all 35 Developer Tools tools →

How to GraphQL Schema to TypeScript Generator Online

  1. Paste your GraphQL Schema Definition Language (SDL) into the input panel on the left.

  2. Choose your preferred enum style: union literal types, TypeScript enum keyword, or const object.

  3. Toggle options such as readonly properties, optional fields for nullable types, and custom scalar mappings.

  4. Click "Generate" or press ⌘↵ to produce the TypeScript type definitions.

  5. Copy the output with ⌘⇧C and paste it into your TypeScript project or .d.ts declaration file.

GraphQL Schema to TypeScript Generator Features

  • Parses complete GraphQL SDL including object types, input types, enums, unions, interfaces, and scalars

  • Generates TypeScript interfaces for GraphQL object and input types with accurate nullable/required mapping

  • Three enum output styles: TypeScript union literal types, enum keyword, or const object with as const assertion

  • Handles nullable fields (Type vs Type | null | undefined) following GraphQL's explicit nullability model

  • Generates union types for GraphQL union types using TypeScript discriminated union patterns

  • Interface types in GraphQL map to TypeScript interfaces that are then extended by implementing types

  • Optional readonly modifier on all generated properties for immutable type patterns

  • Custom scalar type mapping — configure ID, Date, DateTime, JSON to your preferred TypeScript types

  • GraphQL ID scalar maps to string by default (consistent with Apollo and urql clients)

  • Runs entirely in your browser — your schema is never uploaded to any server

  • Keyboard shortcut ⌘↵ to generate, ⌘⇧C to copy TypeScript output

Frequently Asked Questions

Which GraphQL SDL constructs are supported?
The generator supports: object types (type Foo), input types (input FooInput), enums (enum Status), union types (union Result = A | B), interface types (interface Node), scalar declarations, and extend type constructs. Query/Mutation/Subscription operation definitions (query MyQuery) are not processed — this tool generates type definitions from schema SDL, not from operation documents.
How are nullable fields handled?
In GraphQL, fields are nullable by default — adding ! makes them non-null. The generator maps nullable fields to `Type | null` in TypeScript and non-null fields to `Type`. For optional object fields, you can enable the option to also add `| undefined` to represent fields that may be absent from partial response objects.
Which enum style should I use?
Union literal types (`type Status = "ACTIVE" | "INACTIVE"`) are recommended for most projects — they are the most idiomatic TypeScript and work seamlessly with string comparisons. Use the `enum` keyword if your project already uses TypeScript enums consistently. Use `const object` if you need runtime enum values without TypeScript enum semantics.
What about custom scalars like Date or JSON?
Custom scalars declared in your schema (e.g., `scalar DateTime`) default to `unknown` in the generated output. Configure the custom scalar mapping option to map them to your preferred TypeScript types — for example, DateTime → string, Date → Date, JSON → Record<string, unknown>.
How does this compare to GraphQL Code Generator?
GraphQL Code Generator (graphql-codegen) is a powerful CLI tool that generates types from both schema and operation documents, supports plugins, and integrates with build pipelines. This browser tool is a lightweight alternative for quick type generation from schema SDL — ideal for exploration, prototyping, or one-off type extraction without installing dependencies.
Can I use the generated types with Apollo Client or urql?
Yes. The generated TypeScript interfaces match the shape of data returned by GraphQL queries. For full typed operations (query result types, variable types), you also need types generated from your operation documents — use graphql-codegen for complete Apollo/urql type safety in a production project.
Is my GraphQL schema safe to paste here?
Yes. Schema parsing and TypeScript generation run entirely in your browser — your schema is never sent to any server. GraphQL schemas rarely contain sensitive data, but this is still a useful assurance for internal or proprietary API schemas.
What about GraphQL fragments?
Fragment definitions in SDL are not common — fragments are typically part of operation documents, not schema definitions. The generator processes SDL type definitions only. For generating TypeScript types from operation fragments, use graphql-codegen with the TypeScript Operations plugin.

Related Developer Tools