Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Building a Realtime Chat with React Native (Expo) & GraphQL Subscriptions

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 19 Publicité

Building a Realtime Chat with React Native (Expo) & GraphQL Subscriptions

Télécharger pour lire hors ligne

The code example for this talk can be found here: https://github.com/graphcool-examples/react-native-graphql/tree/master/subscriptions-with-expo-and-apollo-chat

The code example for this talk can be found here: https://github.com/graphcool-examples/react-native-graphql/tree/master/subscriptions-with-expo-and-apollo-chat

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à Building a Realtime Chat with React Native (Expo) & GraphQL Subscriptions (20)

Publicité

Plus récents (20)

Publicité

Building a Realtime Chat with React Native (Expo) & GraphQL Subscriptions

  1. 1. Building a Realtime Chat with React Native & GraphQL Subscriptions 💬
  2. 2. Nikolas Burk 👋 Developer at Graphcool $ whoami @nikolasburk
  3. 3. Launch Week 🚀 Product Hunt > 1000 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-native—app Expo for … … scaffolding RN app
  16. 16. Chat UI https://github.com/FaridSafi/react-native-gifted-chat
  17. 17. Community 🙌 • GraphQL Berlin Meetup • slack.graph.cool (> 2000 members) • GraphQL Weekly & GraphQL Radio
  18. 18. We’re hiring! www.graph.cool/jobs
  19. 19. Thank you! 🙇 … any questions?

×