Building a Realtime Chat with
React & GraphQL Subscriptions
💬

Nikolas Burk 👋
Developer at Graphcool
$ whoami
@nikolasburk

Launch Week 🚀
Product Hunt > 850 upvotesHacker News #1

Agenda
1. GraphQL Introduction
2. Realtime with GraphQL Subscriptions
3. DEMO
@nikolasburk

What’s GraphQL?
• new API standard
• developed & open-sourced by Facebook
• declarative way of fetching & updating data
@nikolasburk

Schema
… defines the data model
type Message {
text: String!
sentBy: Person
}
type Person {
name: String!
messages: [Message!]!
}
@nikolasburk

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

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

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

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

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

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

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

Let’s play
…with GraphQL Playgrounds
▷

Frontend
Apollo Client for …
… networking
… caching
… subscriptions
create-react-app

React Components
Chat

React Components
ChatMessages

React Components
ChatMessage

React Components
ChatInput

Community 🙌
• GraphQL Berlin Meetup
• slack.graph.cool (> 2000 members)
• GraphQL Weekly & GraphQL Radio

GraphQL-Europe
• This Sunday! (May 21)
• Tickets: www.graphql-europe.org

20% discount code
“berlinjs”

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

Thank you! 🙇
… any questions?