GraphQL Codegen TypeScript React Apollo

@graphql-codegen/typescript-react-apollo is a plugin for GraphQL Code Generator that transforms your GraphQL operations into fully typed React code for Apollo Client. From your queries, mutations, and subscriptions it generates ready-to-use React hooks (useQuery, useMutation, useSubscription), higher-order components, and render-prop components, all typed against your schema.

Instead of hand-writing typed variables and result shapes for every operation, developers get generated, always-in-sync bindings that eliminate a whole class of runtime errors. It is one of the most widely used community plugins in the GraphQL Code Generator ecosystem, with over a million weekly downloads.

What You Get

• Generated, fully typed React hooks (useQuery, useLazyQuery, useMutation, useSubscription) per operation
• Optional higher-order components and render-prop components for older React patterns
• TypeScript types for operation variables and results derived directly from your schema
• Configurable output: hooks, HOCs, components, and naming conventions via plugin options
• Seamless integration into the GraphQL Code Generator pipeline and its watch mode

Common Use Cases

• Generating type-safe Apollo Client hooks for a React app from a GraphQL schema
• Eliminating hand-written types for query and mutation variables and results
• Keeping frontend GraphQL bindings automatically in sync with backend schema changes
• Migrating legacy HOC/render-prop GraphQL components to typed generated equivalents

Under The Hood

Architecture - The plugin implements the GraphQL Code Generator plugin contract from src/index.ts, delegating the heavy lifting to a visitor (src/visitor.ts) that extends @graphql-codegen/visitor-plugin-common. As codegen walks each GraphQL operation’s AST, the visitor builds the corresponding typed React artifact — a hook, HOC, or component — and index.ts assembles imports and the final output. src/config.ts defines the plugin’s configuration schema.

Tech Stack - Written in TypeScript and built on the graphql-codegen framework: @graphql-codegen/plugin-helpers and @graphql-codegen/visitor-plugin-common supply the plugin and AST-visitor infrastructure, change-case-all handles identifier casing, auto-bind wires visitor methods, and tslib provides runtime helpers. Tests run under Vitest with snapshot fixtures.

Code Quality - The package ships a substantial Vitest suite (react-apollo.spec.ts plus a React 16+ variant) backed by snapshot fixtures that pin generated output, guarding against regressions in emitted code. It sits in an actively developed monorepo with hundreds of contributors and frequent releases, following the shared codegen linting and build tooling.

API Design - Developers configure the plugin declaratively in their codegen config rather than calling an imperative API, which fits the generate-then-consume workflow. Rich options (withHooks, withHOC, withComponent, naming) make output adaptable, though understanding them requires familiarity with both GraphQL Code Generator and Apollo Client — a moderate learning curve mostly inherited from those tools rather than the plugin itself.”