Codegen
PluginsTypeScriptapollo-client-helpers

Apollo-Client Helpers

Package nameWeekly DownloadsVersionLicenseUpdated
@graphql-codegen/typescript-apollo-client-helpersDownloadsVersionLicenseSep 5th, 2024

Installation

npm i -D @graphql-codegen/typescript-apollo-client-helpers

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.

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.

💡

You can read more about type-policies in Apollo Cache here

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 })
apollo-angularapollo-next