Near Operation File Preset

Package name	Weekly Downloads	Version	License	Updated
`@graphql-codegen/near-operation-file-preset`				Nov 1st, 2022

Installation

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

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:

codegen.ts

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).

💡

Note: If you're loading your documents from files with the same extension as the generated files, make sure the glob you use excludes the generated files. For example, if your original glob was src/**/*.{ts,tsx}, use src/**/!(*.generated).{ts,tsx} instead.

Config API Reference

baseTypesPath

type: string

Required, should point to the base schema types file. The key of the output is used a the base path for this file.

If you wish to use an NPM package or a local workspace package, make sure to prefix the package name with ~.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       preset: 'near-operation-file',
       plugins: ['typescript-operations'],
       presetConfig: {
         baseTypesPath: 'types.ts'
       },
     },
   },
 };
 export default config;

importAllFragmentsFrom

type: FragmentImportFromFn | string

Overrides all external fragments import types by using a specific file path or a package name.

If you wish to use an NPM package or a local workspace package, make sure to prefix the package name with ~.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       preset: 'near-operation-file',
       plugins: ['typescript-operations'],
       presetConfig: {
         baseTypesPath: 'types.ts',
         importAllFragmentsFrom: '~types'
       },
     },
   },
 };
 export default config;

extension

type: string default: .generated.ts

Optional, sets the extension for the generated files. Use this to override the extension if you are using plugins that requires a different type of extensions (such as typescript-react-apollo)

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       preset: 'near-operation-file',
       plugins: ['typescript-operations', 'typescript-react-apollo'],
       presetConfig: {
         baseTypesPath: 'types.ts',
         extension: '.generated.tsx',
       },
     },
   },
 };
 export default config;

cwd

type: string default: process.cwd()

Optional, override the cwd of the execution. We are using cwd to figure out the imports between files. Use this if your execution path is not your project root directory.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       preset: 'near-operation-file',
       plugins: ['typescript-operations'],
       presetConfig: {
         baseTypesPath: 'types.ts',
         cwd: '/some/path'
       },
     },
   },
 };
 export default config;

folder

type: string default: ''

Optional, defines a folder, (Relative to the source files) where the generated files will be created.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       preset: 'near-operation-file',
       plugins: ['typescript-operations'],
       presetConfig: {
         baseTypesPath: 'types.ts',
         folder: '__generated__'
       },
     },
   },
 };
 export default config;

importTypesNamespace

type: string default: Types

Optional, override the name of the import namespace used to import from the baseTypesPath file.

Usage Examples

codegen.ts

 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file.ts': {
       preset: 'near-operation-file',
       plugins: ['typescript-operations'],
       presetConfig: {
         baseTypesPath: 'types.ts',
         importTypesNamespace: 'SchemaTypes'
       },
     },
   },
 };
 export default config;

Last updated on November 30, 2022

import-types client-preset