Autogenerated types with Apollo CLI#

📝 This lesson's quiz can be found - here.
🗒️ Solutions for this lesson's quiz can be found - here.

In the current and last module, we've come to recognize how powerful Hooks can be when it comes to making GraphQL queries and mutations. In this module, we've brought in React Apollo and used React Apollo's useQuery and useMutation Hooks. With either the custom Hooks or React Apollo Hooks, we've passed in custom type definitions we've created to help shape the type of data and variables we are to receive and use in our GraphQL requests.

We've created the custom typings for our requests in a types.ts file located within the src/sections/Listings folder.

export interface Listing {

  id: string;

  title: string;

  image: string;

  address: string;

  price: number;

  numOfGuests: number;

  numOfBeds: number;

  numOfBaths: number;

  rating: number;

}

export type ListingsData = {

  listings: Listing[];

};

export interface DeleteListingData {

  deleteListing: Listing;

}

export interface DeleteListingVariables {

  id: string;

}

In the Listings/types.ts file, we've created custom type definitions for our listings query and deleteListing mutation by surveying the GraphQL API and schema.

In a large scale production application, we could have dozens and dozens of GraphQL documents for all the GraphQL requests we might have in an app. First off, it'll be a little tedious having to create the typings for all of these documents. Second, a breaking change in the server will make finding and updating our client types a little difficult. If we think about it, our GraphQL API already has it's own types. Wouldn't be cool if we can just leverage those types automatically?

We can with the help of code generators! The community has created plenty GraphQL code generators aimed at addressing this point. To name a few, there is the:

• GraphQL Code Generator

• Typed Graphqlify

• Apollo CLI

Though these tools have differences, they all allow for generating client-side types from a GraphQL schema.

Among generating client-side types, GraphQL Code Generator allows for generating other code like server-side types, client-side components, etc.

GraphQL Code Generator and the Apollo CLI can help generate client-side types for many different languages like TypeScript, Swift, Java, C#, etc.

Apollo CLI#

The Apollo CLI is a robust command line interface that allows for a variety of different things such as schema validation, server compatibility checks, and the ability to generate static types. We'll use the official Apollo CLI to generate static types from our GraphQL API.

To use the Apollo CLI, we're able to install the apollo tooling globally or as an application dependency. What we'll like to do instead is set up scripts in the package.json file of our app and run the apollo tooling commands with the npx command.

There are two commands we'll need to run to be able to generate static types from our schema.

1. We first need to download our GraphQL schema and save it in our project for the Apollo CLI to be able to generate types.

2. We can then generate the static types of our requests from our schema.

We'll set up both of these steps as two separate script commands in our application's package.json file. We'll label these scripts codegen:schema and codegen:generate.

{

  // ...

  "scripts": {

    // ...

    "codegen:schema": "",

    "codegen:generate": ""

  }

  // ...

}

To download the schema, we'll need to run the apollo client:download-schema 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 (http://localhost:9000/api).

{

  // ...

  "scripts": {

    // ...

    "codegen:schema": "npx apollo client:download-schema --endpoint=http://localhost:9000/api",

    "codegen:generate": ""

  }

  // ...

}

For more detail in all the different apollo CLI commands and options, be sure to check out the Apollo CLI README.md.

We'll run the newly created codegen:schema script in our command line.

client $: npm run codegen:schema

After a brief period, we'll notice success messages that state Loading Apollo Project and Saving schema to schema.json.