Supercharging Applications with GraphQL and AWS AppSync

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Ed Lima – Solutions Architect
May 2018
Supercharging Applications with
GraphQL and AWS AppSync
@ednergizer

© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
A New Philosophy for Backend APIs

App Data Challenges
Data requirements
vary across devices
and become harder
when multiple
users share data
Users want instant
access to data
Building scalable
data-driven apps
without learning
distributed systems
concepts is hard
Users want to
continue using their
apps even with low
or no connectivity

Traditional Data Fetching
Data
ü Trivial to set up
ü Standard HTTP Calls
Relationships
Lists with reduced information
Query support
Ordering and pagination
Notifications
/posts
/postInfo
/postJustTitle
/postsByAuthor
/postNameStartsX
/postByTag
/commentsOnPost
REST Endpoints

Is There A Better Way

GraphQL

What Is GraphQL?
Describe what’s possible
with a type system
Uniform API across data stores
and APIs
Network optimized
requests and responses
Powerful developer tools Integrated
documentation and
introspection
Query language for your API
and a runtime for fulfilling
queries with existing data

What Is GraphQL?
/posts /comments /authors
REST API
posts comments authors
GraphQL API

subscription {
onCreateComment{
id
}
}
mutation {
createEvent(name:”Dinner”){
id
}
}
query {
getEvent(id: 1){
id
name
}
}
Queries
Read Data
Mutations
Write Data
Subscriptions
Receive Data in Real-Time
GraphQL Operations

type Query {
listEvents: [Event]
}
type Event {
id: ID!
name: String!
when: String!
where: String!
}
query {
listEvents {
id
name
}
}
{
"id": "1",
"name": "React Meet Up"
},
{
"id": "2",
"name": "GraphQL Party"
},
{
“id”: “3”,
“name”: “Angular Sesh”
}
...
Define your data
(Schema)
Invoke Operation Get EXACTLY what
you asked for
How To Use GraphQL

type Query {
listEvents: [Event]
}
type Event {
id: ID!
name: String!
when: String!
where: String!
}
query {
listEvents {
id
name
when
}
}
{
"id": "1”,
"name": "React Meet Up”,
“when”: “Tomorrow”
},
{
"id": "2",
"name": "GraphQL Party",
“when”: “Saturday”
},
{
“id”: “3”,
“name”: “Angular Sesh”,
“when”: “Next Friday”
}
...
Define your data
(Schema)
Invoke Operation Get EXACTLY what
you asked for
How To Use GraphQL

GraphQL sounds legit!
I want to run my own GraphQL server!!

Focus on Apps
Not Infrastructure

AWS AppSync

AWS AppSync
Managed Serverless
GraphQL service
Connect to data
sources in your account
Add data sync, real-time and
offline capabilities for any data
source or API
GraphQL façade for any
AWS service
Conflict detection and
resolution in the cloud
Enterprise security features:
IAM, Cognito, OIDC,
API keys

How Does AppSync Work?
Create, Import or Upload
GraphQL Schema
Amazon
Elasticsearch
Amazon
DynamoDB
AWS Lambda
Connect Data
Sources
AppSync Updates Data
in Real Time and Manages
Data when Offline
__________
______________
___________
_________
___________
____________
__________

Building Data-Driven Apps With AWS Appsync
Robust, scalable storage
capable of handling
millions of events a day
Geospatial
search
Real-time
Updates
Mobile and Web
clients

Clients receive the data
they ask for. Nothing
more, nothing less
Get many resources from
many data sources with a
single request
Self-documenting APIs with
Introspection
AWS AppSync Benefits
React Native, Android,
iOS, and Web (JS) using
the Apollo GraphQL client
Data persistence across
application restarts
Write-through mutations with
Optimistic UI

Mix/Match Data Sources on GraphQL Types
Amazon DynamoDB
type Query {
listPosts: [Post]
searchPosts: [Post]
}
type Mutation {
addPost: Post
}
type Post {
id: ID!
content: String
description: String
ups: Int
downs: Int
}
Amazon Elasticsearch
listPosts
searchPosts
addPost

Amazon Elasticsearch
Amazon DynamoDB
Browser
Mobile
device WebSocket
servers
Web servers
PubSub
servers
Subscription
/search
/taps
/taps/:id
/m_search
AWS Lambda
Third-party service
…
Real-Time App Before AppSync

/graphql
AWS AppSync
Subscription Amazon Elasticsearch
Amazon DynamoDB
AWS Lambda
Third-party service
Real-Time App After AppSync

Real-Time Updates
o GraphQL subscriptions
o Event stream of mutation results
o Data synchronisation with MQTT + WebSockets
o Client managed WebSocket connection
o Automatic catch-up snapshots

