Introduction to GraphQL and AWS AppSync

© 2017, Amazon Web Services, Inc. or its Affiliates. All rights reserved
Pop-up Loft
Data in Web and Mobile
Brice Pellé
Enterprise Support Lead, AWS

I want to use complex data models
Problems:
• User Experience
• Network Access
• Multiple Editors
• Complex Relationships
Orders
Order
Details
Customer
Contacts

I have a mobile app, and a data source
Data
API Gateway Lambda
But how can I implement this and still
have great user experience?

Perhaps some requirements?
• Client-specification of the data view
• Complex query support for relationships
• Ad-hoc search, pagination, batching
• Real-time change notifications
• Automatic offline support
• Bandwidth efficiency
• Standard Client / SDK

Option 1: REST
Data
/orders/*
/customers/*
/contacts/*
REST Endpoint
ü Trivial to set up
ü Standard HTTP Calls
§ Relationships
§ Lists with reduced information
§ Query Support
§ Ordering and Paging
§ Notifications

Option 2: OData
Data
/orders/*
/customers/*
/contacts/*
OData Endpoint
ü Standard Libraries
ü Supports Select, Order, Paging
§ Difficult to set up and debug
§ No standard mutations
§ Spotty Relationship support
§ SQL Specific Syntax
§ Notifications

Introducing GraphQL
• POST the shape of data
Return the data in that shape
query {
customers {
id,
name
}
}
{
“data”: {
“customers”: [
{
“id”: “94a6c6461e39”,
“name”: “Amazon Web Services”
}, {
“id”: ” 128e23fcee3b”,
“name”: “Blue Origin”
}
]
}
}

GraphQL Benefits
For the Frontend Developer
• Rapid prototyping without involving Backend Engr.
• Introspection of the available dataset
• Bandwidth Optimization
For the Backend Developer
• Less Deployments for changing requirements
• Security Enforcement at the server

GraphQL Supports…
• Returning specific fields
• Searching for a specific value for a field
• Searching for a wildcard value for a field
• Related items / embedded objects
• Pagination
• Mutations
http://graphql.org/learn/

GraphQL In Action

Demo: Use an GraphQL IDE and Cloud Data
• GraphQL Playground:
– https://www.graphqlbin.com/RVIn
– Also available as a desktop app
• Endpoint:
– https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr
– Embedded into the GraphQL Playground desktop app

Demo: All Movies with titles
query {
allMovies {
id,
title
}
}
{
"data": {
"allMovies": [
{
"id": "cixos5gtq0ogi0126tvekxo27",
"title": "Inception”
}, {
"id": "cixxhjs04pm0h015815qnrkyu",
"title": "The Dark Knight”
}, {
"id": "cixxhneo4qd4e01503f08d2hc",
"title": "Batman Begins”
}, {
"id": "cixxhupwksrq50150i50j3lha",
"title": "The Dark Knight Rises”
}
]
}
}

Demo: First 2 movies, ordered by title
query {
allMovies(first:2, orderBy: title_ASC) {
id,
title
}
}
{
"data": {
"allMovies": [
{
},
{
"id": "cixos5gtq0ogi0126tvekxo27",
"title": "Inception”
}
]
}
}

Demo: Specific Movie (all available fields)
query {
Movie(id:"cixxhneo4qd4e01503f08d2hc") {
id,
title,
slug,
createdAt,
updatedAt,
releaseDate
}
}
{
"data": {
"Movie": {
"releaseDate": "2005-06-15T00:00:00.000Z",
"updatedAt": "2017-06-01T12:50:48.000Z”,
"slug": "batman-begins",
"createdAt": "2017-01-14T17:10:00.000Z",
}
}
}

Demo: Specific Movie, and the Actors
query {
Movie(id:"cixxhneo4qd4e01503f08d2hc") {
id,
title,
slug,
releaseDate,
actors(first: 2) {
name
}
}
}
{
"data": {
"Movie": {
"releaseDate": "2005-06-15T00:00:00.000Z",
"slug": "batman-begins",
"actors": [
{
"name": "Christian Bale”
},
{
"name": "Michael Caine”
}
],
"title": "Batman Begins"
}
}
}

AWS AppSync: GraphQL with Benefits
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,
API keys)

How to use AWS AppSync
• AWS Mobile AppSync SDK JavaScript
– https://github.com/awslabs/aws-mobile-appsync-sdk-js
– Integrates with Apollo GraphQL SDK
– Available for Android, iOS, JavaScript & Others
• Offline Support
– Automatically persisted for queries
– Write-through for mutations
– Conflict resolution in the cloud, optional client callback
• Real-time Support
– Event driven model
– Automatic Websocket connection

Conflict Resolution
• Automatic Cloud-based Resolution:
– Server wins
– Silent Failure
– Custom Logic in AWS Lambda
• Optional Fall back to a client callback
– Allows presentation of custom UI
Conflict detection and
resolution in the cloud

GraphQL subscriptions
• Near real-time updates of data
• Event-based model, triggered by mutations
– Scalable platform for common use cases
• Can be used by any data source
– Elasticsearch, DynamoDB, Lambda

Building a Simple Offline App

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

Best Practices
• Don’t boil the ocean
– Start with offline query support
• Use subscriptions appropriately
– Be kind to your users network and battery
– Only use subscriptions for rapidly evolving mutations
• Don’t over-complicate conflict resolution
– Most situations do not need manual conflict resolution
– For complex situations, use a lambda and keep client logic light

Client-side Tools
• Clients
– AWS AppSync SDK: https://github.com/awslabs/aws-mobile-appsync-sdk-js
– Apollo GraphQL: https://github.com/apollographql
• Data Browsers
– The AWS AppSync Console
– GraphiQL: https://github.com/graphql/graphiql
– GraphQL IDE: https://github.com/andev-software/graphql-ide
• Plugins
– Chrome Plugin: https://chrome.google.com/webstore/detail/graphql-network

Pop-up Loft

Introduction to GraphQL and AWS AppSync

Recommended

Recommended

More Related Content

More from Amazon Web Services

More from Amazon Web Services (20)

Introduction to GraphQL and AWS AppSync