This article was published on 2018-08-21 by Kamil Kisiela @ The Guild Blog

Check what's new in Apollo Angular and how to get the full potential benefits of using Angular + GraphQL + TypeScript combined thanks to GraphQL-Code-Generator.

We are very excited to announce a new version of Apollo Angular that dramatically improves and simplifies the usage of GraphQL with Angular.

This version also adds production and scale related features, that our large Enterprise and production users had been asking for.

TL;DR

• Code generation for Apollo Angular
• Query, Mutation, Subscription as an Angular service
• Apollo Angular Boost
• Testing tools

Introducing Query, Mutation and Subscription as an Angular services

Through almost two years of using GraphQL in Angular we gained a lot of experience, and learned how people use the library.

With the current API, having query and watchQuery methods sometimes confused a lot of developers. For people who use Apollo for long time it's obvious but we often get asked about differences between them and many newcomers are surprised.

We decided to add a new approach of working with GraphQL in Angular.

import { Injectable } from '@angular/core';
import { Query } from 'apollo-angular';
import gql from 'graphql-tag';

@Injectable({...})
export class FeedGQL extends Query {
  document = gql`
    query Feed {
      posts {
        id
        title
      }
    }
  `
}

There are now 3 new simpler APIs: Query, Mutation and Subscription. Each of them allows to define the shape of a result & variables.

The only thing you need to do is to set the document property, That's it, and now you use it as a regular Angular service:

import { Component } from '@angular/core';
import { FeedGQL } from './feed-gql.ts';

@Component({ … })
export class FeedComponent {
  constructor(feedGQL: FeedGQL) {
    feedGQL.watch()
       .valueChanges
       .subscribe(result => {
         // ...
       })
  }
}

In our opinion, the new API is more intuitive and documents feels now like a first class-citizens.

But it also opens up the doors for something wayyyyy cooler!

Taking it to the next level

As an Angular developer, you already understand how much power Typescript adds to your development — the Angular community took those capabilities to the next level with code generation, through things like schematics.

The GraphQL community also took the concept of static type capabilities into new places — over the API and managing data automatically at runtime with the query language.

While using GraphQL, Typescript and Angular and maintaining apollo-angular in the past 2 years we always keep thinking how can we get all those technologies closer to create something that is more powerful than the sum of its parts.

GraphQL Code Generator for Apollo Angular

We are pleased to announce a new set of tools that takes the GraphQL schema from the server and the query from the Angular component and generate everything in the middle for you!

Just by consuming a static GraphQL schema and defining the data you need and its structure in a GraphQL Query, there is no need for you to write any Typescript! You already defined it, why writing it again?

We will generate a strongly typed Angular service, for every defined query, mutation or subscription, ready to use in your components!

How it works

You create a .graphql file with a document that you want to use in a component:

query Feed {
  posts {
    id
    title
  }
}

Next, you run the GraphQL Code Generator — Angular Apollo Plugin to generate types and angular services.

Then you simply import and use it as a regular, Angular service.

import { FeedGQL } from './generated'

GraphQL Code Generator takes query's name, makes it PascalCased and adds GQL suffix to it. An example, “myFeed” becomes “MyFeedGQL”.

See it here in action and play with it:

To play with code generator try to clone this repository:

Using Angular, Typescript and GraphQL in a coordinated way, gives us new level of simplicity and power for our developer experience:

• Less code to write — no need to create a network call, no need to create Typescript typings, no need to create a dedicated Angular service
• Strongly typed out of the box — all types are being generated, no need to write any Typescript definitions and struggle to keep them updated
• Full developer experience of tools and IDEs — development time autocomplete and error checking, not only across your frontend app but also with your API teams!
• Tree-shakable thanks to Angular 6

More thanks to GraphQL

We believe GraphQL is a game changer in how you plan and create your frontend apps.

The vision that guides us is that you should be able to sketch a list of data types your backend can provide, sketch components and their data dependencies — and all the rest of the plumbing can be generated for you.

Once you'll write an app like that, you will ask yourself why did you write all the other boilerplate code by yourself before.

But we've just talked about one new feature in apollo-angular. there is more:

• Testing utilities There were a lot of questions about testing Apollo components, so we decided to finally release something with a similar API to the one Angular's HttpClient uses. Sergey Fetiskin wrote an article about it.
• Apollo Angular Boost It's hard for newcomers to get started with Apollo Angular. Inspired by Apollo Boost we decided to create an Angular version of it. Here's an interactive example.
• Create Apollo on DI level There is now an extra way to create Apollo Client. Instead of using Apollo.create inside of a constructor, you can provide settings on Dependency Injection level. Read the “Using Dependency Injection” chapter in docs.
• GraphQL Subscription outside NgZone Apollo.subscribe accepts now a second argument in which you can enable running subscription's callback outside NgZone.
• Automatic Persisted Queries for Angular It's now possible to use APQ with Angular's HttpClient, just install this package.

• Query and Mutation as a service on StackBlitz and GitHub
• Query and Mutation — Step by step tutorial
• Example: Apollo Angular Boost on StackBlitz
• Apollo Angular repository
• Documentation