Handshake Process
subscription NewPostSub {
addedPost {…}
}
Websocket URL and Connection Payload
Secure Websocket Connection (wss://)

GraphQL Data Flow in AWS AppSync
Request Template Response Template
Data Sources
1 2 3 4 5

Fine Grained Access Controls

Access Control Checks
Simple
Only users in certain groups can perform actions
#if($hasPermission || $ctx.result.public == 'yes')
$utils.toJson($ctx.result)
#else
$utils.unauthorized()
#end
#if($ctx.result["Owner"] == $ctx.identity.username)
$utils.toJson($context.result);
#else
#end
Advanced
#foreach($group in $ctx.identity.claims.get("cognito:groups"))
#if($group == "Admin")
#set($inCognitoGroup = true)
#end
#end
#if($inCognitoGroup)
{
…write/read from datasource
}
#else
#end

Data Conflicts
Jane
Version : 2 Updated Document
Jane
Version : 1 New Document
Time
John
John
Jane goes offline
Jane comes back online
John
Jane

Handle Data Conflicts In The Cloud
o Conflict detection with optimistic version check
o Conflict resolution strategies:
A. Client wins
B. Server wins
C. Silent reject
D. Custom logic in AWS Lambda
o Client callback for conflict resolution is available
"condition" : {
"expression" : "someExpression"
"conditionalCheckFailedHandler" : {
"strategy" : "Custom",
"lambdaArn" : "arn:..."
}
}

type Mutation {
updatePhoto(profilePicInput: S3ObjectInput!): Profile
}
input S3ObjectInput {
bucket: String!
key: String!
region: String!
localUri: String!
}
type Profile {
name: String!
profilePic: S3Object!
}
type S3Object {
bucket: String!
key: String!
region: String!
}
Amazon
S3
Amazon
DynamoDB
Images and Rich Content
https://github.com/aws-samples/aws-amplify-graphql

Offline Capabilities - AppSync Client Storage
o Offline is a write-through "Store"
o Persistent storage mediums back the Apollo
normalised cache
o Local Storage for web
o AsyncStorage for React Native
o SQLite on native platforms
o Database can be preloaded
o Offline client can be configured
o WiFi only
o WiFi and cellular

AWS AppSync – From November to April

General Availability – New Features
o Test/Debug Resolver Flows
o CloudWatch (Logs and Metrics)
o CloudFormation Support
o Subscription Resolvers
o Batch Delete/Read/Put
o AWS Amplify Support
o AWS Mobile CLI Support
o HIPPA Compliance
GA

Test/Debug/Log
o GraphQL request logs, metrics,
and auditing
o Verbose or Errors
o Type & Field
o Overall Execution Summary
o “Stream” logs to query editor
o “Unit test” with mock context
o Arguments, Identity, Parent
o Single or List results

Batch Operations
o Single or Multiple Tables
o Custom error handling
o Writes, Reads, and Deletes
o Order is preserved
o Web + Mobile + IoT use cases
query {
getMultipleTablesResults {
id
name
}
}

AWS Mobile CLI and AWS Amplify Support
o Quickly use GraphQL + Auth, Storage, Analytics
o Queries, Mutations, and Subscriptions
o Extension of API category, includes Sigv4 signing
o React/Angular components
o Quickly deploy with the
AWS Mobile CLI

Amazon API Gateway AWS AppSync

vs

&

Enough Talking…
https://aws.amazon.com/appsync/resources/#Starter_applications (Angular Chat App)
https://github.com/aws-samples/aws-mobile-appsync-chat-starter-angular
https://aws.amazon.com/blogs/mobile/building-a-serverless-real-time-chat-application-with-aws-appsync/

Amazon
Cognito
User Pools
JWT Token
GraphQL
Schema
ChatQL
Conversations
Table
Messages
Table
User Conversations
Table
Users Table
Amazon
DynamoDB
Queries and Mutations
Subscriptions
AppSync
Resolvers
User
AWS AppSync
AppSync Data Sources

User
1..1
1..n
1..1
1..n
1..n
User
Conversation
Conversation Messages
GraphQL Relations between NoSQL DynamoDB Tables!!!

Demo Time
https://aws.amazon.com/appsync/resources/#Starter_applications (Angular Chat App)

Takeaways
Don’t boil the Ocean. Start small
and iterate on Offline (cache-and-
network), Real-time and Conflict
Resolution
Use UI cues with
Optimistic UI when
Offline
Take advantage of built-in
GraphQL powerful features
such as Connections
(Pagination) and Relations
(NoSQL)
It’s all about the
User Experience:
AWS AppSync = J

Go Build with AWS AppSync and GraphQL!

Applying the Twelve-Factor Application Manifesto to
Developing Serverless Applications
The popular series will return in June & July visiting 6 cities in AU/NZ.
Be sure to register your spot as seats fill up quickly!
https://aws.amazon.com/events/lunch-and-learn/dev-lounge/

Thank You!

Supercharging Applications with GraphQL and AWS AppSync

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Supercharging Applications with GraphQL and AWS AppSync

Ähnlich wie Supercharging Applications with GraphQL and AWS AppSync (20)

Mehr von Amazon Web Services

Mehr von Amazon Web Services (20)

Supercharging Applications with GraphQL and AWS AppSync