or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdindex.mdplugin-function.mdvalidation.mdvisitor.md
tile.json

tessl/npm-graphql-codegen--typescript-react-apollo

GraphQL Code Generator plugin for generating TypeScript-typed React Apollo components, hooks, and HOCs from GraphQL operations

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@graphql-codegen/typescript-react-apollo@4.3.x

To install, run

npx @tessl/cli install tessl/npm-graphql-codegen--typescript-react-apollo@4.3.0

index.mddocs/

TypeScript React Apollo

TypeScript React Apollo is a GraphQL Code Generator plugin that automatically generates TypeScript-typed React Apollo components, hooks, and higher-order components (HOCs) from GraphQL operations. It provides complete type safety for React applications using Apollo Client by creating ready-to-use hooks like useQuery, useMutation, and useSubscription with full TypeScript type definitions.

Package Information

  • Package Name: @graphql-codegen/typescript-react-apollo
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @graphql-codegen/typescript-react-apollo

Core Imports

Note: This is a GraphQL Code Generator plugin. It's not imported directly in your application code, but rather configured in your codegen.yml or codegen.ts file.

For plugin development or custom integrations:

import { plugin, validate, ReactApolloVisitor } from "@graphql-codegen/typescript-react-apollo";

For standard usage, you configure it in your GraphQL Code Generator setup and use the generated hooks in your React components:

// Generated by the plugin in your configured output file
import { useGetUserQuery, useCreateUserMutation } from './generated/graphql';

Basic Usage

This plugin is used as part of a GraphQL Code Generator configuration:

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

const config: CodegenConfig = {
  schema: 'http://localhost:4000/graphql',
  documents: 'src/**/*.graphql',
  generates: {
    'src/generated/graphql.tsx': {
      plugins: [
        'typescript',
        'typescript-operations', 
        'typescript-react-apollo'
      ],
      config: {
        withHooks: true,
        withComponent: false,
        withHOC: false
      }
    }
  }
};

export default config;

The plugin generates TypeScript code like:

// Generated hooks from your GraphQL operations
export function useGetUsersQuery(baseOptions?: Apollo.QueryHookOptions<GetUsersQuery, GetUsersQueryVariables>) {
  const options = {...defaultOptions, ...baseOptions}
  return Apollo.useQuery<GetUsersQuery, GetUsersQueryVariables>(GetUsersDocument, options);
}

export function useCreateUserMutation(baseOptions?: Apollo.MutationHookOptions<CreateUserMutation, CreateUserMutationVariables>) {
  const options = {...defaultOptions, ...baseOptions}
  return Apollo.useMutation<CreateUserMutation, CreateUserMutationVariables>(CreateUserDocument, options);
}

Architecture

The plugin consists of three main components:

  1. Plugin Function: Main entry point that processes GraphQL schema and documents
  2. Configuration Interface: Extensive configuration options for customizing generated code
  3. Visitor Class: Core visitor that generates React-specific code patterns

The plugin supports both Apollo Client v2 and v3, with different import patterns and API generation strategies based on the configured version.

Capabilities

Plugin Function

The main plugin function that processes GraphQL schema and documents to generate React Apollo code.

declare const plugin: PluginFunction<ReactApolloRawPluginConfig, Types.ComplexPluginOutput>;

function plugin(
  schema: GraphQLSchema,
  documents: Types.DocumentFile[],
  config: ReactApolloRawPluginConfig,
): Types.ComplexPluginOutput;

Plugin Function

Configuration Options

Comprehensive configuration interface for customizing code generation behavior.

interface ReactApolloRawPluginConfig extends RawClientSideBasePluginConfig {
  withComponent?: boolean;
  withHOC?: boolean;
  withHooks?: boolean;
  withMutationFn?: boolean;
  withRefetchFn?: boolean;
  withFragmentHooks?: boolean;
  reactApolloVersion?: 2 | 3;
  addDocBlocks?: boolean;
  defaultBaseOptions?: ReactApolloPluginConfigDefaultBaseOptions;
}

Configuration Options

Validation Function

Validates plugin configuration and output file extensions.

declare const validate: PluginValidateFn<any>;

function validate(
  schema: GraphQLSchema,
  documents: Types.DocumentFile[],
  config: ReactApolloRawPluginConfig,
  outputFile: string,
): Promise<void>;

Validation Function

Visitor Class

Core visitor class that generates React Apollo-specific code patterns.

class ReactApolloVisitor extends ClientSideBaseVisitor<ReactApolloRawPluginConfig, ReactApolloPluginConfig> {
  constructor(
    schema: GraphQLSchema,
    fragments: LoadedFragment[],
    rawConfig: ReactApolloRawPluginConfig,
    documents: Types.DocumentFile[],
  );
  
  getImports(): string[];
  buildOperation(
    node: OperationDefinitionNode,
    documentVariableName: string,
    operationType: string,
    operationResultType: string,
    operationVariablesTypes: string,
    hasRequiredVariables: boolean,
  ): string;
  get fragments(): string;
}

Visitor Class