Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building a Realtime Chat with React & GraphQL Subscriptions

515 views

Published on

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

Published in: Software
  • Be the first to comment

Building a Realtime Chat with React & GraphQL Subscriptions

  1. 1. Building a Realtime Chat with React & GraphQL Subscriptions 💬
  2. 2. Nikolas Burk 👋 Developer at Graphcool $ whoami @nikolasburk
  3. 3. Launch Week 🚀 Product Hunt > 850 upvotesHacker News #1
  4. 4. Agenda 1. GraphQL Introduction 2. Realtime with GraphQL Subscriptions 3. DEMO @nikolasburk
  5. 5. What’s GraphQL? • new API standard • developed & open-sourced by Facebook • declarative way of fetching & updating data @nikolasburk
  6. 6. Schema … defines the data model type Message { text: String! sentBy: Person } type Person { name: String! messages: [Message!]! } @nikolasburk
  7. 7. Queries … only read data Message(id: “1”) { text sentBy { name } } { “data”: { “Message”: { “text”: “Hello 😎”, “sentBy”: { “name”: “Sarah” } } } } @nikolasburk
  8. 8. Queries … only read data Message(id: “1”) { text sentBy { name } } { “data”: { “Message”: { “text”: “Hello 😎”, “sentBy”: { “name”: “Sarah” } } } } @nikolasburk
  9. 9. Queries … only read data Message(id: “1”) { text sentBy { name } } { “data”: { “Message”: { “text”: “Hello 😎”, “sentBy”: { “name”: “Sarah” } } } } @nikolasburk
  10. 10. Mutations … write and read data mutation { createMessage(text:“Greetings 👋”) { id } } { “data”: { “createMessage”: { “id”: “3”, } } } @nikolasburk
  11. 11. Mutations … write and read data mutation { createMessage(text:“Greetings 👋”) { id } } { “data”: { “createMessage”: { “id”: “3”, } } } @nikolasburk
  12. 12. Mutations … write and read data mutation { createMessage(text:“Greetings 👋”) { id } } { “data”: { “createMessage”: { “id”: “3”, } } } @nikolasburk
  13. 13. GraphQL Subscriptions ⚡ • event-based realtime updates • clients subscribe to specific events • usually implemented with websockets @nikolasburk
  14. 14. Let’s play …with GraphQL Playgrounds ▷
  15. 15. Frontend Apollo Client for … … networking … caching … subscriptions create-react-app
  16. 16. React Components Chat
  17. 17. React Components ChatMessages
  18. 18. React Components ChatMessage
  19. 19. React Components ChatInput
  20. 20. Community 🙌 • GraphQL Berlin Meetup • slack.graph.cool (> 2000 members) • GraphQL Weekly & GraphQL Radio
  21. 21. GraphQL-Europe • This Sunday! (May 21) • Tickets: www.graphql-europe.org
  22. 22. 20% discount code “berlinjs”
  23. 23. We’re hiring! www.graph.cool/jobs
  24. 24. Thank you! 🙇 … any questions?

×