Codegen
PluginsTypeScriptreact-apollo

We now recommend using the client-preset package for a better developer experience and smaller impact on bundle size.

Get started on our “React/Vue” guide.

⚠️

The generated hooks created by this package are no longer compatible with Apollo Client 4.0. We provide a codemod that automates the the migration to the client preset. See the tutorial video to learn how to use the codemod to migrate your codebase.

TypeScript React Apollo

Package nameWeekly DownloadsVersionLicenseUpdated
@graphql-codegen/typescript-react-apolloDownloadsVersionLicenseApr 19th, 2026

Installation

npm i -D @graphql-codegen/typescript-react-apollo
⚠️

Usage Requirements In order to use this GraphQL Codegen plugin, please make sure that you have GraphQL operations (query / mutation / subscription and fragment) set as documents: … in your codegen.yml.

Without loading your GraphQL operations (query, mutation, subscription and fragment), you won’t see any change in the generated output.

This plugin generates React Apollo components and HOC with TypeScript typings.

It extends the basic TypeScript plugins: @graphql-codegen/typescript, @graphql-codegen/typescript-operations - and thus shares a similar configuration.

Config API Reference

withComponent

type: boolean default: false

Customize the output by enabling/disabling the generated Component (deprecated since Apollo-Client v3). For more details: https://apollographql.com/docs/react/api/react/components

Usage Examples

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

withHOC

type: boolean default: false

Customize the output by enabling/disabling the HOC (deprecated since Apollo-Client v3). For more details: https://apollographql.com/docs/react/api/react/hoc

Usage Examples

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

withHooks

type: boolean default: true

Customized the output by enabling/disabling the generated React Hooks. For more details: https://apollographql.com/docs/react/api/react/hooks

Usage Examples

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

withMutationFn

type: boolean default: true

Customized the output by enabling/disabling the generated mutation function signature.

Usage Examples

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

withRefetchFn

type: boolean default: false

Enable generating a function to be used with refetchQueries

Usage Examples

codegen.ts
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
       config: {
         withRefetchFn: false
       },
     },
   },
 };
 export default config;

apolloReactCommonImportFrom

type: string default: @apollo/react-common

Customize the package where apollo-react common lib is loaded from.

apolloReactComponentsImportFrom

type: string default: @apollo/react-components

Customize the package where apollo-react component lib is loaded from.

apolloReactHocImportFrom

type: string default: @apollo/react-hoc

Customize the package where apollo-react HOC lib is loaded from.

apolloReactHooksImportFrom

type: string default: @apollo/react-hooks

Customize the package where apollo-react hooks lib is loaded from.

componentSuffix

type: string default: Component

You can specify a suffix that gets attached to the name of the generated component.

reactApolloVersion

type: number (values: 2, 3) default: 3

Sets the version of react-apollo. If you are using the old (deprecated) package of react-apollo, please set this configuration to 2. If you are using Apollo-Client v3, please set this to 3.

Usage Examples

codegen.ts
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
       config: {
         reactApolloVersion: 2
       },
     },
   },
 };
 export default config;

withResultType

type: boolean default: true

Customized the output by enabling/disabling the generated result type.

Usage Examples

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

withMutationOptionsType

type: boolean default: true

Customized the output by enabling/disabling the generated mutation option type.

Usage Examples

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

withFragmentHooks

type: boolean default: false

Whether or not to include wrappers for Apollo’s useFragment hook.

Usage Examples

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

addDocBlocks

type: boolean default: true

Allows you to enable/disable the generation of docblocks in generated code. Some IDE’s (like VSCode) add extra inline information with docblocks, you can disable this feature if your preferred IDE does not.

Usage Examples

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

defaultBaseOptions

type: ReactApolloPluginConfigDefaultBaseOptions

Configure default mutation and query hook options.

hooksSuffix

type: string

Usage Example

With React Hooks

For the given input:

query Test {
  feed {
    id
    commentCount
    repository {
      full_name
      html_url
      owner {
        avatar_url
      }
    }
  }
}

And the following configuration:

codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
  schema: 'YOUR_SCHEMA_HERE',
  documents: './src/**/*.graphql',
  generates: {
    './generated-types.ts': {
      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo']
    }
  }
}
export default config

Codegen will pre-compile the GraphQL operation into a DocumentNode object, and generate a ready-to-use React Hook for each operation you have.

In your application code, you can import it from the generated file, and use the React Hook in your component code:

import { useTest } from './generated-types'
 
export const MyComponent: React.FC = () => {
  const { data, error, loading } = useTest()
 
  return <div>…</div>
}

Generate Data Component

Codegen also supports generating data Components (deprecated in @apollo/client v3), you can turn it on this way:

codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
  schema: 'YOUR_SCHEMA_HERE',
  documents: './src/**/*.graphql',
  generates: {
    './generated-types.ts': {
      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
      config: {
        withComponent: true
      }
    }
  }
}
export default config

Generate HOC

Codegen also supports generating High-Order-Components (deprecated in @apollo/client v3), you can turn it on this way:

codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
  schema: 'YOUR_SCHEMA_HERE',
  documents: './src/**/*.graphql',
  generates: {
    './generated-types.ts': {
      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
      config: {
        withHOC: true
      }
    }
  }
}
export default config
💡

Watch Episode #29 of graphql.wtf for a quick introduction to using this plugin with GraphQL Code Generator:

operationsreact-query