Skip to main content

Near Operation File Preset

The default setup as per getting started guide generates all TypeScript code in a single types.ts file.

Near Operation File Preset generates TypeScript code for GraphQL operations next to the .graphql file that defines them.

This can have few advantages:

  • Better code organization and easier navigation in the project.
  • In lazy loaded Angular modules, the GraphQL code is part of the module's javascript chunk instead of the main bundle.
  • Less likely to cause git merge conflicts than the single types.ts file.

Setup​

Install dependency​

yarn add --dev @graphql-codegen/near-operation-file-preset

Update codegen.ts​

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

const config: CodegenConfig = {
  schema: [
    'http://localhost:4000/graphql',
    {
      './src/app/**/*.state.ts': {
        noRequire: true
      }
    }
  ],
  config: {
    operationResultSuffix: 'Data',
    querySuffix: 'Query',
    mutationSuffix: 'Mutation',
    subscriptionSuffix: 'Subscription',
    dedupeOperationSuffix: true,
    inlineFragmentTypes: 'combine',
    avoidOptionals: {
      field: true
    }
  },
  generates: {
    './src/app/graphql/types.ts': {
      documents: './src/app/**/*.graphql',
      plugins: [
        {
          add: {
            content: '/* eslint-disable */'
          }
        },
        'typescript',
        'typescript-operations',
        '@apollo-orbit/codegen'
      ]
    }
    './src/app': {
      documents: './src/app/**/*.graphql',
      preset: 'near-operation-file',
      presetConfig: {
        extension: '.ts',
        baseTypesPath: 'graphql/types.ts',
        importTypesNamespace: '_'
      },
      plugins: [
        {
          add: {
            content: '/* eslint-disable */'
          }
        },
        'typescript-operations',
        '@apollo-orbit/codegen'
      ]
    }
  }
};

export default config;