typescript-apollo-client-helpers - Graphql Code Generator

import { Callout } from '@theguild/components' import { PluginApiDocs, PluginHeader } from '@/components/plugin' import { pluginGetStaticProps } from '@/lib/plugin-get-static-props' export const getStaticProps = pluginGetStaticProps(__filename)

This plugin generates helpers for improving the integration of TypeScript and Apollo-Client, based on your schema.

<Callout type="warning">Note: this plugin generates code that intended for apollo-client @ > v3 only.</Callout>

This plugin generates fully-typed keyFields and Type-Policies for Apollo-Client.

<Callout> [You can read more about type-policies in Apollo Cache here](https://apollographql.com/docs/react/caching/cache-configuration/#typepolicy-fields) </Callout>

How to use?

Start by adding this plugin to your configuration:

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

const config: CodegenConfig = {
  schema: 'my-schema.graphql',
  generates: {
    'apollo-helpers.ts': {
      plugins: ['typescript-apollo-client-helpers']
    }
  }
}
export default config

Then, use the generated TypeScript type as your signature for typePolicies:

import { StrictTypedTypePolicies } from './apollo-helpers'

const typePolicies: StrictTypedTypePolicies = {
  // Keys in this object will be validated against the types on your schema
  Product: {
    keyFields: ['id'] // Values in this field will be validated against the available fields from the Product type
  },
  Person: {
    keyFields: ['name', 'email']
  },
  Book: {
    // This entire definition is typed, based on available types and fields
    fields: {
      tags: {
        merge: false
      }
    }
  }
}

const cache = new InMemoryCache({ typePolicies })