Building Serverless GraphQL Backends

1. Serverless GraphQL
Backend Architecture
@nikolasburk

2. Nikolas Burk 👋
Developer at Graphcool
$ whoami
@nikolasburk

3. Agenda
1. GraphQL Introduction
2. Serverless Functions
3. Serverless GraphQL Backends
4. Demo
@nikolasburk

4. GraphQL Introduction
@nikolasburk

5. What’s GraphQL?
• new API standard by Facebook
• query language for APIs
• declarative way of fetching & updating data
@nikolasburk

6. Mary
Mary’s posts:
Learn GraphQL Today
Why GraphQL is better than
REST
React & GraphQL - A declarative
love story
Relay vs Apollo - GraphQL
clients
Last three followers:
John, Alice, Sarah
Example: Blogging App

7. Example: Blogging App with REST
/users/<id>
/users/<id>/posts
/users/<id>/followers
3 API endpoints

8. 1 Fetch user data
/users/<id>/users/<id>
/users/<id>/posts
/users/<id>/followers
{
“user”: {
“id”: “er3tg439frjw”
“name”: “Mary”,
“address”: { … },
“birthday”: “July 26, 1982”
}
}
HTTP GET
Mary
Mary’s posts:
Last three followers:

9. 2
/users/<id>
/users/<id>/posts
/users/<id>/followers
Fetch posts
HTTP GET
{
“posts”: [{
“id”: “ncwon3ce89hs”
“title”: “Learn GraphQL today”,
“content”: “Lorem ipsum … ”,
“comments”: [ … ],
}, {
“id”: “dsifr3as0vds”
“title”: “React & GraphQL - A declarative love story”,
“content”: “Lorem ipsum … ”,
“comments”: [ … ],
}, {
“id”: “die5odnvls1o”
“title”: “Why GraphQL is better than REST”,
“content”: “Lorem ipsum … ”,
“comments”: [ … ],
}, {
“id”: “dovmdr3nvl8f”
“title”: “Relay vs Apollo - GraphQL clients”,
“content”: “Lorem ipsum … ”,
“comments”: [ … ],
}]
}
Mary
Mary’s posts:
Learn GraphQL Today
Why GraphQL is better than REST
React & GraphQL - A declarative
love story
Relay vs Apollo - GraphQL clients
Last three followers:

10. /users/<id>
/users/<id>/posts
/users/<id>/followers
HTTP GET
{
“followers”: [{
“id”: “leo83h2dojsu”
“name”: “John”,
“address”: { … },
“birthday”: “January 6, 1970”
},{
“id”: “die5odnvls1o”
“name”: “Alice”,
“address”: { … },
“birthday”: “May 1, 1989”
}{
“id”: “xsifr3as0vds”
“name”: “Sarah”,
“address”: { … },
“birthday”: “November 20, 1986”
}
…
]
}
Mary
Mary’s posts:
Learn GraphQL Today
Why GraphQL is better than REST
React & GraphQL - A declarative
love story
Relay vs Apollo - GraphQL clients
Last three followers:
John, Alice, Sarah
Fetch followers3

11. 1 API endpoint
Example: Blogging App with GraphQL

12. Mary’s posts:
Last three followers:
Fetch everything with a single request1
HTTP POST
query {
User(id: “er3tg439frjw”) {
name
posts {
title
}
followers(last: 3) {
name
}
}
}

13. Mary’s posts:
Last three followers:
Mary
Learn GraphQL Today
Why GraphQL is better than REST
React & GraphQL - A declarative
love story
Relay vs Apollo - GraphQL clients
John, Alice, Sarah
Fetch everything with a single request1
HTTP POST
{
“data”: {
“User”: {
“name”: “Mary”,
“posts”: [
{ title: “Learn GraphQL today” },
{ title: “React & GraphQL - A declarative love story” }
{ title: “Why GraphQL is better than REST” }
{ title: “Relay vs Apollo - GraphQL Clients” }
],
“followers”: [
{ name: “John” },
{ name: “Alice” },
{ name: “Sarah” },
]
}
}
}

14. The GraphQL Schema
@nikolasburk
• strongly typed & written in Schema Definition
Language (SDL)
• defines API ( = contract for client-server communication)
• root types: Query, Mutation, Subscription

15. @nikolasburk
Another Example: Chat
type Person {
name: String!
messages: [Message!]!
}
type Message {
text: String!
sentBy: Person
}

16. @nikolasburk
{
Message(id: “1”) {
text
sentBy {
name
}
}
}
type Query {
Message(id: ID!): Message
}
Root Types: Query

17. @nikolasburk
{
Message(id: “1”) {
text
sentBy {
name
}
}
}
type Query {
Message(id: ID!): Message
}
Root Types: Query

18. @nikolasburk
{
allMessages {
text
sentBy {
name
}
}
}
type Query {
Message(id: ID!): Message
allMessages: [Message!]!
}
Root Types: Query

