0 to 100kmh with GraphQL. Rapid API Prototyping usingserverless backend in the cloud.pdf

© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
03.04.2019
O S L O

0 to 100 with GraphQL:
Rapid Development Techniques for APIs
{
"name": "Sébastien Stormacq",
"role": ”Technical Evangelist",
"company": "Amazon Web Services”,
"twitter": ”@sebsto”,
”github": ”sebsto”
}
B A R 4
O S L O
03.04.2019

© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
This talk is for
developers

This talk is for
developers
< frontend | backend >

How to you prototype API ?

Congratulations !
You’ve just been hired.

Today’s mobile experience is lacking
Mobile website, no native apps
Slow to book, low conversion rates
Backend built for high-speed desktops
!

Your job is to define tomorrow’s experience
Digital agencies hired for design
First prototype in 4 weeks
Must use real data, no mockup
!

Our Goal
Enable backend services for prototype
Allow design to evolve
Keeping up with day-to-day job
!

© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
{
"_id": 3,
"name": "ElastiLodge South Zanetown",
"image": "https://placehold.it/300x300.png",
"description": "Sint nostrum vel quibusdam quia
reprehenderit cum exercitationem quia ea.",
"location": "South Zanetown",
"manager": {
"name": "Florentino Jacobi",
"email": "florentino.jacobi@elastilodge.com"
},
"timeZone": "US/Central",
"phoneNumber": "802-918-3262",
"category": 5,
Legacy REST API
"address": {
"street": "410 Simonis Forest",
"zip": "07545-2308",
"city": "South Zanetown",
"country": "Virgin Islands, British"
},
"deskHours": "24 hours",
"amenities": [ ... ],
"restaurants": [ ... ]
}

What are the challenges of REST API

/posts /comments /authors
REST API
Chatty & Over fetching
{
"posts" : [
{
"id" : 1,
"content" : "the quick brown fox jumps over the…",
"author" : "/authors/123",
"created" : 1550486509,
"comments" : "/posts/1/comments",
...
},
{
"id" : 2,
"content" : "the quick brown fox jumps over…",
"author" : "/authors/123"
"created" : 1550486509,
"comments" : "/posts/2/comments",
...
}
]
}

Introducing GraphQL

GraphQL is a query language for
your API, and a server-side
runtime for executing queries by
using a type system you define
for your data. https://graphql.org

Why GraphQL ?
posts comments authors
GraphQL API

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

GraphQL Operations
Queries
Read data
Mutations
Write data
Subscriptions
Listen for data
query {
search(q: “harry potter”) {
title
}
}
mutation {
create(title: “new book”) {
id
}
}
subscription {
onCreate {
id
title
}
}

Is REST dead then?
When data drives UI
Structured data
Query-driven
Client-driven development
Use GraphQL
When you leverage HTTP
Caching, Content types
Hypermedia (HATEOAS)
For resources (eg Amazon S3)
Use REST
Pick the appropriate protocol for your use case

How to deploy GraphQL API ?

AWS App Sync
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 facade for any
AWS service
Conflict detection and
resolution in the cloud
Enterprise security features:
IAM, Amazon Cognito, OIDC,
API keys

AppSync Data Sources

AppSync Resolvers

Hello AWS AppSync
KEEP
CALM
and
WATCH
the
DEMO

Prototype : Phase #1
Hotel Detail

Hotel Detail: Design
What data is required?
Can we use existing data sources?
How can we enable via AppSync?
Challenges? Missing data?

Mapping to Legacy API {
"_id": 3,
"name": "EL Resort & Spa",
"description": "...",
"location": "Fiji",
"manager": {
"name": "Florentino Jacobi",
"email": "florentino.jacobi@elastilodge.com"
},
"timeZone": "US/Central",
"address": {
"street": "123 Main St",
”postalcode": "07545",
"city": "Momi Bay",
"country": "Fiji"
},
"phoneNumber": "1-888-123-4567",
"category": 5,
"deskHours": "24 hours",
"restaurants": [ ... ]
}

Hotel Detail: GraphQL Schema
type Hotel {
hotelId: ID!
name: String!
image: String
location: String!
phoneNumber: AWSPhone!
address: Address!
...
}
type Query {
listHotels(offset: String, limit: Int)
getHotel(hotelId: ID!)
}

Hotel Detail: Resolvers
## Resolver: Request Mapping ##
{
"version": "2018-05-29",
"method": "GET",
"resourcePath": "/hotels/${ctx.args.hotelId}",
"params": {
"headers": {
"Content-Type": "application/json"
}
},
}
## Resolver: Response Mapping ##
#if($ctx.result.statusCode == 200)
## If response is 200, return the body.
## Could also filter result...
$ctx.result.body
#else
## If not 200, append response to error
$utils.appendError($ctx.result.body)
#end

Hotel Detail: Result
query {
getHotel(hotelId: 3) {
name
location
image
phoneNumber
address {
street
city
}
amenities
}
}
{
"name": "ElastiLodge North Rodgerstad",
"location": "North Rodgerstad",
"image": "/300x300.png",
"phoneNumber": "(214) 210-4674",
"address": {
"street": "123 Main St",
"city": "North Rodgerstad"
},
"amenities": [ ... ]
}

Mobile Code – Initialize App Sync Client
do {
// create app sync configuration (cache, service config etc)
let config = …
// client initialization
let appSyncClient = try AWSAppSyncClient(appSyncConfig: config)
} catch {
fatalError("Error initializing appsync client. (error)")
}

