Types generation

Types are only enforced between the backend and frontend with GraphQL at runtime (when sending the request). What happens if we change something in the backend and forget to reflect this change in the frontend? It will crash. Let's make sure this doesn't happen.

We are going to generate types from the GraphQL schema with Apollo CLI. Then use them on the frontend. If something changes on the backend, Typescript will let us know.

~/

yarn add apollo

Start the server:

~/packages/api

$ ts-node -T src/index.ts

Create a new package:

~/

mkdir packages/types

Generate the types:

~/packages

apollo codegen:generate --target=typescript --queries='packages/web/src/**/*.tsx' --endpoint=http://localhost:8080/graphql --tagName=gql --outputFlat packages/types/graphql.d.ts

To fix Apollo does not support anonymous operations change:

LinksPage.tsx

const { data, loading, error } = useQuery(gql`
    {
      health {
        ok
      }
    }
  `);

to

LinksPage.tsx

const { data, loading, error } = useQuery(gql`
    query health {
      health {
        ok
      }
    }
  `);

You should now see types.d.ts in packages/types. Let's create a package.json and index.d.ts for this package:

~/packages/types/package.json

{
  "name": "api-types",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {}
}

index.d.ts

export * from './graphql'

and now use Lerna to add the types to web:

$ lerna add api-types --scope=web

We can now import the variables:

import {
  signUp as SignUpResponse,
  signUpVariables as SignUpVariables
} from "api-types";

and enforce types with queries and mutations:

const [signUpMutation, { loading, error }] = useMutation<
    SignUpResponse,
    SignUpVariables
  >(SIGNUP_MUTATION, {
    onCompleted({ signUp }) {
      // ...
    }
  });

yarn add <dependency> won't work in anymore. Use lerna add dependency> --scope=web instead.

Later, if we have a React Native app or a queue worker, we will be able to reuse the types from this package.

types-generation branch and pull request available on GitHub.