quicktype supports GraphQL now. Here we'll go over an example showing how to make type-safe GraphQL queries with quicktype.

Why GraphQL with quicktype?

GraphQL gives you a strongly-typed schema, but you still need corresponding types in your application code. quicktype bridges this gap by generating types directly from your GraphQL queries.

Getting Started

To generate types from a GraphQL query, you need:

1. Your GraphQL query
2. The GraphQL schema (or a URL to the schema endpoint)

Example

Given this GraphQL query:

query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
    posts {
      title
      createdAt
    }
  }
}

And a schema that defines User and Post types, quicktype generates:

interface GetUserQuery {
  user: User | null;
}

interface User {
  id: string;
  name: string;
  email: string;
  posts: Post[];
}

interface Post {
  title: string;
  createdAt: string;
}

Command Line Usage

quicktype \
  --src-lang graphql \
  --graphql-schema schema.graphql \
  query.graphql \
  -o Types.ts

This generates TypeScript types that exactly match your GraphQL query responses, ensuring type safety throughout your application.

Integration with Apollo

The generated types work seamlessly with Apollo Client, giving you autocomplete and type checking for all your GraphQL operations.