TypeScript Operations

          npm i -D @graphql-codegen/typescript-operations
        

          yarn add -D @graphql-codegen/typescript-operations
        

          pnpm add -D @graphql-codegen/typescript-operations
        

          bun add -D @graphql-codegen/typescript-operations
        

Config API Reference

arrayInputCoercion

type: boolean

The GraphQL spec allows arrays and a single primitive value for list input. This allows to deactivate that behavior to only accept arrays instead of single values. If set to false, the definition: query foo(bar: [Int!]!): Foo will output bar: Array<Int> instead of bar: Array<Int> | Int for the variable part. Default value: “true”

avoidOptionals

type: object

This will cause the generator to avoid using TypeScript optionals (?) on types, so the following definition: type A { myField: String } will output myField: Maybe<string> instead of myField?: Maybe<string>. Default value: “false”

immutableTypes

type: boolean

Generates immutable types by adding readonly to properties and uses ReadonlyArray. Default value: “false”

flattenGeneratedTypes

type: boolean

Flatten fragment spread and inline fragments into a simple selection set before generating. Default value: “false”

flattenGeneratedTypesIncludeFragments

type: boolean

Include all fragments types when flattenGeneratedTypes is enabled. Default value: “false”

noExport

type: boolean

Set to true in order to generate output without export modifier. This is useful if you are generating .d.ts file and want it to be globally available. Default value: “false”

globalNamespace

type: boolean

addOperationExport

type: boolean

Add const export of the operation name to output file. Pay attention that the file should be d.ts. You can combine it with near-operation-file preset and therefore the types will be generated along with graphql file. Then you need to set extension in presetConfig to be .gql.d.ts and by that you can import gql file in ts files. It will allow you to get everything with one import:

import { GetClient, GetClientQuery, GetClientQueryVariables } from './GetClient.gql.js'

Default value: “false”

maybeValue

type: string

Allow to override the type value of Maybe. Default value: “T | null”

allowUndefinedQueryVariables

type: boolean

Adds undefined as a possible type for query variables Default value: “false”

nullability

type: object

Options related to handling nullability

preResolveTypes

type: boolean

Uses primitive types where possible. Set to false in order to use Pick and take use the types generated by typescript plugin. Default value: “true”

skipTypeNameForRoot

type: boolean

Avoid adding __typename for root types. This is ignored when a selection explicitly specifies __typename. Default value: “false”

operationResultSuffix

type: string

Adds a suffix to generated operation result type names Default value: ""

dedupeOperationSuffix

type: boolean

Set this configuration to true if you wish to make sure to remove duplicate operation name suffix. Default value: “false”

omitOperationSuffix

type: boolean

Set this configuration to true if you wish to disable auto add suffix of operation name, like Query, Mutation, Subscription, Fragment. Default value: “false”

exportFragmentSpreadSubTypes

type: boolean

If set to true, it will export the sub-types created in order to make it easier to access fields declared under fragment spread. Default value: “false”

experimentalFragmentVariables

type: boolean

If set to true, it will enable support for parsing variables on fragments. Default value: “false”

mergeFragmentTypes

type: boolean

If set to true, merge equal fragment interfaces. Default value: “false”

customDirectives

type: object

Configures behavior for use with custom directives from various GraphQL libraries.

addUnderscoreToArgsType

type: boolean

Adds _ to generated Args types in order to avoid duplicate identifiers.

enumValues

type: object

Overrides the default value of enum values declared in your GraphQL schema. You can also map the entire enum to an external type by providing a string that of module#type.

declarationKind

type: object

Overrides the default output for various GraphQL elements.

enumPrefix

type: boolean

Allow you to disable prefixing for generated enums, works in combination with typesPrefix. Default value: “true”

enumSuffix

type: boolean

Allow you to disable suffixing for generated enums, works in combination with typesSuffix. Default value: “true”

fieldWrapperValue

type: string

Allow you to add wrapper for field type, use T as the generic value. Make sure to set wrapFieldDefinitions to true in order to make this flag work. Default value: “T”

wrapFieldDefinitions

type: boolean

Set to true in order to wrap field definitions with FieldWrapper. This is useful to allow return types such as Promises and functions. Default value: “false”

onlyEnums

type: boolean

This will cause the generator to emit types for enums only Default value: “false”

onlyOperationTypes

type: boolean

This will cause the generator to emit types for operations only (basically only enums and scalars) Default value: “false”

ignoreEnumValuesFromSchema

type: boolean

