Serverless GraphQL Applications with Lambda

• Based in Berlin/San Francisco

• @graphcool (Serverless GraphQL Platform)

• Love cutting-edge technology 🤖

@_schickling

Johannes Schickling

@schickling

• Introduction to GraphQL

• Architecture & Concepts

• Live Demo

• Resources

Introduction to GraphQL

Use Case: Webshop

• Each Item has the following fields:

• id: ID

• title: String

• price: Float

• ratingInfo: RatingInfo

{ "id": "cj1s966c8hudb0139bg5qjmna", "price": 2500, "title": "Macbook Pro 2016", "ratingInfo": null}

Status Quo: RESTful APIs

GET https://api.shop.com/items

[{ "id": "cj1s966c8hudb0139bg5qjmna", "createdAt": "2017-04-21T19:52:37.000Z", "updatedAt": "2017-04-21T19:52:50.000Z", "price": 2500, "title": "Macbook Pro 2016"},{ "id": "cj1s96cpohufg0139keoewq22", "createdAt": "2017-04-21T19:52:46.000Z", "updatedAt": "2017-04-21T19:53:28.000Z", "price": 800, "title": "iPhone"},{ "id": "cj1s97mpwhuo10139salvx5wn", "createdAt": "2017-04-21T19:53:45.000Z", "updatedAt": "2017-04-21T19:53:45.000Z", "price": 1700, "title": "Macbook Air 2015"}]

Related data?

Problem: Related data?

• Strategy 1: Nested endpoints

Problem: Related data?

• Strategy 1: Nested endpoints Data overfetching

Problem: Related data?

• Strategy 1: Nested endpoints Data overfetching

• Strategy 2: Extra endpoint

Problem: Related data?

• Strategy 1: Nested endpoints Data overfetching

• Strategy 2: Extra endpoint N+1 query problem

Solution: GraphQL“A query language for your API”

GraphQL Query

query { allItems {

title ratingInfo { count averageRating } }}

{ "data": { "allItems": [ { "title": "iPhone 6", "ratingInfo": { "count": 115, "averageRating": 4.7 } }, { "title": "Macbook 2016", "ratingInfo": { "count": 29, "averageRating": 4.9 } }, { "title": "Macbook 2015", "ratingInfo": { "count": 235, "averageRating": 4.8 } } ] }}

GraphQL Mutation

mutation { createItem( title: "iPhone 7" price: 900 ) { id }}

{ "data": { "createItem": { "id": "cj1sbo2phrmpq0124t63uyo5f" } }}

Demo

▶

GraphQL IDL

type Item { id: ID! @isUnique createdAt: DateTime! updatedAt: DateTime! price: Float! title: String! ratingInfo: RatingInfo! @relation(name: "ItemRatingInfo")}

type RatingInfo { id: ID! @isUnique createdAt: DateTime! updatedAt: DateTime! count: Int! averageRating: Float! item: Item! @relation(name: "ItemRatingInfo")}

• Describes data model

• Syntax: GraphQL IDL

• Typesystem

Architecture & Concepts

History

History

History

History

History

Traditional Backend

Monolith/Microservices

Database

API + DB + LOCIC LAYER

Serverless GraphQL Backend

GraphQL Backend

API LAYER

Business Logic

LOGIC LAYER

Events

Serverless GraphQL Backend Architecture

1. GraphQL API for frontend & backend applications

2. Event-driven business logic

1. Asynchronous events

2. Synchronous data transformation

3. Global type safety based on GraphQL

Graphcool

• Serverless GraphQL backend

• Turns GraphQL schema into a production-ready backend

• Event-driven

Request Pipeline

TRANSFORM_ARGUMENTS

TRANSFORM_REQUEST

PRE_WRITE

Data WriteSchema Validation

TRANSFORM_PAYLOAD

TRANSFORM_RESPONSE

Data Validation

Demo-App Overview

GraphcoolWebshop Serverless 3rd-party services

Live Demo

Order validation:

* Check availability * Check totals match

Goal: Ordering process

Charge credit card Save to database

What we’ll do

1. Setup GraphQL API

2. Create some test data

3. Deploy functions

4. Configure events

5. Test run

What we’ll do

1. Setup GraphQL API

2. Create some test data

3. Deploy functions

4. Configure events

5. Test run

Resources

GraphQL & Serverless

• https://github.com/graphcool-examples/serverless-webshop

• https://serverless.com/blog/2017-04-5-build-webshop-with-graphql-and-serverless/

slack.graph.cool

Thank you