19. @nikolasburk
{
allMessages {
text
sentBy {
name
}
}
}
type Query {
Message(id: ID!): Message
allMessages: [Message!]!
}
Root Types: Query

20. @nikolasburk
mutation {
createMessage(text:“Hi”) {
id
}
}
type Mutation {
createMessage(text: String!): Message
}
Root Types: Mutation

21. @nikolasburk
mutation {
createMessage(text:“Hi”) {
id
}
}
type Mutation {
createMessage(text: String!): Message
}
Root Types: Mutation

22. @nikolasburk
mutation {
updateMessage(
id: “1”,
text: “Hi”
) {
id
}
}
type Mutation {
createMessage(text: String!): Message
updateMessage(id: ID!, text: String!): Message
}
Root Types: Mutation

23. @nikolasburk
mutation {
updateMessage(
id: “1”,
text: “Hi”
) {
id
}
}
type Mutation {
createMessage(text: String!): Message
updateMessage(id: ID!, text: String!): Message
}
Root Types: Mutation

24. @nikolasburk
mutation {
deleteMessage(id: “1”) {
id
}
}
type Mutation {
createMessage(text: String!): Message
updateMessage(id: ID!, text: String!): Message
deleteMessage(id: ID!): Message
}
Root Types: Mutation

25. @nikolasburk
mutation {
deleteMessage(id: “1”) {
id
}
}
type Mutation {
createMessage(text: String!): Message
updateMessage(id: ID!, text: String!): Message
deleteMessage(id: ID!): Message
}
Root Types: Mutation

26. @nikolasburk
type Query {
Message(id: ID!): Message
allMessages: [Message!]!
}
Full* Schema
type Mutation {
createMessage(text: String!): Message
updateMessage(id: ID!, text: String!): Message
deleteMessage(id: ID!): Message
}
type Person {
name: String!
messages: [Message!]!
}
type Message {
text: String!
sentBy: Person
}

27. Serverless Functions
Breaking the Monolith 💥
@nikolasburk

28. Monolithic Architectures
@nikolasburk
• simple team structure
• less communication
overhead
• global type safety*
• hard to test
• deployment workflows
• bad scalability
👎👍

29. Microservices
@nikolasburk
• solve many problems of the monolith
• new challenges:
• organize and orchestrate the interplay of services
• separating stateful and stateless components
• dependencies between microservices

30. Serverless Functions (FaaS)
@nikolasburk
• deploy individual functions, not servers
• can be invoked via HTTP webhook
• FaaS providers
• AWS Lambda
• Google Cloud Functions
• …

31. Using the Graphcool Framework to build
Serverless GraphQL Backends
@nikolasburk

32. The Graphcool Framework
• automatically generated CRUD GraphQL API based
on data model
• event-driven core to implement business logic
• global type system determined by GraphQL schema
@nikolasburk
A new level of abstraction for backend development

33. Serverless Functions w/ Graphcool
• Hooks - synchronous data validation & transformation
• Subscriptions - triggering asynchronous events
• Resolvers - custom GraphQL queries & mutations
@nikolasburk

34. Typesafe Events Example (Subscription)
Send Welcome Email to new Users
@nikolasburk

35. Client Apps
Function
Runtime
Event System
Graphcool Framework
ƛ

36. ƛ
subscription {
Person {
node {
name
email
}
}
}
Client Apps
welcomeEmail.js
Function
Runtime
Event System
Graphcool Framework

37. subscription {
Person {
node {
name
email
}
}
}
Client Apps
ƛ
welcomeEmail.js
⏱
Function
Runtime
Event System
Graphcool Framework

38. Function
Runtime
subscription {
Person {
node {
name
email
}
}
}
Event System
Client Apps
ƛ
welcomeEmail.js
mutation {
createPerson(
name:“Nikolas”
email: “nikolas@graph.cool”
) {
id
}
}
⏱
Graphcool Framework

39. subscription {
Person {
node {
name
email
}
}
}
Client Apps
ƛ
welcomeEmail.js
mutation {
createPerson(
name:“Nikolas”
email: “nikolas@graph.cool”
) {
id
}
}
💥
Function
Runtime
Event System
Graphcool Framework

40. “data”: {
“Message”: {
“node”: {
“name”: “Nikolas”
“email”: “nikolas@graph.cool”
}
}
}
Client Apps
mutation {
createPerson(
name:“Nikolas”
email: “nikolas@graph.cool”
) {
id
}
}
subscription {
Person {
node {
name
email
}
}
}
welcomeEmail.js
ƛ
Function
Runtime
Event System
Graphcool Framework

41. Demo 🔨
@nikolasburk

42. Big news coming up!
Stay tuned… 😏
@nikolasburk

43. Thank you! 🙇
@nikolasburk