Custom Configuration

Learn how to extend and customize the preset configurations for your specific project needs.

Import a preset and spread it into your custom configuration:

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

const config: CodegenConfig = {
  ...ReactApolloCodegenConfig,
  generates: {
    ...ReactApolloCodegenConfig.generates,
    'graphql/generated.ts': {
      ...ReactApolloCodegenConfig.generates['graphql/generated.ts'],
      config: {
        ...ReactApolloCodegenConfig.generates['graphql/generated.ts'].config,
        // Your custom config options
        maybeValue: 'T | undefined',
      },
    },
  },
};

export default config;

Import and use the utility functions in your custom config:

// codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli';
import {
  disableEsLint,
  defaultPlugins,
  defaultPluginsConfig,
} from '@woographql/codegen';

const config: CodegenConfig = {
  schema: process.env.GRAPHQL_ENDPOINT,
  verbose: true,
  overwrite: true,
  generates: {
    'graphql/generated.ts': {
      documents: ['graphql/**/*.graphql'],
      plugins: [
        disableEsLint(),
        ...defaultPlugins,
        'typescript-react-apollo',
      ],
      config: {
        ...defaultPluginsConfig,
        // Custom options
        withHooks: true,
        withResultType: true,
      },
    },
  },
};

export default config;

Generate different output files for different purposes:

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

const config: CodegenConfig = {
  schema: process.env.GRAPHQL_ENDPOINT,
  verbose: true,
  overwrite: true,
  generates: {
    // Types only for server-side
    'graphql/types.ts': {
      documents: ['graphql/**/*.graphql'],
      plugins: [disableEsLint(), 'typescript'],
      config: defaultPluginsConfig,
    },
    // React hooks for client-side
    'graphql/hooks.ts': {
      documents: ['graphql/client/**/*.graphql'],
      plugins: [
        disableEsLint(),
        'typescript',
        'typescript-operations',
        'typescript-react-apollo',
      ],
      config: {
        ...defaultPluginsConfig,
        withHooks: true,
      },
    },
    // SDK for API routes
    'graphql/sdk.ts': {
      documents: ['graphql/server/**/*.graphql'],
      plugins: [
        disableEsLint(),
        'typescript',
        'typescript-operations',
        'typescript-graphql-request',
      ],
      config: defaultPluginsConfig,
    },
  },
};

export default config;

Map GraphQL scalars to TypeScript types:

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

const config: CodegenConfig = {
  ...ReactApolloCodegenConfig,
  generates: {
    'graphql/generated.ts': {
      ...ReactApolloCodegenConfig.generates['graphql/generated.ts'],
      config: {
        ...ReactApolloCodegenConfig.generates['graphql/generated.ts'].config,
        scalars: {
          DateTime: 'string',
          JSON: 'Record<string, unknown>',
          Upload: 'File',
          Decimal: 'string',
        },
      },
    },
  },
};

export default config;

Wrap generated types in a namespace:

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

const config: CodegenConfig = {
  schema: process.env.GRAPHQL_ENDPOINT,
  generates: {
    'graphql/generated.ts': {
      documents: ['graphql/**/*.graphql'],
      plugins: [
        ...addNamespace('WooGraphQL'),
        'typescript',
        'typescript-operations',
      ],
      config: defaultPluginsConfig,
    },
  },
};

export default config;

This generates:

declare namespace WooGraphQL {
  export type Product = {
    // ...
  };
}

Combine multiple GraphQL endpoints:

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

const config: CodegenConfig = {
  schema: [
    process.env.WOOCOMMERCE_ENDPOINT,
    process.env.CUSTOM_API_ENDPOINT,
  ],
  generates: {
    'graphql/generated.ts': {
      documents: ['graphql/**/*.graphql'],
      plugins: [disableEsLint(), 'typescript', 'typescript-operations'],
      config: defaultPluginsConfig,
    },
  },
};

export default config;

Customize watch mode behavior:

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

const config: CodegenConfig = {
  ...TypesCodegenConfig,
  watch: ['graphql/**/*.graphql', 'src/**/*.graphql'],
  ignoreNoDocuments: true,
};

export default config;

The CLI passes through options to GraphQL Codegen:

# Watch mode
woographql-codegen --watch

# Custom config file
woographql-codegen --config ./custom-codegen.ts

# Check mode (CI/CD)
woographql-codegen --check

# Verbose output
woographql-codegen --verbose

# Debug mode
woographql-codegen --debug

• Preset Configurations - Available preset configurations
• Utilities - Available helper functions
• GraphQL Code Generator Docs