GraphQL Subscriptions

Building a realtime chat with
GraphQL Subscriptions
@nikolasburk

Nikolas Burk 👋
Developer at Graphcool
$ whoami
@nikolasburk

Agenda
1. GraphQL Introduction
2. Realtime with GraphQL Subscriptions
3. Demo: Building a Realtime Chat with
React & Apollo
@nikolasburk

GraphQL Introduction
@nikolasburk

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

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

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

1 Fetch user data
/users/<id>/users/<id>
/users/<id>/posts
{
“user”: {
“id”: “er3tg439frjw”
“name”: “Mary”,
“address”: { … },
“birthday”: “July 26, 1982”
}
}
HTTP GET
Mary
@nikolasburk

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

/users/<id>
/users/<id>/posts
HTTP GET
{
“followers”: [{
“id”: “leo83h2dojsu”
“name”: “John”,
“birthday”: “January 6, 1970”
},{
“id”: “die5odnvls1o”
“name”: “Alice”,
“birthday”: “May 1, 1989”
}{
“id”: “xsifr3as0vds”
“name”: “Sarah”,
“birthday”: “November 20, 1986”
}
…
]
}
Fetch followers3
Mary
Mary’s posts:
John, Alice, Sarah
Learn GraphQL Today
REST
React & GraphQL - A
clients
@nikolasburk

1 API endpoint
Example: Blogging App with GraphQL
@nikolasburk

Fetch everything with a single request1
HTTP POST
query {
User(id: “er3tg439frjw”) {
name
posts {
title
}
followers(last: 3) {
name
}
}
}
@nikolasburk

{
“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” },
]
}
}
}
Mary
Mary’s posts:
John, Alice, Sarah
Learn GraphQL Today
REST
React & GraphQL - A
clients
Fetch everything with a single request1
HTTP POST
@nikolasburk

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

Queries
… only read data
text
sentBy {
name
}
}
}
Operation Type
@nikolasburk

Queries
… only read data
text
sentBy {
name
}
}
}
Operation Name
@nikolasburk

Queries
… only read data
text
sentBy {
name
}
}
}
Fields
@nikolasburk

Queries
… only read data
text
sentBy {
name
}
}
}
Root Field
@nikolasburk

Queries
… only read data
text
sentBy {
name
}
}
}
Selection Set
@nikolasburk

Queries
… only read data
text
sentBy {
name
}
}
}
{
“data”: {
“Message”: {
“text”: “Hello 😎”,
“sentBy”: {
“name”: “Sarah”
}
}
}
}
@nikolasburk

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

Let’s play
…with GraphQL Playgrounds
▷
@nikolasburk

Query Variables
text
sentBy {
name
}
}
}
@nikolasburk

Query Variables
query MessageQuery($id: ID!) {
text
sentBy {
name
}
}
}
@nikolasburk

Query Variables
query MessageQuery($id: ID!) {
Message(id: $id) {
text
sentBy {
name
}
}
}
@nikolasburk

Query Variables
mutation CreateMessageMutation {
id
}
}
@nikolasburk

Query Variables
mutation CreateMessageMutation($text: String!) {
id
}
}
@nikolasburk

Query Variables
mutation CreateMessageMutation($text: String!) {
createMessage(text: $text) {
id
}
}
@nikolasburk

Realtime with
GraphQL Subscriptions ⚡
@nikolasburk

• event-based realtime updates
• clients subscribe to speciﬁc events
• usually implemented with websockets
GraphQL Subscriptions ⚡
@nikolasburk

Realtime Updates with Subscriptions
subscription {
Message {
node {
text
}
}
}

{
"data": {
"Message": {
"node": {
"text": "Hello"
}
}
}
}
{
"data": {
"Message": {
"node": {
"text": "Hey"
}
}
}
}
{
"data": {
"Message": {
"node": {
"text": "Greetings"
}
}
}
}
subscription {
Message {
node {
text
}
}
}
Realtime Updates with Subscriptions

Building a Realtime Chat
with React & Apollo 💬
@nikolasburk

The Stack 😎
React
Apollo
Client Server
@nikolasburk

• provide nice API for sending queries & subscriptions
• take caring of managing the cache
• most popular:
• Relay
• Apollo Client
• graphql-request
GraphQL Clients
@nikolasburk

React Components
ChatMessages.js

React Components
ChatMessage.js

Server-side Subscriptions
with Graphcool
@nikolasburk

• invoke serverless function when event occurs
• input type is determined by subscription query
• conﬁgured in graphcool.yml
Server-side Subscriptions
@nikolasburk

Resources 📚
• How to GraphQL - Fullstack GraphQL Tutorial
• GraphQL Weekly Newsletter
• GraphQL Radio Podcast
@nikolasburk

We’re hiring!
www.graph.cool/jobs
@nikolasburk

Thank you! 🙇
… any questions?
@nikolasburk

GraphQL Subscriptions

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie GraphQL Subscriptions

Ähnlich wie GraphQL Subscriptions (20)

Mehr von Nikolas Burk

Mehr von Nikolas Burk (8)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

GraphQL Subscriptions