Real Time and Offline Applications with GraphQL

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Kwun-Hok Chan, Solution Architect
khchan@amazon.com
Building Real-time and Offline Applications
AWS AppSync

GET /about/me
{
"name": "Kwun-Hok Chan",
"email": "khchan@amazon.com",
"company": "Amazon Web Services",
"title": "Solution Architect",
”location": ”Hong Kong",
"aod": [
"Serverless",
"Containers",
"DevOps”
]
}

Agenda
• Overview
• AWS AppSync
• GraphQL
• Demo

Overview
AWS AppSync

AWS AppSync
• Build real-time,
collaborative mobile and
web apps
• Handles offline scenarios
common to mobile apps
• Automatically resolves
data conflicts
• Quickly prototype and
build apps from multiple
data sources
• Fully-managed GraphQL
service with benefits
• Helps keep data secure

What problem does it solve?

Developer Challenges With App Data
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

Build Powerful Data Driven Apps With AppSync
Real-time
Collaboration
Offline
Programming
Model with
Sync
Get Only the
Data You Need
Own Your Data Fine-grained
Access
Control

Apps You Can Build With AppSync
Real-time Apps
- Dashboard
- Leaderboard
- Field service apps
Chat Apps Apps with Complex
Data Structures
and Types
Geo Apps

How does AWS AppSync work?

Let’s simplify by comparing with a
more well-understood approach

I have a web and mobile app, and a data source
Data
API Gateway Lambda
Using API Gateway and Lambda is one
approach for performing DB operations

What is GraphQL?
Open, declarative data-fetching specification
!= Graph database
Use NoSQL, Relational, HTTP, etc.
Traditional data-fetching GraphQL
/posts
/postInfo
/postJustTitle
/postsByAuthor
/postNameStartsWithX
/commentsOnPost
/graphql

How does GraphQL work?
{
"id": "1",
"name": "Get Milk",
“priority": "1"
},
{
"id": “2",
"name": “Go to gym",
“priority": “5"
},…
type Query {
getTodos: [Todo]
}
type Todo {
id: ID!
name: String
description: String
priority: Int
duedate: String
}
query {
getTodos {
id
name
priority
}
}
Model data with
application schema
Client requests what it
needs
Only that data is
returned

GraphQL Subscriptions
Near Realtime updates of data
Event based mode, triggered by Mutations
- Scalable model, designed as a platform for common use-cases
Can be used with ANY data source in AppSync
- Lambda, DynamoDB, Elasticsearch
mutation addPost( id:123
title:”New post!”
author:”Nadia”){
id
title
author
}
data: [{
id:123,
title:”New Post!”
author:”Nadia”
}]

type Subscription {
addedPost: Post
@aws_subscribe(mutations: ["addPost"])
deletedPost: Post
@aws_subscribe(mutations: ["deletePost"])
}
type Mutation {
addPost(id: ID! author: String! title:
String content: String): Post!
deletePost(id: ID!): Post!
}
subscription NewPostSub {
addedPost {
__typename
version
title
content
author
url
}
}
Schema

GraphQL Subscription Handshake
Subscription NewPostSub {
addedPost{…}
}
WebSocket URL and Connection Payload
Secure Websocket Connection (wss://)

Real time UI updates
const AllPostsWithData = compose(
graphql(AllPostsQuery, { options: { fetchPolicy: 'cache-and-network‘ },
props: (props) => ({
posts: props.data.posts,
subscribeToNewPosts: params => {
props.data.subscribeToMore({
document: NewPostsSubscription,
updateQuery: (prev, { subscriptionData: { newPost } }) => ({
...prev,
posts: [newPost, ...prev.posts.filter(post => post.id !== newPost.id)]
})
});
});
…//more code

Offline mutations
Jane
Version : 2 Updated Document
Jane
Version : 1 New Document
Time
John
John
Jane goes offline
Jane comes back online
John
Jane

Conflict Resolution and Synchronization
Conflict resolution in the cloud
1. Server wins
2. Silent reject
3. Custom logic (AWS Lambda)
- Optimistic version check
- Extend with your own checks
Optional
• Client callback for Conflict Resolution is still
available as a fallback
{
"version" : "2017-02-28",
"operation" : "PutItem",
"key" : {
"id" : { "S" : "1" }
},
"condition" : {
"expression" : "attribute_not_exists(id)"
}
}
Example: Check that an ID doesn’t already exist:
"condition" : {
"expression" : "someExpression"
"conditionalCheckFailedHandler" : {
"strategy" : "Custom",
"lambdaArn" : "arn:..."
}
}
Run Lambda if version wrong:

Images and rich content
type S3Object {
bucket: String!
key: String!
region: String!
}
input S3ObjectInput {
bucket: String!
key: String!
region: String!
localUri: String!
}
type Profile {
name: String!
profilePic: S3Object!
}
type Mutation {
updatePhoto(name: String!,
profilePicInput: S3ObjectInput!): Profile
}

Client experience and configuration
Offline is a write-through “Store”
- Persistent storage mediums back the client “normalized
cache”
- Local Storage for web
- SQLite on hybrid/native platforms
SQLite database can be preloaded
- Hydrate after installing from AppStore
Offline client can be configured
- Wifi only vs. wifi & carrier
Queries automatically persist offline
Mutations are an “optimistic write”
- Control offline UI updates with “optimistic response”
- Update views/lists when editing/adding data offline

Demo

Service Cost per month
• Free Tier lasts for first 12 months
• Don’t forget to add Data Transfer + Database
• Always review the AWS Pricing Page for latest pricing
Free Tier Standard Cost
Queries 250,000 $4 / million
Real-time Updates 250,000 $2 / million
Real-time Connection-minutes 600,000 $0.08 / million
* US Pricing, as of December 1, 2017

Pricing Example (all numbers per month)
• Chat application with 2,500 users
• Average user connects for 1,500 minutes
• Sends 1,000 and Receives 1,000 messages
• 2.5M queries and 2.5M real-time updates
AppSync Query 2.5M x $4/million = $10.00
AppSync Real-time 2.5M x $2/million = $5.00
AppSync Minutes 2,500 x 1,500 x $0.08/million = $0.30
Data Transfer 1KB x 2.5M = 2.4GB x $0.09 = $0.21
DynamoDB Database Free Tier (as long as store < 25Gb)
Total $15.51

Happy coding with AppSync!
AWS AppSync
Amazon
DynamoDB
AWS
Lambda
ElasticSearch
subscriptions
/graphql
Resolvers
DataSources

We need your feedback
https://bit.ly/2HlWoST

Thank You!
Kwun-Hok Chan (khchan@amazon.com)

Real Time and Offline Applications with GraphQL

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Real Time and Offline Applications with GraphQL

Similar to Real Time and Offline Applications with GraphQL (20)

More from Amazon Web Services

More from Amazon Web Services (20)

Real Time and Offline Applications with GraphQL