Plugin Function

The main plugin function processes GraphQL schema and documents to generate React Apollo-specific TypeScript code. It creates hooks, components, HOCs, and types based on the provided configuration.

API

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

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

Parameters

• schema: GraphQLSchema - The GraphQL schema to generate code from
• documents: Types.DocumentFile[] - Array of GraphQL document files containing operations
• config: ReactApolloRawPluginConfig - Plugin configuration options

Returns

Returns a Types.ComplexPluginOutput object containing:

interface ComplexPluginOutput {
  prepend: string[];  // Import statements and setup code
  content: string;    // Generated React Apollo code
}

Usage Example

The plugin is typically used through GraphQL Code Generator configuration:

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

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

Generated Output Structure

The plugin generates different types of code based on configuration:

React Hooks (withHooks: true)

• Query hooks: use[OperationName]Query
• Lazy query hooks: use[OperationName]LazyQuery
• Suspense query hooks: use[OperationName]SuspenseQuery
• Mutation hooks: use[OperationName]Mutation
• Subscription hooks: use[OperationName]Subscription

React Components (withComponent: true)

• Query/Mutation/Subscription components with render props
• Component props types

Higher-Order Components (withHOC: true)

• HOC functions: with[OperationName]
• HOC props types

Utility Types

• Result types: [OperationName][OperationType]Result
• Mutation function types: [OperationName]MutationFn
• Hook result types: [OperationName]HookResult

Implementation Details

The plugin works by:

1. Concatenating all GraphQL documents into a single AST
2. Extracting fragment definitions for reuse
3. Creating a ReactApolloVisitor instance
4. Visiting the AST to generate React-specific code
5. Returning imports and generated content

// Internal implementation pattern
const allAst = concatAST(documents.map(v => v.document));
const visitor = new ReactApolloVisitor(schema, allFragments, config, documents);
const visitorResult = oldVisit(allAst, { leave: visitor });

return {
  prepend: visitor.getImports(),
  content: [visitor.fragments, ...visitorResult.definitions].join('\n'),
};