The Guild LogoThe Guild Monogram
Docs

GraphQL Code Generator

Generate anything from GraphQL schema / operations!

Contact Us

Guide: Angular#

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

Taking the following schema:

# schema.graphql 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 { id title author { id firstName lastName } } } ` interface Post { id: string title: string author?: { id: string firstName: string lastName: string } } @Component({ /* ... */ }) class PostsComponent implements OnInit, OnDestroy { posts: Post[] private querySubscription: Subscription ngOnInit() { this.querySubscription = this.apollo .watchQuery({ query: GET_POSTS }) .valueChanges.subscribe(({ data }) => { this.posts = data.posts as Post[] }) } ngOnDestroy() { this.querySubscription.unsubscribe() } }

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:

1. Install the @graphql-codegen/typescript-apollo-angular plugin

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

2. Configure the plugin

Create or update your codegen.yaml file as follows:

schema: http://my-graphql-api.com/graphql documents: './src/**/*.tsx' generates: ./graphql/generated.ts: plugins: - typescript - typescript-operations - typescript-apollo-angular

schema and documents values

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

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


3. 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.tsx file.

yarn 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' @Component({ /* ... */ }) export class PostsComponent { posts: Observable<PostsQuery['posts']> constructor(postsGQL: PostsGQL) { this.posts = postsGQL.watch().valueChanges.pipe(map(result => result.data.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.