GraphQL Code Generator for Typescript React Apollo

GraphQL Code Generator — React Apollo Typescript template

GraphQL Code Generator is a template based generator that lets you generate anything out of your GraphQL schemas and queries.

So we’ve created a new template that generates React Apollo’s Query, Mutation and Subscription components, as well as HOC components, all completely typed by TypeScript, so you won’t have to do that work manually!

Introducing a code generator for React Apollo

Whether you use the new React Apollo API or you prefer to use HOC, there is really no need to write those wrapper components again and again!

Based on a GraphQL static schema and a GraphQL query, the GraphQL Codegen - Typescript React Apollo Template will generate a ready to use, fully typed components. All you need to do is to write your query, mutation or subscription and just use those components in your application.

Using React, TypeScript and GraphQL in a coordinated way, gives us new level of simplicity and power for our developer experience:

• Less code to write — no need to create a network call, no need to create Typescript typings, no need to create a dedicated React Component
• Strongly typed out of the box — all types are being generated, no need to write any Typescript definitions and struggle to keep them updated
• Full developer experience of tools and IDEs — development time autocomplete and error checking, not only across your frontend app but also with your API teams!

Play with it

We prepared an example of how to use those auto generated components, it’s available on StackBlitz.

And another example on exist on this repository:

dotansimha/graphql-code-generator

Start using it

All you need to do to use React Apollo template is to install two packages:

npm install graphql-code-generator graphql-codegen-typescript-react-apollo-template --save-dev

Now let’s set up a npm script to run gql-gen command:

gql-gen --schema https://fakerql.com/graphql --template graphql-codegen-typescript-react-apollo-template --out ./src/generated-models.tsx "./src/**/*.graphql"

It might seem like a lot but lets split it into smaller pieces and explain each one of them it will make things easier.

• — schema — path of a file with schema or an URL
• — template — name of a template, equals name of a package
• — out — path of a file for an output
• glob based on which GraphQL Codegen will try to find documents

Then, define a .graphql file with a document that you’d like to use in a component:

query UserQuery($id: ID!) {
    User(id: $id) {
        id
        firstName
        lastName
        email
        avatar
    }
}

Next, you need to run GraphQL Code Generator to generate Typescript types and React components.

Then, you simply import and use it like any React Apollo API component (Query, Mutation or Subscription):

import { UserQuery } from './generated-models';
...
<UserQuery.Component>
 {({ loading, error, data }) => {
  ...
 }
</UserQuery.Component>

GraphQL Code Generator takes the query’s name, makes it PascalCased and puts “Component” in its namespace. For example, “userQuery” becomes “UserQuery”; and its React Apollo API component is generated as “UserQuery.Component”

You can learn more about React Apollo API;

Get started | Apollo Client

Higher Order Components

You may use Higher Order Components in your React project together with Redux connectors or other state management tools.

If you don’t know which one you should use, please check the following docs to learn more about HOCs

Higher-Order Components - React

React-Apollo template works for you as well, it generates HOC functions with generated typings. So, the only thing you do is to import the HOC functions from your query’s namespace like the component version.

HOC Function Example Usage

We believe GraphQL is a game changer in how you plan and create your frontend apps.

The vision that guides us is that you should be able to sketch a list of data types your backend can provide, sketch components and their data dependencies — and all the rest of the plumbing can be generated for you.

Once you’ll write an app like that, you will ask yourself why did you write all the other boilerplate code by yourself before.

Please try this template out and let us know what you think in the comments!

This is just one template out of many, check out more things you can generate with the GraphQL Code Generator and give us ideas about other templates you would like to see implemented.

dotansimha/graphql-code-generator

Follow us on GitHub and Medium, we are planning to release many more posts in the next couple of weeks about what we’ve learned using GraphQL in recent years.