Codegen
PluginsTypeScriptapollo-angular

TypeScript Apollo Angular

Package nameWeekly DownloadsVersionLicenseUpdated
@graphql-codegen/typescript-apollo-angularDownloadsVersionLicenseApr 19th, 2026

Installation

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

Usage Requirements In order to use this GraphQL Codegen plugin, please make sure that you have GraphQL operations (query / mutation / subscription and fragment) set as documents: … in your codegen.yml.

Without loading your GraphQL operations (query, mutation, subscription and fragment), you won’t see any change in the generated output.

This plugin generates Apollo services (Query, Mutation and Subscription) with TypeScript typings.

It will generate a strongly typed Angular service for every defined query, mutation or subscription. The generated Angular services are ready to inject and use within your Angular component.

It extends the basic TypeScript plugins: @graphql-codegen/typescript, @graphql-codegen/typescript-operations - and thus shares a similar configuration.

To shed some more light regards this template, it’s recommended to go through this article: https://apollo-angular.com/docs/get-started, and to read the Code Generation with Apollo Angular: https://the-guild.dev/blog/apollo-angular-12

Config API Reference

apolloAngularVersion

type: number default: 2

Version of apollo-angular package

Usage Examples

codegen.ts
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file': {
       plugins: ['apollo-angular'],
       config: {
         apolloAngularVersion: 1
       },
     },
   },
 };
 export default config;

ngModule

type: string

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

Usage Examples

codegen.ts
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file': {
       plugins: ['apollo-angular'],
       config: {
         ngModule: './path/to/module#MyModule'
       },
     },
   },
 };
 export default config;

namedClient

type: string

Defined the global value of namedClient.

Usage Examples

codegen.ts
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file': {
       plugins: ['apollo-angular'],
       config: {
         namedClient: 'customName'
       },
     },
   },
 };
 export default config;

serviceName

type: string

Defined the global value of serviceName.

Usage Examples

codegen.ts
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file': {
       plugins: ['apollo-angular'],
       config: {
         serviceName: 'MySDK'
       },
     },
   },
 };
 export default config;

serviceProvidedInRoot

type: boolean

Defined the global value of serviceProvidedInRoot.

Usage Examples

codegen.ts
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file': {
       plugins: ['apollo-angular'],
       config: {
         serviceProvidedInRoot: false
       },
     },
   },
 };
 export default config;

serviceProvidedIn

type: string

Define the Injector of the SDK class.

Usage Examples

codegen.ts
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file': {
       plugins: ['apollo-angular'],
       config: {
         serviceProvidedIn: './path/to/module#MyModule'
       },
     },
   },
 };
 export default config;

sdkClass

type: boolean default: false

Set to true in order to generate a SDK service class that uses all generated services.

querySuffix

type: string default: GQL

Allows to define a custom suffix for query operations.

Usage Examples

codegen.ts
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file': {
       plugins: ['apollo-angular'],
       config: {
         querySuffix: 'QueryService'
       },
     },
   },
 };
 export default config;

mutationSuffix

type: string default: GQL

Allows to define a custom suffix for mutation operations.

Usage Examples

codegen.ts
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file': {
       plugins: ['apollo-angular'],
       config: {
         mutationSuffix: 'MutationService'
       },
     },
   },
 };
 export default config;

subscriptionSuffix

type: string default: GQL

Allows to define a custom suffix for Subscription operations.

Usage Examples

codegen.ts
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file': {
       plugins: ['apollo-angular'],
       config: {
         subscriptionSuffix: 'SubscriptionService'
       },
     },
   },
 };
 export default config;

apolloAngularPackage

type: string default: 'apollo-angular'

Allows to define a custom Apollo-Angular package to import types from.

additionalDI

type: string[] default: “

Add additional dependency injections for generated services

Usage Examples

codegen.ts
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file': {
       plugins: ['apollo-angular'],
       config: {
         additionalDI: ['testService: TestService', 'testService1': TestService1']
       },
     },
   },
 };
 export default config;

addExplicitOverride

type: boolean default: false

Add override modifier to make the generated code compatible with the noImplicitOverride option of Typescript v4.3+.

Usage Examples

codegen.ts
 import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   // ...
   generates: {
     'path/to/file': {
       plugins: ['apollo-angular'],
       config: {
         addExplicitOverride: true
       },
     },
   },
 };
 export default config;

How to use?

Simply create a .graphql file and write a random query like so:

query MyFeed {
  feed {
    id
    commentCount
  }
}

Using graphql-codegen you can generate a file with Angular services that you can use when coding an Angular component:

codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli'
 
const config: CodegenConfig = {
  // ...
  generates: {
    'path/to/output.ts': {
      plugins: ['typescript', 'typescript-operations', 'typescript-apollo-angular']
    }
  }
}
export default config

Then, use it:

// 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))
  }
}

@NgModule directive

All generated services are defined with @Injectable({ providedIn: 'root' }) and in most cases you don’t need to overwrite it, because providing a service to the root injector is highly recommended. To customize that behavior you can use @NgModule directive, anywhere in an operation, to let the codegen know which injector should it use to create a service.

💡
You can’t use multiple @NgModule directives in the same operation
query feed {
  feed @NgModule(module: "./feed/feed.module#FeedModule") {
    id
    title
  }
}

@namedClient directive

Sometimes you end up with multiple Apollo clients, which means part of operations can’t use the defaults. In order to customize that behavior you simply attach the @namedClient directive and the typescript-apollo-angular plugin takes care of the rest.

💡
You can’t use multiple @namedClient directives in the same operation
query feed {
  feed @namedClient(name: "custom") {
    id
    title
  }
}
typescriptapollo-client-helpers