GraphQL to TypeScript Definitions — Numio

When to use it

• Typing the data returned by a query in a frontend without setting up a codegen.yml and CLI run.
• Checking how a schema change (a field becoming nullable, a new enum value) will look in the generated TypeScript before committing it.

How to use

1. Paste your SDL (type, enum, interface, union, scalar definitions) into the GraphQL Schema editor.
2. Put queries, mutations or fragments in the Document editor, or clear it to get schema types only; a document that does not match the schema is skipped with a warning comment.
3. Copy the generated types: schema types such as User, plus GetUserQuery and GetUserQueryVariables for each named operation.

# GraphQL Schema editor
type Query {
  user(id: ID!): User
}

type User {
  id: ID!
  name: String
  tags: [String!]!
}

# Document editor
query GetUser($id: ID!) {
  user(id: $id) { id name }
}

…
export type Query = {
  __typename?: "Query"
  user?: Maybe<User>
}

export type QueryUserArgs = {
  id: Scalars["ID"]["input"]
}

export type User = {
  __typename?: "User"
  id: Scalars["ID"]["output"]
  name?: Maybe<Scalars["String"]["output"]>
  tags: Array<Scalars["String"]["output"]>
}

export type GetUserQueryVariables = Exact<{
  id: Scalars["ID"]["input"]
}>

export type GetUserQuery = {
  __typename?: "Query"
  user?: { __typename?: "User"; id: string; name?: string | null } | null
}

Details and limitations

The output starts with fixed helper types (Maybe, InputMaybe, Exact, MakeOptional, Scalars, …), shortened to '…' above. Scalars maps each scalar to separate input and output types.

Custom scalars such as Date are typed any; enum values become a TypeScript enum with PascalCase keys (USER becomes User = "USER").

Generation runs in a Web Worker in your browser; nothing is uploaded. The result is formatted with Prettier without semicolons, and the page has no codegen config options.

FAQ

Related tools

Specifications and references

• GraphQL Code Generator: typescript plugin