1. © 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

2. © 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

3. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

4. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

5. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Is There A Better Way

6. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
GraphQL

7. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

8. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
What Is GraphQL?
/posts /comments /authors
REST API
posts comments authors
GraphQL API

9. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

10. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

11. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

12. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
GraphQL sounds legit!
I want to run my own GraphQL server!!

13. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Focus on Apps
Not Infrastructure

14. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS AppSync

15. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

16. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
__________
______________
___________
_________
___________
____________
__________

17. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

18. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

19. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

20. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

21. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
/graphql
AWS AppSync
Subscription Amazon Elasticsearch
Amazon DynamoDB
AWS Lambda
Third-party service
Real-Time App After AppSync

22. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

23. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Handshake Process
subscription NewPostSub {
addedPost {…}
}
Websocket URL and Connection Payload
Secure Websocket Connection (wss://)

24. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
GraphQL Data Flow in AWS AppSync
Request Template Response Template
Data Sources
1 2 3 4 5

25. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Fine Grained Access Controls

26. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
Only users in certain groups can perform actions
#if($ctx.result["Owner"] == $ctx.identity.username)
$utils.toJson($context.result);
#else
$utils.unauthorized()
#end
Advanced
Only users in certain groups can perform actions
#foreach($group in $ctx.identity.claims.get("cognito:groups"))
#if($group == "Admin")
#set($inCognitoGroup = true)
#end
#end
#if($inCognitoGroup)
{
…write/read from datasource
}
#else
$utils.unauthorized()
#end

27. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Data Conflicts
Jane
Version : 2 Updated Document
Jane
Version : 2 Updated Document
Version : 3 Updated Document
Version : 1 New Document
Time
John
John
Jane goes offline
Jane comes back online
Version : 4 Updated Document
John
Jane

28. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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:..."
}
}

29. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

30. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

31. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
AWS AppSync – From November to April

32. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

33. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

34. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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
}
}

35. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

36. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

37. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amazon API Gateway AWS AppSync

38. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amazon API Gateway AWS AppSync
vs

39. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amazon API Gateway AWS AppSync
vs

40. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amazon API Gateway AWS AppSync
&

41. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Amazon API Gateway AWS AppSync
&

42. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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/

43. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.

44. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

45. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
User
1..1
1..n
1..1
1..n
1..n
User
Conversation
Conversation Messages
GraphQL Relations between NoSQL DynamoDB Tables!!!

46. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Demo Time
https://aws.amazon.com/appsync/resources/#Starter_applications (Angular Chat App)

47. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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

48. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.© 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Go Build with AWS AppSync and GraphQL!

49. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
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/

50. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
Thank You!