TypeScript Apollo Angular

          npm i -D @graphql-codegen/typescript-apollo-angular
        

          yarn add -D @graphql-codegen/typescript-apollo-angular
        

          pnpm add -D @graphql-codegen/typescript-apollo-angular
        

          bun add -D @graphql-codegen/typescript-apollo-angular
        

Config API Reference

apolloAngularVersion

type: number

Version of apollo-angular package Default value: “2”

ngModule

type: string

Allows to define ngModule as part of the plugin’s config so it’s globally available.

namedClient

type: string

Defined the global value of namedClient.

serviceName

type: string

Defined the global value of serviceName.

serviceProvidedInRoot

type: boolean

Defined the global value of serviceProvidedInRoot.

serviceProvidedIn

type: string

Define the Injector of the SDK class.

sdkClass

type: boolean

Set to true in order to generate a SDK service class that uses all generated services. Default value: “false”

querySuffix

type: string

Allows to define a custom suffix for query operations. Default value: “GQL”

mutationSuffix

type: string

Allows to define a custom suffix for mutation operations. Default value: “GQL”

subscriptionSuffix

type: string

Allows to define a custom suffix for Subscription operations. Default value: “GQL”

apolloAngularPackage

type: string

Allows to define a custom Apollo-Angular package to import types from. Default value: “‘apollo-angular‘“

additionalDI

type: string[]

Add additional dependency injections for generated services Default value: ""

addExplicitOverride

type: boolean

Add override modifier to make the generated code compatible with the noImplicitOverride option of Typescript v4.3+. Default value: “false”

gqlImport

type: string

Customize from which module will gql be imported from. This is useful if you want to use modules other than graphql-tag, e.g. graphql.macro. Default value: “graphql-tag#gql”

documentNodeImport

type: string

Customize from which module will DocumentNode be imported from. This is useful if you want to use modules other than graphql, e.g. @graphql-typed-document-node. Default value: “graphql#DocumentNode”

noExport

type: boolean

Set this configuration to true if you wish to tell codegen to generate code with no export identifier. Default value: “false”

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”

operationResultSuffix

type: string

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

documentVariablePrefix

type: string

Changes the GraphQL operations variables prefix. Default value: ""

documentVariableSuffix

type: string

Changes the GraphQL operations variables suffix. Default value: “Document”

fragmentVariablePrefix

type: string

Changes the GraphQL fragments variables prefix. Default value: ""

fragmentVariableSuffix

type: string

Changes the GraphQL fragments variables suffix. Default value: “FragmentDoc”

documentMode

type: object

Declares how DocumentNode are created:

• graphQLTag: graphql-tag or other modules (check gqlImport) will be used to generate document nodes. If this is used, document nodes are generated on client side i.e. the module used to generate this will be shipped to the client
• documentNode: document nodes will be generated as objects when we generate the templates.
• documentNodeImportFragments: Similar to documentNode except it imports external fragments instead of embedding them.
• external: document nodes are imported from an external file. To be used with importDocumentNodeExternallyFrom

Note that some plugins (like typescript-graphql-request) also supports string for this parameter. Default value: “graphQLTag”

optimizeDocumentNode

type: boolean

If you are using documentMode: documentNode | documentNodeImportFragments, you can set this to true to apply document optimizations for your GraphQL document. This will remove all “loc” and “description” fields from the compiled document, and will remove all empty arrays (such as directives, arguments and variableDefinitions). Default value: “true”

importOperationTypesFrom

type: string

This config is used internally by presets, but you can use it manually to tell codegen to prefix all base types that it’s using. This is useful if you wish to generate base types from typescript-operations plugin into a different file, and import it from there. Default value: ""

importDocumentNodeExternallyFrom

type: string

This config should be used if documentMode is external. This has 2 usage:

• any string: This would be the path to import document nodes from. This can be used if we want to manually create the document nodes e.g. Use graphql-tag in a separate file and export the generated document
• ‘near-operation-file’: This is a special mode that is intended to be used with near-operation-file preset to import document nodes from those files. If these files are .graphql files, we make use of webpack loader. Default value: ""

pureMagicComment

type: boolean

This config adds PURE magic comment to the static variables to enforce treeshaking for your bundler. Default value: “false”

experimentalFragmentVariables

type: boolean

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

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: “unknown”

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: ""

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”

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.

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”

query MyFeed {
  feed {
    id
    commentCount
  }
}

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

const config: CodegenConfig = {
  // ...
  generates: {
    'path/to/output.ts': {
      plugins: ['typescript-operations', 'typescript-apollo-angular']
    }
  }
}
export default config

// BE SURE TO USE Observable from rxjs and not from @apollo/client/core when using map
import { Observable } from 'rxjs'
import { map } from 'rxjs/operators'
import { MyFeedGQL, MyFeedQuery } from './graphql'

@Component({
  selector: 'feed',
  template: `
    <h1>Feed:</h1>
    <ul>
      <li *ngFor="let item of feed | async">{{ item.id }}</li>
    </ul>
  `
})
export class FeedComponent {
  feed: Observable<MyFeedQuery['feed']>

  constructor(feedGQL: MyFeedGQL) {
    this.feed = feedGQL.watch().valueChanges.pipe(map(result => result.data.feed))
  }
}

query feed {
  feed @NgModule(module: "./feed/feed.module#FeedModule") {
    id
    title
  }
}

query feed {
  feed @namedClient(name: "custom") {
    id
    title
  }
}