Serverless computing allows you to build and run applications and services without thinking about servers. Learn more about serverless on AWS.

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

3. Agenda
1. History & Motivation
2. GraphQL Introduction
3. GraphQL Server Development
4. Demo: Build & Deploy a GraphQL Server
5. Lessons learned

4. History & Motivation
How did we get here?
@nikolasburk

5. History
INFRASTRUCTURE
ARCHITECTURE
API STANDARD
Hardware/VPS
Monolith
HTML / SOAP
Managed service
Microservice
REST
Serverless
Functions
GraphQL

6. History
INFRASTRUCTURE
ARCHITECTURE
API STANDARD
Hardware/VPS
Monolith
HTML / SOAP
Managed service
Microservice
REST
Serverless
Functions
GraphQL

7. Benefits
Microservice
Architecture
• Layer & component
based
• Faster development
• Decoupled
Serverless
Infrastructure
• Low/zero
maintenance
• Auto-scaling
• Pay-as-you-go
GraphQL API
⌛
@nikolasburk

8. GraphQL Introduction
…and why developers ❤ it
@nikolasburk

9. What’s GraphQL?
• New API standard by Facebook
• Query language for APIs
• Declarative way of fetching & updating data
@nikolasburk

10. 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

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

12. 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:
@nikolasburk

13. 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:
@nikolasburk

14. /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
@nikolasburk

15. 1 API endpoint
Example: Blogging App with GraphQL
@nikolasburk

16. 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
}
}
}
@nikolasburk

17. 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” },
]
}
}
} @nikolasburk

18. GraphQL Server Development
Core concepts & Best practices
@nikolasburk

19. 3 parts of a GraphQL server
1. Structure: The GraphQL schema
2. Behaviour: Resolver functions
3. Network Layer: Network, Middleware, …

20. 1) The GraphQL Schema
• Strongly typed & written in GraphQL Schema Definition
Language (SDL)
• Defines API capabilities ( = contract for client-server
communication)
• Special root types: Query, Mutation, Subscription
@nikolasburk

21. Example: Hello World
SCHEMA
@nikolasburk
SERVER RESPONSEQUERY

22. Example: CRUD for User type
@nikolasburk

23. 2) Resolver functions
• Concrete implementation of the API
• One resolver function per field in SDL schema
• Query execution: Invoke resolvers for all fields in query
@nikolasburk

24. Example: Hello World
SDL
@nikolasburk
RESOLVER

25. Example: CRUD for User type
@nikolasburk

26. 3) Network Layer
• Based on `graphql-yoga`
• Network configuration: port, endpoints, CORS, …
• Middleware (analytics, logging, crash reporting,…)
@nikolasburk

27. …putting it all together
1) SCHEMA
2) RESOLVERS
3) NETWORK LAYER

28. Demo 🔨
Building & Deploying a GraphQL server
@nikolasburk

29. Learn more 💡
https://blog.graph.cool/6da86f346e68
How to build a GraphQL Server with `graphql-yoga`
@nikolasburk
https://blog.graph.cool/522f2b75a2ac
Deploying GraphQL Servers with Apex Up

30. Lessons learned
Building & Deploying a GraphQL server
@nikolasburk

31. Lessons learned
👍 & 👎
@nikolasburk

32. Benefits and Limitations
👍
• Super fast & easy
deployment
• Awesome tools like Apex Up
• Cost effective
👎
• Can’t handle realtime
subscriptions
• Alternative: AWS Fargate
@nikolasburk

33. Thank you! 🙇
… any questions?
@nikolasburk