GraphQL Code Generator for React/Vue and Apollo

I will introduce my personal take in this article but most of the contents will just be pointers because the official doc is good enough.

When writing a frontend project that connects to GraphQL, since GraphQL comes with type definitions it is pretty easy to adopt the types in Typescript to enforce a fully type safe dev environment by using GraphQL Code Generator.

Here is the official guide for React/Vue Apollo: https://the-guild.dev/graphql/codegen/docs/guides/react-vue

Please use official doc to install packages etc. first

My setup

codegen.ts

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  overwrite: true,
  schema: 'https://example.com/graphql',
  documents: './gql/**/*.{ts,tsx,gql}',
  generates: {
    './generated/gql/': {
      preset: 'client',
    },
    './graphql.schema.json': {
      plugins: ['introspection'],
    },
  },
};

export default config;

This automatically comes with a client preset.

It is also recommended to install the typescript plugin from the official guide.