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.

An example of a Query service

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:

An example usage of a Query service

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.

Ever wondered how GraphQL Code Generator works?

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

— 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

— 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!

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