Development · July 2020

Generating TypeScript types and React Hooks based on GraphQL endpoint

Autogenerate Typescript types and custom React hooks in React applications with GraphQL Code Generator.

Danilo WoznicaDeveloper

Nowadays, developing ReactJS with TypeScript gives us a solid way to write applications: it adds the advantage of type-safety, component auto-documentation, error handling, and accurate autocomplete in the editor code. However, it still requires a considerable effort to write types and keep them maintainable. Moreover, when the data provider is a GraphQL server, it makes you feel like you're doing a useless job, given the server already has its own schemas for types. Seems redundant, right?

With this in mind, GraphQL Code Generator gives us the ability to generate TypesScript typing out of GraphQL schemas. Beyond that, it gives us a couple of plugins to create custom React hooks that don't require any kind of maintenance or workaround to fit into your application.

Among many others, some of the benefits of using this tool:

  • Codeless: forget about creating the interfaces/types for every GraphQL endpoints; save time and spend effort on what matters;
  • Development experience: as a result of having the types always available, your editor will provide meaningful autocomplete and error checking;
  • Types always up-to-date: if your GraphQL endpoint schemas change, your application will be updated and typescript will help you make sure you make the necessary changes.

Setup

First of all, let's install the dependencies needed:

1npm i @apollo/react-hooks graphql
1npm i @graphql-codegen/cli @graphql-codegen/import-types-preset @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo --save-dev

I'm considering the following folder structure, but of course, feel free to adapt it to your liking, just have in mind that it needs a place to store the schemas that will be fetched by the Code Generator:

1📦 my-project
2 ┣ 📂 src
3 ┃ ┣ 📂 pages
4 ┃ ┃ ┗ index.tsx
5 ┃ ┣ 📂 queries
6 ┃ ┃ ┣ 📂 autogenerate
7 ┃ ┃ ┗ my-query.gql
8 ┃ ┗ apollo-client.ts
9 ┣ codegen.yml
10 ┗ package.json

Then, basically, you'll need to create a configuration file at the root of the project, named codegen.yml. The following snippet shows how I usually set it up in my projects, where it generates different files for its own purpose, in other words, split by concerns like GraphQL operations and server schemas:

1# Endpoint API, the following URL is a example
2schema: https://countries-274616.ew.r.appspot.com/graphql/
3overwrite: true
4
5# Format files
6hooks:
7 afterAllFileWrite:
8 - prettier --write
9
10generates:
11 # Get schemas from server
12 src/queries/autogenerate/schemas.tsx:
13 documents: 'src/queries/**/**.gql'
14 plugins:
15 - typescript
16
17 # Create operations based on queries
18 src/queries/autogenerate/operations.tsx:
19 documents: 'src/queries/**/**.gql'
20 preset: import-types
21 presetConfig:
22 typesPath: ./schemas
23 plugins:
24 - typescript-operations
25
26 # 1. Export GraphQL documents
27 # 2. React interface
28 src/queries/autogenerate/hooks.tsx:
29 documents: 'src/queries/**/**.gql'
30 preset: import-types
31 presetConfig:
32 typesPath: ./operations
33 plugins:
34 - typescript-react-apollo
35 config:
36 # Optionals
37 withHOC: false
38 withComponent: false
39 withHooks: true

Also, let's add the scripts to generate the schemas and watch the files change in package.json:

1"scripts": {
2 ...
3 "schemas": "graphql-codegen --config codegen.yml",
4 "schemas:watch": "npm run schemas -- --watch",
5},

And as it turns out in the editor code:

This is only one of the possible ways to use it, as it has many plugins, presets, integrations, and configurations, for different purposes such as to generate React higher-order component, Gatsby integration, prettier and lint the files, among other cool things. Feel free to check out the documentation here.

I've made a repository available with the code above, and you can check it out here.

TypeScriptReactJSGraphQL

Danilo Woznica

Developer @ Significa

Danilo came from the Wild West across the Atlantic also described as Brazil. That’s right, he was born in the home of Football and Cachaça and somehow he chose to become a Front-End Developer. Good for us! Valeu!