relay-operation-optimizer

import { Callout } from '@theguild/components' import { PluginHeader } from '@/components/plugin' import { pluginGetStaticProps } from '@/lib/plugin-get-static-props' export const getStaticProps = pluginGetStaticProps(__filename)

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{:yaml} 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!