Generate Types for Your GraphQL Schemas in 5 Minutes
Tags: graphql, graphcms, typescript
Published: 2022-07-06 13:12:50

---
title: Generate Types for Your GraphQL Schemas in 5 Minutes
published: true
description: How to quickly generate types for your Graphql schemas in 4 steps. 
tags: graphql, graphcms, typescript
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zp4s4c1d181icp9yzkcc.png
# Use a ratio of 100:42 for best results.
---

I couldn't find one single article that actually included all the steps to do this, so here's the step-by-step guide I wish I had hours ago on how to generate TypeScript types for your Graphql schemas 🫠

- Separate your queries out from your components (optional, but nice)
- Appease Webpack and TypeScript
- Install some packages and plugins
- Codegen time!

### Context
I'm building an app using [GraphCMS](https://graphcms.com/) (super awesome, by the way) but the only gotcha is it doesn't offer a plugin to export your schema types. Since I can't function without TypeScript, that was a big problem the second I tried to write mutations or generate static pages using my schemas. 

## Step 1
Move your queries to a directory where only your queries will live. 

Why? [Separation of concerns](https://nalexn.github.io/separation-of-concerns/), you don't want to couple your business logic with your presentational components. Also, it'll make it easier to to write your codegen config file. 

```
query Question {
    questions {
	prompt
	tags
	id
	answer {
	    html
	}
    }
}
``` 

Make sure each query is stored in its own individual `.graphql` file. 

## Step 2
If you're using Create React App or [NextJS](https://nextjs.org/), you won't be able to compile at this point because webpack has no idea what a `.graphql` file is. 

I'm using Next so this will end up in my `next.config.js` file, but if you're using CRA you'll want to follow [these directions](https://create-react-app.dev/docs/loading-graphql-files/) so webpack can parse your query files. 

```
module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    });
    return config;
  },
  webpackDevMiddleware: (config) => {
    return config;
  },
};
```

By the way, I found these config steps in this awesome [NextJS + GraphQL + TypeScript setup](https://dev.to/ivanms1/next-js-graphql-typescript-setup-5bog) article 👏🏼

You'll also want to add types for these files so Typescript doesn't yell at you. Add this to your `graphql.d.ts` file at the root of your app. 

```
declare module '*.graphql' {
  import { DocumentNode } from 'graphql';
  const Schema: DocumentNode;

  export = Schema;
}
```

## Step 3
Install a bunch of stuff. 

I'm using yarn so swap out `npm i` for `yarn add` if you haven't joined the yarn bandwagon, yet. 

```
yarn add graphql-tag
yarn add graphql
yarn add @graphql-codegen/cli
yarn add @graphql-codegen/typescript-operations
yarn add @graphql-codegen/typescript
```

👆🏼 There's a lot of stuff here, so let's break it down. 

- graphql-tag -> is our webpack loader
- graphql -> you probably installed this already, but this is going to be an essential package later for when you want to make queries
- @graphql-codegen/cli -> this is [an awesome CLI](https://www.graphql-code-generator.com/) 
that helps you setup your codegen config
- the rest are plugins for the aforementioned CLI To get it to work with TypeScript

## Step 4
Once you've run all those scripts, we can finally codegen our types! 

You can use the CLI to setup your config, but I prefer to do it [manually](https://www.graphql-code-generator.com/) (it's also quicker, tbh. I tried 3 different codegen CLI's and this manual way the fastest and least error prone). 

Create a `codegen.yaml` file at the root of your app and start plugging in the link to your API schema and directories for your queries. 

```
schema: 'http://my-graphql-api.com/graphql'
documents: './src/queries/*.graphql'
generates:
  graphql/generated.ts:
    plugins:
      - typescript
      - typescript-operations
```

The `documents` value must be a folder where all your queries live and they must be stored inside files that end with `.graphql`, `.ts`, or `.tsx`. 

Last but not least, we'll add a script to our `package.json` to run all this. 

```
"scripts": {
    "codegen": "graphql-codegen"
}
```

Now you can run `yarn codegen` and see your generated types! Happy coding, y'all ⚛