Mobile Code – Run a Query
// call a GraphQL Query
appSyncClient?.fetch(query: GetHotelQuery(hotelId: hotelId),
cachePolicy: .fetchIgnoringCacheData)
{(result, error) in
guard let r = result, error == nil else {
print(error?.localizedDescription ?? "")
return
}
// use the data in the GUI
self.hotelDetails = r.data?.getHotel
…
}

Mobile App – Phase 1
KEEP
CALM
and
WATCH
the
DEMO

Reservations

Reservations: Design
What data is required?
Can we use existing data sources?
How can we enable via AppSync?
Challenges?

Reservations: GraphQL Schema
type Reservation {
confirmationNumber: ID!
hotel: Hotel!
guest: User!
startDate: AWSDate!
endDate: AWSDate!
rate: Int!
}
type Query {
...
reservations(guestId : ID!):[Reservation]
}
type Mutation {
createReservation(input:ReservationInput)
deleteReservation(confNum: ID!)
}

Reservations: Query Resolver - Input
#set( $todayString = $util.time.nowISO8601().substring(0, 10) )
{
"version": "2017-02-28",
"operation": "Query",
"query": {
"expression": "guestId = :gId AND startDate > :startDate",
"expressionValues": {
":gId": $util.dynamodb.toDynamoDBJson($ctx.identity.sub),
":startDate": $util.dynamodb.toDynamoDBJson($todayString)
}
}
}
Note: assumes user is logged in via AWS Cognito User Pool. Details are outside our scope.

Reservations: Query Resolver - Output
$util.toJson($ctx.result.items)
Note: assumes user is logged in via AWS Cognito User Pool. Details are outside our scope.

Reservations: Result
query {
guestReservations {
confirmationNumber
hotel {
hotelId
name
image
phoneNumber
}
startDate
endDate
}
}

Extending Reservation Workflow

Subscription Query
subscription ReservationSubscription {
createReservationEvent(guestId:1) {
confirmationNumber
}
}

Mobile Code – Subscribe to changes
let sub = CreateReservationEventSubscription(guestId: userId)
newReservationSubscription = try appSyncClient?.subscribe(subscription: sub,
resultHandler: { (result, transaction, error) in
// check for error
// store a reference to the new booking into our cache
transaction?.update(query: GuestReservationsQuery(guestId: userId)) {
(data: inout GuestReservationsQuery.Data) in
data.guestReservations?.append(bookingToAdd)
// consume the data in the UI
self.bookingDetails?.append(bookingToAdd)
}
}

Reservation Subscriptions
KEEP
CALM
and
WATCH
the
DEMO

Adaptive Rates

Adaptive Rates: Design
R&D is building an adaptive rate capability
Delivered via Amazon SageMaker API
How do we add today’s rate to our existing
API?

Adaptive Rates: Evolving our GraphQL API
GraphQL supports multiple data
sources per query:
1. Add new field
2. Configure new Data Source
and Resolvers

Adaptive Rates: GraphQL Types and Resolvers
type Hotel {
hotelId: ID!
name: String!
location: String!
...
rate: Rate
}
type Rate {
hotelId: ID!
rate: Int!
currency: String!
date: AWSDate!
}
## rate Field Resolver: Request Mapping ##
{
"version": "2018-05-29",
"method": "GET",
"resourcePath":
"/rd/rates/${ctx.source.hotelId}",
"params": {
"headers": {
"Content-Type": "application/json"
}
}
}

Adaptive Rates: Result
query {
getHotel(hotelId: 3) {
name
location
image
phoneNumber
address {
street
city
}
amenities
rate {
currency
rate
}
}
}
{
"name": "ElastiLodge North Rodgerstad",
"location": "North Rodgerstad",
"phoneNumber": "(214) 210-4674",
"address": {
"street": "",
"city": ""
},
"rate": {
"currency": "USD",
"rate": 312
}
}

Field-level resolution
KEEP
CALM
and
WATCH
the
DEMO

What did we just did ?

What did we accomplish today?
Built a rich, flexible, mobile-ready API
Incorporated legacy, new, and prototype features in a single endpoint
Evolved API as requirements changed
No coding required!
Well, there were a few Velocity Templates
AWS Console includes starter / boilerplate templates

AWS Amplify CLI
Toolchain for developers
Enables you to prototype and
build quickly
Built-in GraphQL Transformer
Converts schema to CloudFormation
templates and builds cloud resources
$ amplify api add
# create GraphQL schema
# for example:
type Hotel @model @searchable {
name: String!
location: String!
...
}
https://github.com/aws-amplify/amplify-cli

Backend Engineer: Hmm. So you’re saying this
“GraphQL” will allow any web or native engineer to
arbitrarily query basically any field in any backend
service, recursively, however they want, without any
backend engineers involved?
Frontend Engineer: Yeah, right? It’s amazing!
[…silence…]
Backend Engineer: Guards, seize this person.

Real world pitfalls

Code presented today
https://github.com/sebsto/reinvent2018-mob320

Great GraphQL Podcasts

Thank you!
{
"name": "Sébastien Stormacq",
"role": ”Technical Evangelist",
"company": "Amazon Web Services”,
"twitter": ”@sebsto”,
”github": ”sebsto”
}

Please complete the session
survey in the mobile app.

0 to 100kmh with GraphQL. Rapid API Prototyping usingserverless backend in the cloud.pdf

Recommended

Recommended

More Related Content

Similar to 0 to 100kmh with GraphQL. Rapid API Prototyping usingserverless backend in the cloud.pdf

Similar to 0 to 100kmh with GraphQL. Rapid API Prototyping usingserverless backend in the cloud.pdf (20)

More from Amazon Web Services

More from Amazon Web Services (20)

0 to 100kmh with GraphQL. Rapid API Prototyping usingserverless backend in the cloud.pdf