54
Apollo-Angular 1.2 - using GraphQL in your apps just got a whole lot easier!
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.
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!
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.
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!
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:
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:
HttpClient uses. Sergey Fetiskin wrote an article about it.Apollo.create inside of a constructor, you can provide settings on Dependency Injection level. Read the “Using Dependency Injection” chapter in docs.54