Apollo-Client Helpers

Package name	Weekly Downloads	Version	License	Updated
`@graphql-codegen/typescript-apollo-client-helpers` (opens in a new tab)				Jul 22nd, 2023

Installation

pnpm add -D @graphql-codegen/typescript-apollo-client-helpers

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

⚠️

Note: this plugin generates code that intended for apollo-client @ > v3 only.

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

💡

How to use?

Start by adding this plugin to your configuration:

codegen.ts

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 })

Config API Reference

`useTypeImports`

type: boolean default: false

Will use import type {} rather than import {} when importing only types. This gives compatibility with TypeScript's "importsNotUsedAsValues": "error" option

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file': {
       plugins: ['apollo-angular'],
       config: {
         useTypeImports: true
       },
     },
   },
 };
 export default config;

`requireKeyFields`

type: boolean default: false

Remove optional sign from all keyFields fields.

`requirePoliciesForAllTypes`

type: boolean default: false

Remove optional sign from all generated keys of the root TypePolicy.

apollo-angular apollo-next