AWS AppSync + Apollo Begins GraphQL
WARNING: This is a Google translated (originally Chinese) and reposted article that probably is mostly comfortably understandable for senior JavaScript developers.
Overview
- Those who would like to view data on the screen using AWS AppSync
- Those who would like to easily touch GraphQL even with front end engineers
- Articles for those who are doubtful about introducing GraphQL
REST is hard
(Example) AWS configuration diagram
As shown in the figure above, we use Angular + AWS
to operate the service which displays the information returned from the REST API.
However, as the requirements of the service increase, information that you would like to obtain on the screen will be more
- I can not get the information I want without calling multiple APIs
- Extra data is also returned even though we only use some of the data in the response
- Number of API requests and RTT increase
There are a lot of painful parts such as ... ....
Why GraphQL?
So how do you solve this problem?
- Increase new API to return only desired information
- Implement field parameters etc in existing API
I think that there are various ways such as
In the case of GraphQL, depending on the schema setting
- You can get information you want without wasting simply from multiple services
- Since it is possible to acquire data by generating queries against the repository, it is likely to introduce small without affecting existing projects
Because I seemed to be attractive in that it was interesting, I
tried implementing data using Angular + Apollo using AWS AppSync
which is a service of GraphQL this time, so I would like to share that information.
How can I easily start GraphQL with AWS + Angular?
Rough flow
- Install Apollo + AWS AppSync JavaScript SDK
- Implemented with Angular
The image of the AWS configuration diagram is like this.
Completion code
The completion code of this time is put here.
Explanation of services used this time
AWS AppSync (back end)
AWS AppSync is a fully managed serverless GraphQL service provided by AWS.
It is easy to link with other AWS resources, and if DynamoDB is used as a data source, GraphQL schema can be generated automatically and results can be confirmed on the AppSync console.
Apollo (front end)
Apollo is a
library that GraphQL can use in the backend && frontend developed by Meteor Development Group
.
We support frameworks such as Angular, React, Vue, Meteor, Ember, Polymer etc and
this time I would like to implement GraphQL's client side using Apollo.
Install first!
If AWS AppSync can be created successfully, we will implement Angular.
$ ng new apollo-in-angular
$ ng add apollo-angular
$ npm install --save aws-appsync
// polyfills.ts
( window as any ). global = window ;
Acquire data from Angular
Next, we create a service that retrieves data from AWS AppSync.
Here, we mainly set up the end point of AWS AppSync.
//Graphql.Service.Ts
import AWSAppSyncClient from 'aws-AppSync' ;
import { AUTH_TYPE } from 'aws-AppSync / lib' ;
import { Apollo } from 'apollo-angular' ;
import { Injectable } from '@ angular / core ' ;
@ Injectable ()
export class GraphqlService {
constructor ( private apollo : Apollo ) {}
Hydrated () {
Const AppsyncClient = New AWSAppSyncClient ({
DisableOffline : True ,
Url : '' ,
Region : '' ,
Auth : {
Type : AUTH_TYPE . API_KEY ,
ApiKey : '< AppSync apiKey Your> ' ,
},
});
this . apollo . SetClient ( AppsyncClient );
return AppsyncClient. hydrated ();
}
}
Next I will define the query service. While referring to the
this time we implemented a query that assumed to retrieve information from multiple repositories.
// query.service.ts
import { Injectable } from '@ angular / core' ;
import { Query } from 'apollo-angular' ;
import gql from 'graphql-tag' ;
export in interface Application {
id : string ;
Itunesstore_id : string ;
updated : string ;
}
export in interface Profile {
identifier : string ;
}
export in interface ApplicationsWithProfiles {
listApplications : {
items : Application [];
};
listprofiles : {
items : Profile [];
};
}
@ Injectable ({
providedIn : 'root' ,
})
export class ApplicationsGQL extends Query < ApplicationsWithProfiles > {
document = gql `
query {
listApplications {
items {
id
itunesstore_id
updated
}
}
listProfiles {
items {
identifier
}
}
}
` ;
}
Create the last component to display.
App.Component.Ts //
import { Component , OnInit } from '@ angular / core' ;
import { map } from 'Rxjs / operators' ;
import { Application , QueryGQL , Profile } from './Query.Service' ;
@ Component ({
selector : 'app-root' ,
templateURL : './App.Component.Html' ,
StyleUrls : [ './App.Component.Scss' ]
})
export class AppComponent an implements OnInit {
title = ' GraphQL with Apollo ' ;
applications : Application [];
profiles : Profile [];
constructor ( private service : QueryGQL ) {}
NgOnInit (): Void {
This . Service . Watch . () ValueChanges . Pipe (
Map ( V => V . Data )
.) Subscribe ( Res => {
This . Applications = Res . ListApplications . Items ;
This . Profiles = Res . listProfiles . items ;
});
}
}
This is the screen which is completed.
I got only the information I want from multiple repositories without incident on one request. It is amazing.
Summary
In practical operation of AWS AppSync, I think that there is something unfamiliar to
it is
attractive to combine multiple data sources with a single query to reach the desired information So it was nice to be able to do it easily to AWS resources.
Although it is a little left
this year, how about starting GraphQL now?