or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

configuration.md index.md plugin-function.md validation.md visitor.md

tile.json

Validation Function

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
}