Sample code: https://github.com/nikolasburk/graphql-chat/

1. Building a Realtime Chat with
React & GraphQL Subscriptions
💬

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

3. Launch Week 🚀
Product Hunt > 850 upvotesHacker News #1

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

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

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

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

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

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

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

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

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

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

14. Let’s play
…with GraphQL Playgrounds
▷

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

16. React Components
Chat

17. React Components
ChatMessages

18. React Components
ChatMessage

19. React Components
ChatInput

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

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

23. 20% discount code
“berlinjs”

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

25. Thank you! 🙇
… any questions?