SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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
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