near-operation-file-preset

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

This preset generates a file per each operation file.

Example

In order to use this preset, you need to add 2 outputs to your codegen.yml file:

• The first, is the base types, generated by typescript plugin.
• The second, is the one that is in charge of generating types per operation.

This following example generates operation typings and react-apollo component per each operation file, near the original file of the operation:

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

const config: CodegenConfig = {
  schema: 'src/schema.json',
  documents: 'src/**/*.graphql',
  generates: {
    'src/types.ts': { plugins: ['typescript'] },
    'src/': {
      preset: 'near-operation-file',
      presetConfig: {
        extension: '.generated.tsx',
        baseTypesPath: 'types.ts',
      },
      plugins: ['typescript-operations', 'typescript-react-apollo'],
    },
  },
};
export default config;

How does it work?

The first output is simple, and it only generates the base schema types to src/types.ts.

The second output refers to the base directory of the project (./src/) and it uses the near-operation-file preset to generate a file per each operation found under ./src/**/*.graphql.

The presetConfig section contains a key for setting the output files extension (in our case, .generated.tsx because of react-apollo), and the location of the base schema types file we created in the first section of this file (it will look for it in the base directory).