Apollo-Angular 1.2 - using GraphQL in your apps just got a lot easier!
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:
https://github.com/kamilkisiela/apollo-angular-servicesUsing 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 apollo-angular-link-persisted.
- 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
Join our newsletter
Want to hear from us when there's something new?
Sign up and stay up to date!
*By subscribing, you agree with Beehiiv’s Terms of Service and Privacy Policy.