This will cause the generator to ignore enum values defined in GraphQLSchema Default value: “false”

wrapEntireFieldDefinitions

type: boolean

Set to true in order to wrap field definitions with EntireFieldWrapper. This is useful to allow return types such as Promises and functions for fields. Differs from wrapFieldDefinitions in that this wraps the entire field definition if i.e. the field is an Array, while wrapFieldDefinitions will wrap every single value inside the array. Default value: “true”

entireFieldWrapperValue

type: string

Allow to override the type value of EntireFieldWrapper. This wrapper applies outside of Array and Maybe unlike fieldWrapperValue, that will wrap the inner type. Default value: “T | Promise | (() => T | Promise)“

directiveArgumentAndInputFieldMappings

type: object

Replaces a GraphQL scalar with a custom type based on the applied directive on an argument or input field.

You can use both module#type and module#namespace#type syntax. Will NOT work with introspected schemas since directives are not exported. Only works with directives on ARGUMENT_DEFINITION or INPUT_FIELD_DEFINITION.

WARNING: Using this option does only change the type definitions.

For actually ensuring that a type is correct at runtime you will have to use schema transforms (e.g. with @graphql-tools/utils mapSchema) that apply those rules! Otherwise, you might end up with a runtime type mismatch which could cause unnoticed bugs or runtime errors.

Please use this configuration option with care!

directiveArgumentAndInputFieldMappingTypeSuffix

type: string

Adds a suffix to the imported names to prevent name clashes.

strictScalars

type: boolean

Makes scalars strict.

If scalars are found in the schema that are not defined in scalars an error will be thrown during codegen. Default value: “false”

defaultScalarType

type: string

Allows you to override the type that unknown scalars will have. Default value: “any”

scalars

type: object

Extends or overrides the built-in scalars and custom GraphQL scalars to a custom type.

namingConvention

type: object

Allow you to override the naming convention of the output. You can either override all namings, or specify an object with specific custom naming convention per output. The format of the converter must be a valid module#method. Allowed values for specific output are: typeNames, enumValues. You can also use “keep” to keep all GraphQL names as-is. Additionally, you can set transformUnderscore to true if you want to override the default behavior, which is to preserve underscores.

Available case functions in change-case-all are camelCase, capitalCase, constantCase, dotCase, headerCase, noCase, paramCase, pascalCase, pathCase, sentenceCase, snakeCase, lowerCase, localeLowerCase, lowerCaseFirst, spongeCase, titleCase, upperCase, localeUpperCase and upperCaseFirst See more Default value: “change-case-all#pascalCase”

typesPrefix

type: string

Prefixes all the generated types. Default value: ""

typesSuffix

type: string

Suffixes all the generated types. Default value: ""

skipTypename

type: boolean

Does not add __typename to the generated types, unless it was specified in the selection set. Default value: “false”

nonOptionalTypename

type: boolean

Automatically adds __typename field to the generated types, even when they are not specified in the selection set, and makes it non-optional Default value: “false”

useTypeImports

type: boolean

Will use import type {} rather than import {} when importing only types. This gives compatibility with TypeScript’s “importsNotUsedAsValues”: “error” option Default value: “false”

inlineFragmentTypes

type: string

Whether fragment types should be inlined into other operations. “inline” is the default behavior and will perform deep inlining fragment types within operation type definitions. “combine” is the previous behavior that uses fragment type references without inlining the types (and might cause issues with deeply nested fragment that uses list types). “mask” transforms the types for use with fragment masking. Useful when masked types are needed when not using the “client” preset e.g. such as combining it with Apollo Client’s data masking feature. Default value: “inline”

emitLegacyCommonJSImports

type: boolean

Emit legacy common js imports. Default it will be true this way it ensure that generated code works with non-compliant bundlers. Default value: “true”

importExtension

type: object

Append this extension to all imports. Useful for ESM environments that require file extensions in import statements.

extractAllFieldsToTypes

type: boolean

Extract all field types to their own types, instead of inlining them. This helps to reduce type duplication, and makes type errors more readable. It can also significantly reduce the size of the generated code, the generation time, and the typechecking time. Default value: “false”

printFieldsOnNewLines

type: boolean

If you prefer to have each field in generated types printed on a new line, set this to true. This can be useful for improving readability of the resulting types, without resorting to running tools like Prettier on the output. Default value: “false”

includeExternalFragments

type: boolean

Whether to include external fragments in the generated code. External fragments are not defined in the same location as the operation definition. Default value: “false”