GraphQL Codegen Saves Time!

Recently I came into a project late. When working through how they built the API layer I found that it could be optimized using codegen for the TS data types. One of the big pains of typescript is creating types and ensuring that they are correct. To me the human factor here is just as dangerout as not using typescript at all. If I can make a mistake on a variable passed into a component I can just as easily make the same mistake on a type.

Enter GraphQL codegen from the Guild! This tool is what made me a TS enthusiast.

GraphQL Code Generator by The Guild is a tool that generates code out of your GraphQL schema. Whether you are developing a frontend or backend, you can use GraphQL Code Generator to generate TypeScript typings for your data. Read more about codegen at the Guild's GraphQL Codegen homepage.

_For the sake of this article we are going to focus on front end engineering. In my example we are using Next.JS with a custom GraphQL CMS providing us data. _

Here's how it works:

• You define your GraphQL schema or you point it to your server with introspection on.
• You define a configuration file for GraphQL Code Generator, specifying the plugins you want to use.(see below for an example)
• You run GraphQL Code Generator, and it generates TypeScript typings based on your schema and configuration.

Advantages of using GraphQL Code Generator:

1. Type Safety: By generating TypeScript typings for your GraphQL schema, you can ensure type safety in your application. This means you can catch potential errors at compile time rather than runtime.
2. Time Saving: Writing typings manually can be time-consuming, especially for large schemas. GraphQL Code Generator automates this process, saving you time and effort.
3. Consistency: By generating typings from the schema, you can ensure consistency between your data and your code. This can help prevent bugs that might be caused by data mismatches.

GraphQL codegen example:

in a client/ui project add the codegen.ts file to the root to setup your basic config.

import dotenv from 'dotenv';
dotenv.config();
import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  overwrite: true,
  schema: [
    {
      [`${process.env.NEXT_PUBLIC_API}/graphql`]: {
        headers: {
          Authorization: process.env.NEXT_PUBLIC_API_KEY,
        },
      },
    },
  ],
  documents: ['**/*.tsx'],
  config: {},
  generates: {
    'types/graphql.ts': {
      plugins: ['typescript'],
    },
    './': {
      preset: 'near-operation-file',
      presetConfig: {
        extension: '.generated.tsx',
        baseTypesPath: 'types/graphql.ts',
      },
      plugins: ['typescript-operations'],
    },
    './graphql.schema.json': {
      plugins: ['introspection'],
    },
  },
};

export default config;

Then In your package.json file add the script.

"codegen": "graphql-codegen --config codegen.ts"

Then it becomes as easy as running yarn codegen This code will generate the type files next to the type files. They will be appeneded with the .generated name.

Up Next: Using Fragments to speed up work