The Serverless GraphQL Backend Architecture

1. The
Serverless GraphQL
Backend Architecture
@nikolasburk

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

3. Agenda
1. GraphQL Introduction
2. GraphQL Core Concepts
3. Serverless GraphQL Backend Architecture

4. GraphQL Introduction

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. GraphQL Core Concepts
1. Queries
2. Mutations
3. GraphQL Schema
4. Resolver Functions

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

16. Queries
… only read data
query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
@nikolasburk

17. Queries
… only read data
query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
@nikolasburk
Operation Type

18. Queries
… only read data
@nikolasburk
Operation Name query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}

19. Queries
… only read data
@nikolasburk
Fields query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}

20. Queries
… only read data
@nikolasburk
Root Field query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}

21. Queries
… only read data
@nikolasburk
Payload query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}

22. Queries
… only read data
query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
{
“data”: {
“Message”: {
“text”: “Hello 😎”,
“sentBy”: {
“name”: “Sarah”
}
}
}
}
@nikolasburk

23. Queries
… only read data
query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
{
“data”: {
“Message”: {
“text”: “Hello 😎”,
“sentBy”: {
“name”: “Sarah”
}
}
}
}
@nikolasburk

24. Queries
… only read data
{
“data”: {
“Message”: {
“text”: “Hello 😎”,
“sentBy”: {
“name”: “Sarah”
}
}
}
}
@nikolasburk
query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}

25. Mutations
… write and read data
mutation CreateMessageMutation {
createMessage(text:“Greetings 👋”) {
id
}
}
{
“data”: {
“createMessage”: {
“id”: “3”,
}
}
}
@nikolasburk

26. Mutations
… write and read data
mutation CreateMessageMutation {
createMessage(text:“Greetings 👋”) {
id
}
}
{
“data”: {
“createMessage”: {
“id”: “3”,
}
}
}
@nikolasburk

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

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

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

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

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

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

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

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

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

36. @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

37. @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

38. @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
}

39. Let’s play
…with GraphQL Playgrounds
▷

40. Resolver Functions
@nikolasburk
• each field in the schema is backed by a resolver
• the type of a resolver is identical to the type of the
field (including arguments)
• a query is resolved by calling the resolvers for its fields

41. @nikolasburk
type Query {
Message(id: ID!): Message
allMessages: [Message!]!
}
Resolver Functions
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
}

42. @nikolasburk
type Query {
Message(id: ID!): Message
allMessages: [Message!]!
}
Resolver Functions
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
}

43. @nikolasburk
type Query {
Message(id: ID!): Message
allMessages: [Message!]!
}
Resolver Functions
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
}
{
Message(id: “1”) {
text
sentBy {
name
}
}
}
{
“data”:
}

44. @nikolasburk
type Query {
Message(id: ID!): Message
allMessages: [Message!]!
}
Resolver Functions
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
}
{
Message(id: “1”) {
text
sentBy {
name
}
}
}
{
“data”: {
“Message”: {
}
}
}

45. @nikolasburk
type Query {
Message(id: ID!): Message
allMessages: [Message!]!
}
Resolver Functions
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
}
{
Message(id: “1”) {
text
sentBy {
name
}
}
}
{
“data”: {
“Message”: {
“text”: “Hello 😎”
}
}
}

46. @nikolasburk
type Query {
Message(id: ID!): Message
allMessages: [Message!]!
}
Resolver Functions
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
}
{
Message(id: “1”) {
text
sentBy {
name
}
}
}
{
“data”: {
“Message”: {
“text”: “Hello 😎”,
“sentBy”: {
}
}
}
}

47. @nikolasburk
type Query {
Message(id: ID!): Message
allMessages: [Message!]!
}
Resolver Functions
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
}
{
Message(id: “1”) {
text
sentBy {
name
}
}
}
{
“data”: {
“Message”: {
“text”: “Hello 😎”,
“sentBy”: {
“name”: “Sarah”
}
}
}
}

48. @nikolasburk
type Query {
Message(id: ID!): Message
allMessages: [Message!]!
}
Resolver Functions
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
}
{
Message(id: “1”) {
text
sentBy {
name
}
}
}
{
“data”: {
“Message”: {
“text”: “Hello 😎”,
“sentBy”: {
“name”: “Sarah”
}
}
}
}

49. The
Serverless GraphQL
Backend Architecture

50. A New Abstraction for
Backend Development
• automatically generated CRUD GraphQL API
based on data model
• event-driven core to implement business
logic
• global type system determined by GraphQL
schema
@nikolasburk

51. CRUD GraphQL API
@nikolasburk
type Message {
text: String!
sentBy: Person
}
type Query {
Message(id: ID!): Message
allMessages: [Message!]!
}
type Mutation {
createMessage(text: String!): Message
updateMessage(id: ID!, text: String!): Message
deleteMessage(id: ID!): Message
}

52. Event-driven Business Logic
• synchronous events for data validation &
transformation
• asynchronous events for application logic
• all implemented with serverless functions
@nikolasburk

53. Global Type System
• all data flowing through the system is typed
• types are defined in the GraphQL schema
• ideally using a typed language
@nikolasburk

54. Graphcool
The Serverless GraphQL Backend
@nikolasburk

55. Graphcool & Serverless Functions
• Request Pipeline - synchronous data
validation & transformation
• Server-side Subscriptions - triggering
asynchronous events
• Schema Extensions - custom GraphQL
queries & mutations
@nikolasburk

56. Resources 📚
• How to GraphQL - The Fullstack Tutorial for GraphQL
• GraphQL Weekly Newsletter
• GraphQL Radio Podcast

57. We’re hiring!
www.graph.cool/jobs

58. Thank you! 🙇
… any questions?