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.

GraphQL Subscriptions

343 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

GraphQL Subscriptions

  1. 1. Building a realtime chat with GraphQL Subscriptions @nikolasburk
  2. 2. Nikolas Burk 👋 Developer at Graphcool $ whoami @nikolasburk
  3. 3. Agenda 1. GraphQL Introduction 2. Realtime with GraphQL Subscriptions 3. Demo: Building a Realtime Chat with React & Apollo @nikolasburk
  4. 4. GraphQL Introduction @nikolasburk
  5. 5. What’s GraphQL? • new API standard by Facebook • query language for APIs • declarative way of fetching & updating data @nikolasburk
  6. 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. 7. Example: Blogging App with REST /users/<id> /users/<id>/posts /users/<id>/followers 3 API endpoints @nikolasburk
  8. 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. 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. 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. 11. 1 API endpoint Example: Blogging App with GraphQL @nikolasburk
  12. 12. Fetch everything with a single request1 HTTP POST query { User(id: “er3tg439frjw”) { name posts { title } followers(last: 3) { name } } } @nikolasburk
  13. 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. 14. Queries … only read data query MessageQuery { Message(id: “1”) { text sentBy { name } } } @nikolasburk
  15. 15. Queries … only read data query MessageQuery { Message(id: “1”) { text sentBy { name } } } Operation Type @nikolasburk
  16. 16. Queries … only read data query MessageQuery { Message(id: “1”) { text sentBy { name } } } Operation Name @nikolasburk
  17. 17. Queries … only read data query MessageQuery { Message(id: “1”) { text sentBy { name } } } Fields @nikolasburk
  18. 18. Queries … only read data query MessageQuery { Message(id: “1”) { text sentBy { name } } } Root Field @nikolasburk
  19. 19. Queries … only read data query MessageQuery { Message(id: “1”) { text sentBy { name } } } Selection Set @nikolasburk
  20. 20. Queries … only read data query MessageQuery { Message(id: “1”) { text sentBy { name } } } { “data”: { “Message”: { “text”: “Hello 😎”, “sentBy”: { “name”: “Sarah” } } } } @nikolasburk
  21. 21. Mutations … write and read data mutation CreateMessageMutation { createMessage(text:“Hi 👋”) { id } } { “data”: { “createMessage”: { “id”: “3”, } } } @nikolasburk
  22. 22. Let’s play …with GraphQL Playgrounds ▷ @nikolasburk
  23. 23. Query Variables query MessageQuery { Message(id: “1”) { text sentBy { name } } } @nikolasburk
  24. 24. Query Variables query MessageQuery($id: ID!) { Message(id: “1”) { text sentBy { name } } } @nikolasburk
  25. 25. Query Variables query MessageQuery($id: ID!) { Message(id: $id) { text sentBy { name } } } @nikolasburk
  26. 26. Query Variables mutation CreateMessageMutation { createMessage(text:“Hi 👋”) { id } } @nikolasburk
  27. 27. Query Variables mutation CreateMessageMutation($text: String!) { createMessage(text:“Hi 👋”) { id } } @nikolasburk
  28. 28. Query Variables mutation CreateMessageMutation($text: String!) { createMessage(text: $text) { id } } @nikolasburk
  29. 29. @nikolasburk
  30. 30. Realtime with GraphQL Subscriptions ⚡ @nikolasburk
  31. 31. • event-based realtime updates • clients subscribe to specific events • usually implemented with websockets GraphQL Subscriptions ⚡ @nikolasburk
  32. 32. Realtime Updates with Subscriptions subscription { Message { node { text } } }
  33. 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. 34. Building a Realtime Chat with React & Apollo 💬 @nikolasburk
  35. 35. The Stack 😎 React Apollo Client Server @nikolasburk
  36. 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. 37. Chat UI
  38. 38. React Components Chat.js
  39. 39. React Components ChatMessages.js
  40. 40. React Components ChatMessage.js
  41. 41. React Components ChatInput.js
  42. 42. Server-side Subscriptions with Graphcool @nikolasburk
  43. 43. • invoke serverless function when event occurs • input type is determined by subscription query • configured in graphcool.yml Server-side Subscriptions @nikolasburk
  44. 44. Resources 📚 • How to GraphQL - Fullstack GraphQL Tutorial • GraphQL Weekly Newsletter • GraphQL Radio Podcast @nikolasburk
  45. 45. We’re hiring! www.graph.cool/jobs @nikolasburk
  46. 46. Thank you! 🙇 … any questions? @nikolasburk

×