Autogenerate TypeScript Definitions for GraphQL

, you would have built your own GraphQL API using Apollo, Node, and TypeScript. 🎉🎉🎉

Hopefully, you have taken this a step further and tried to create some sort of client application to consume your API. If so, you probably needed to write a couple of TypeScript definitions for your GraphQL queries & mutations on the client side.

This isn't too bad for a simple API like the one from our free tutorial. However, in a large scale production application, there could be hundreds of GraphQL endpoints & types. Take a look at 

, no joke, there is almost 1000 endpoints & types. Creating TypeScript definitions for those would be a nightmare!

Not only that, changes in the server means you will have to find and update your TypeScript definitions over and over again.

GraphQL API is already type defined! Wouldn't be cool if there is something out there that can translate GraphQL types into TypeScript automatically?

🥁🥁🥁 Ladies & gentleman, let me introduce to you, 

 is a robust command line interface that allows for a variety of different things such as schema validation, generate static types, and etc. And we'll use this amazing tool to autogenerate TypeScript definitions from our GraphQL API.

To use the Apollo CLI, we can install it globally with the following command:

There are two commands we are especially interested in:

We'll set up both of these steps as two separate script commands in our application's 

{
  // ...
  "scripts": {
    // ...
    "codegen:schema": "",
    "codegen:generate": ""
  }
  // ...
}

To download the schema, we'll need to run the 

 command and specify the options we would want. In our case, we'll specify the single minimum option we need - the endpoint and pass in the value of our local GraphQL endpoint (

{
  // ...
  "scripts": {
    // ...
    "codegen:schema": "npx apollo client:download-schema --endpoint=http://localhost:9000/api",
    "codegen:generate": ""
  }
  // ...
}

After a brief period, we'll notice success messages that state 

 file be generated that represents our entire GraphQL schema!

With the GraphQL schema available in our app, we can now look to generate the static types for the 

 mutation in our GraphQL API. This can be done with the Apollo CLI 

We'll specify a few options as we set up the script.

The first option we'll add is the 

 option, which is used to specify the path to the schema file in our 

 file is in the root of our project, the value for the 

apollo client:codegen --localSchemaFile=schema.json

The second option we'll specify is the 

 option which is used to state the files that contain the GraphQL operations we'll want to generate static types for. In my case, all of my GraphQL requests live in TypeScript files within my 

 folder. There fore, I'll specify a value of 

 which entails looking through our entire 

 folder and for any files that have the 

apollo client:codegen --localSchemaFile=schema.json --includes=src/**/*.tsx

The final option we'll specify is the 

 option, which is required and allows us to specify which code generator we'd like to use. 

 are all different options but in our case we're interested in the 

apollo client:codegen --localSchemaFile=schema.json --includes=src/**/*.tsx --target=typescript

Generating query files with 'typescript' target - wrote 3 files

By default, the Apollo code generator creates static typings for the GraphQL documents it finds in 

client/
  src/
    sections
      Listings/
        __generated__/
          DeleteListing.ts
          Listings.ts

If we take a look at one of these auto generated files, we can see TypeScript interfaces for the return data and input variables!

/* tslint:disable */
/* eslint-disable */
// This file was automatically generated and should not be edited.

// ====================================================
// GraphQL mutation operation: DeleteListing
// ====================================================

export interface DeleteListing_deleteListing {
  __typename: "Listing";
  id: string;
}

export interface DeleteListing {
  deleteListing: DeleteListing_deleteListing;
}

export interface DeleteListingVariables {
  id: string;
}
```

```typescript
/* tslint:disable */
/* eslint-disable */
// This file was automatically generated and should not be edited.

// ====================================================
// GraphQL query operation: Listings
// ====================================================

export interface Listings_listings {
  __typename: "Listing";
  id: string;
  title: string;
  image: string;
  address: string;
  price: number;
  numOfGuests: number;
  numOfBeds: number;
  numOfBaths: number;
  rating: number;
}

export interface Listings {
  listings: Listings_listings[];
}

And that's it! Hopefully you have found this interesting & helpful. If you would like to see how this is integrated into a fullstack application created using React, GraphQL, Node, and TypeScript, checkout our 

AUTHOR

Jing Chen

If you have completed our Free GraphQL Course, you would have built your own GraphQL API using Apollo, Node, and TypeScript. 🎉🎉🎉 Hopefully, you have taken this a step further and tried to create some sort of client application to consume your API. If so, you probably needed to write a couple of…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Autogenerate TypeScript Definitions for GraphQL

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript