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

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

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

3. Launch Week 🚀
Product Hunt > 1000 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-native—app
Expo for …
… scaffolding RN app

16. Chat UI
https://github.com/FaridSafi/react-native-gifted-chat

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

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

19. Thank you! 🙇
… any questions?