Relay Operation Optimizer

Package name	Weekly Downloads	Version	License	Updated
@graphql-codegen/relay-operation-optimizer				Mar 19th, 2025

Installation

npm i -D @graphql-codegen/relay-operation-optimizer

pnpm add -D @graphql-codegen/relay-operation-optimizer

yarn add --dev @graphql-codegen/relay-operation-optimizer

bun add --dev @graphql-codegen/relay-operation-optimizer

@graphql-codegen/relay-operation-optimizer

Description

GraphQL Codegen Plugin for bringing the benefits of Relay Compiler to GraphQL Codegen.

Current List of Features

• Optimize Queries TL;DR: reduce query size
  • Inline Fragments
  • Flatten Transform
  • Skip Redundant Node Transform
• FragmentArguments
  • @argumentsDefinition
  • @arguments

Install Instructions

yarn add -D -E @graphql-codegen/relay-operation-optimizer

Usage Instructions

codegen.yml

overwrite: true
schema: schema.graphql
generates:
  src/generated-types.tsx:
    documents: 'src/documents/**/*.graphql'
    config:
      skipDocumentsValidation: true
    plugins:
      - 'relay-optimizer-plugin'
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-apollo'

Built and maintained by n1ru4l.

A GraphQL Codegen feature for bringing the benefits of Relay Compiler to any GraphQL Client using Relay Operation Optimizer.

You can test how relay-compiler affects your queries over on the Relay Compiler REPL.

List of Features

• Optimize your Operations TL;DR: reduce operation complexity and size
  • Inline Fragments
  • Flatten Transform
  • Skip Redundant Node Transform
• FragmentArguments TL;DR: Make your fragments reusable with different arguments
  • @argumentsDefinition
  • @arguments

Usage

Set up your project per the GraphQL Codegen Docs, and add flattenGeneratedTypes: true in your codegen.yml:

import type { CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
  overwrite: true,
  schema: 'schema.graphql',
  generates: {
    'src/generated-types.tsx': {
      documents: 'src/documents/**/*.graphql',
      config: {
        skipDocumentsValidation: true,
        flattenGeneratedTypes: true
      },
      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo']
    }
  }
}
export default config

Please notice that you have to skip the document validation - but no worries, relay-compiler will validate your documents instead!