GraphQL Schema to TypeScript Types Generator Online — Free Tool

How to GraphQL Schema to TypeScript Generator Online

1. 1

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

2. 2

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

3. 3

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

4. 4

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

5. 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

• GraphQL Query BuilderBuild and test GraphQL queries with schema introspection and AI suggestions.
• JSON to TypeScriptConvert JSON to TypeScript interfaces or type aliases instantly.
• JSON to Zod SchemaConvert JSON to Zod schema definitions for runtime validation.
• JSON to TypeScript & Schema GeneratorGenerate TypeScript interfaces, Zod schemas, and Valibot schemas from JSON.
• JSON to Protobuf Schema GeneratorGenerate Protocol Buffer (.proto) schema definitions from JSON objects.