Demo code including setup instructions: https://github.com/nikolasburk/graphql-chat

1. Building a realtime chat with
GraphQL Subscriptions
@nikolasburk

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

3. Agenda
1. GraphQL Introduction
2. Realtime with GraphQL Subscriptions
3. Demo: Building a Realtime Chat with
React & Apollo
@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
@nikolasburk

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
Last three followers:
@nikolasburk

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
@nikolasburk

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”
}
…
]
}
Fetch followers3
Mary
Mary’s posts:
Last three followers:
John, Alice, Sarah
Learn GraphQL Today
Why GraphQL is better than
REST
React & GraphQL - A
declarative love story
Relay vs Apollo - GraphQL
clients
@nikolasburk

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

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

13. {
“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:
Last three followers:
John, Alice, Sarah
Learn GraphQL Today
Why GraphQL is better than
REST
React & GraphQL - A
declarative love story
Relay vs Apollo - GraphQL
clients
Fetch everything with a single request1
HTTP POST
@nikolasburk

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

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

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

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

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

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

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

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

22. Let’s play
…with GraphQL Playgrounds
▷
@nikolasburk

23. Query Variables
query MessageQuery {
Message(id: “1”) {
text
sentBy {
name
}
}
}
@nikolasburk

24. Query Variables
query MessageQuery($id: ID!) {
Message(id: “1”) {
text
sentBy {
name
}
}
}
@nikolasburk

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

26. Query Variables
mutation CreateMessageMutation {
createMessage(text:“Hi 👋”) {
id
}
}
@nikolasburk

27. Query Variables
mutation CreateMessageMutation($text: String!) {
createMessage(text:“Hi 👋”) {
id
}
}
@nikolasburk

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

29. @nikolasburk

30. Realtime with
GraphQL Subscriptions ⚡
@nikolasburk

31. • event-based realtime updates
• clients subscribe to specific events
• usually implemented with websockets
GraphQL Subscriptions ⚡
@nikolasburk

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

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

34. Building a Realtime Chat
with React & Apollo 💬
@nikolasburk

35. The Stack 😎
React
Apollo
Client Server
@nikolasburk

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

37. Chat UI

38. React Components
Chat.js

39. React Components
ChatMessages.js

40. React Components
ChatMessage.js

41. React Components
ChatInput.js

42. Server-side Subscriptions
with Graphcool
@nikolasburk

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

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

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

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