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

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Validation Function

Name: tessl/npm-graphql-codegen--typescript-react-apollo
Author: tessl

The validation function ensures that the plugin configuration and output file settings are compatible with the generated code requirements. It performs pre-generation checks to prevent common configuration errors.

API

declare const validate: PluginValidateFn<any>;

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

Parameters

schema: GraphQLSchema - The GraphQL schema being processed
documents: Types.DocumentFile[] - Array of GraphQL document files
config: ReactApolloRawPluginConfig - Plugin configuration to validate
outputFile: string - Target output file path

Returns

Returns a Promise<void> that resolves if validation passes, or throws an error if validation fails.

Validation Rules

File Extension Requirements

The validation function enforces specific file extension requirements based on configuration:

React Components Enabled

When withComponent: true is configured, the output file must use the .tsx extension:

// ✅ Valid configuration
{
  outputFile: 'generated/graphql.tsx',
  config: { withComponent: true }
}

// ❌ Invalid - will throw error
{
  outputFile: 'generated/graphql.ts', 
  config: { withComponent: true }
}

Error thrown: "Plugin "typescript-react-apollo" requires extension to be ".tsx" when withComponent: true is set!"

Standard Configuration

When components are disabled (withComponent: false or undefined), the output file must use either .ts or .tsx extension:

// ✅ Valid configurations
{
  outputFile: 'generated/graphql.ts',
  config: { withComponent: false }
}

{
  outputFile: 'generated/graphql.tsx', 
  config: { withHooks: true }
}

// ❌ Invalid - will throw error
{
  outputFile: 'generated/graphql.js',
  config: { withHooks: true }
}

Error thrown: "Plugin "typescript-react-apollo" requires extension to be ".ts" or ".tsx"!"

Usage in GraphQL Code Generator

The validation function is automatically called by GraphQL Code Generator before plugin execution:

// codegen.ts - This configuration will be validated
const config: CodegenConfig = {
  generates: {
    'src/generated/graphql.tsx': {  // ✅ Valid .tsx extension
      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
      config: {
        withComponent: true  // Requires .tsx extension
      }
    }
  }
};

Implementation Details

The validation function uses Node.js path.extname() to extract and check file extensions:

// Internal validation logic
import { extname } from 'path';

if (config.withComponent === true) {
  if (extname(outputFile) !== '.tsx') {
    throw new Error('Plugin "typescript-react-apollo" requires extension to be ".tsx" when withComponent: true is set!');
  }
} else if (extname(outputFile) !== '.ts' && extname(outputFile) !== '.tsx') {
  throw new Error('Plugin "typescript-react-apollo" requires extension to be ".ts" or ".tsx"!');
}

Common Validation Errors

Component Extension Mismatch

Error: Plugin "typescript-react-apollo" requires extension to be ".tsx" when withComponent: true is set!

Solution: Change output file extension to .tsx or disable components:

// Option 1: Use .tsx extension
generates: {
  'generated/graphql.tsx': {  // Changed from .ts to .tsx
    config: { withComponent: true }
  }
}

// Option 2: Disable components
generates: {
  'generated/graphql.ts': {
    config: { withComponent: false }  // Disabled components
  }
}

Invalid Extension

Error: Plugin "typescript-react-apollo" requires extension to be ".ts" or ".tsx"!

Solution: Use a TypeScript-compatible extension:

// ❌ Invalid
generates: {
  'generated/graphql.js': { ... }  // JavaScript extension not supported
}

// ✅ Valid  
generates: {
  'generated/graphql.ts': { ... }   // TypeScript extension
}