Guide: Angular

GraphQL Code Generator provides the @graphql-codegen/typescript-apollo-angular plugin that generates full-typed Apollo GraphQL services.

Taking the following schema:

type Author {
  id: Int!
  firstName: String!
  lastName: String!
  posts(findTitle: String): [Post]
type Post {
  id: Int!
  title: String!
  author: Author
type Query {
  posts: [Post]

Most Apollo Client usage in Angular will look as follows:

const GET_POSTS = gql`
  query Posts {
    posts {
      author {
interface Post {
  id: string
  title: string
  author?: {
    id: string
    firstName: string
    lastName: string
  /* … */
class PostsComponent implements OnInit, OnDestroy {
  posts: Post[]
  private querySubscription: Subscription
  ngOnInit() {
    this.querySubscription = this.apollo
        query: GET_POSTS
      .valueChanges.subscribe(({ data }) => {
        this.posts = data.posts as Post[]
  ngOnDestroy() {

Not typing or manually maintaining the data-types can lead to many issues:

  • outdated typing (regarding the current Schema)

  • typos

  • partial typing of data (not all Schema’s fields has a corresponding type)

For this reason, GraphQL Code Generator provides a @graphql-codegen/typescript-apollo-angular plugin that generates typed Apollo services for each GraphQL operation.

Just a few configuration steps are required to get those Apollo services:


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

Configure the plugin

Create or update your codegen.ts file as follows:

import type { CodegenConfig } from '@graphql-codegen/cli'
const config: CodegenConfig = {
  schema: '',
  documents: './src/**/*.ts',
  generates: {
    './graphql/generated.ts': {
      plugins: ['typescript', 'typescript-operations', 'typescript-apollo-angular']
export default config

schema and documents values

schema needs to be your target GraphQL API URL ("/graphql" included).

documents is a glob expression to your .graphql or .ts files.

Run the codegen and update your code

Assuming that, as recommended, your package.json has the following script:

  "scripts": {
    "generate": "graphql-codegen"

Running the following generates the graphql/generated.ts file.

npm run generate

We can now update our code as follows:

import { PostsGQL, PostsQuery } from './graphql'
// 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'
  /* … */
export class PostsComponent {
  posts: Observable<PostsQuery['posts']>
  constructor(postsGQL: PostsGQL) {
    this.posts = =>

For more advanced configuration, please refer to the plugin documentation.

For a different organization of the generated files, please refer to the “Generated files colocation” page.