REAL-TIME
GRAPHQL
Building real-time apps using React and
GraphQL
Lucian Costin Ailenei
Tech9 Meet-up @ FabLab Iasi, 27 nov 2017
CONTENTS
01 Real-time apps overview
02 Available state-of-the-art techniques; Where does GraphQL fit in?
03 How we can use GraphQL subscriptions to power real-time apps
2
CONTENTS
04 Conclusions
05 Short Recap
06 Disclaimer & References
Q&A Session
3
01
REAL-TIME WEB
APPS OVERVIEW
What are them ? Why do we need them ? What
are the benefits from the UX point of view ?
4
WHAT ARE REAL-TIME APPS ?
- Web/Native/Desktop Applications which enable the user to
receive information as soon as it is published by the server
- It is not necessary to periodically check the server for updates
5 Real-time GraphQL
WHAT ABOUT UX ?
- Instant interaction
- Sense of presence, connection, transparency
- More engagement
- User feels the moment, the event, the people, the world
6 Real-time GraphQL
LET’S SEE SOME EXAMPLES
7 Real-time GraphQL
8 Real-time GraphQL
9 Real-time GraphQL
10 Real-time GraphQL
11 Real-time GraphQL
12 Real-time GraphQL
13 Real-time GraphQL
02
AVAILABLE
STATE-OF-THE-ART
TECHNIQUES
Which technologies ease the implementation ?
What are the available techniques and APIs ?
14 Where does GraphQL fit in ?
RELATED TECHNOLOGIES
15 Real-time GraphQL
IMPLEMENTATION TECHNIQUES
PULL PUSH
• POLLING • LIVEQUERIES
• LONG-POLLING • SUBSCRIPTIONS
16 Real-time GraphQL
POLLING
SERVER
1 2 3 4 5 6 7
CLIENT
1 3 5 6 6
POLLING
SERVER
1 2 3
CLIENT
1 2 3
19 Real-time GraphQL
LONG-POLLING
SERVER
1 2
CLIENT
1 2
LIVE QUERIES
SERVER
1 2 3 4 5 6 7 8 9
CLIENT
1 2 3 4 5 6 7 8 9
SUBSCRIPTIONS
SERVER
1 2 3 4 5 6 7 8 9
CLIENT
1 2 4 8 9
WHAT DO WE ACTUALLY SEND TO THE CLIENT ?
{ {
resourceUrl: https://my-api.beer/9 vs id: “9”,
} title: “Brewmeister Snake Venom”,
“description”: “Brain damage”,
grades: “67.5”,
palletId: “123-24-505”,
...
}
- An additional request is required in order - Most probably, additional data that the
to retrieve the necessary data about the client doesn’t need will be sent
resource
WHAT DO WE ACTUALLY SEND TO THE CLIENT ?
{
newNotifications: 18
}
- Sent data varies between clients / subscribers
25 Real-time GraphQL
03
POWERING
REAL-TIME APPS
USING GRAPHQL
What’s GraphQL ? - General overview of
GraphQL features
GraphQL Subscriptions – Implementation
26 examples
HEARING ABOUT A NEW
TECHNOLOGY:
THE THREE STAGES
27 Real-time GraphQL
1. DISMISSAL
“ One more JavaScript library ? I’m already using jQuery ! “
2. INTEREST
“ Hmm.... Maybe I should check this new library I keep hearing about !? “
3. PANIC
“ Omg! I need to learn this library right now or I’ll be completely obsolete ! ”
WHAT IS GRAPHQL ?
- Declarative data query language for APIs
- Provides a common interface between the CLIENT and the
SERVER for fetching and maniputaling data
- Client-specified queries
- It is not tied to any specific database or storage engine
“WISH-DRIVEN-DESIGN”
{
“emails”: [{
“from”:
[email protected],
“subject”: “Meet-up” ,
“isRead”: “false
}]
}
“WISH-DRIVEN-DESIGN”
{
emails: {
from
subject
isRead
}
}
GRAPHQL QUERY
query {
emails: {
from
subject
isRead
}
}
WHAT THE CLIENT RECEIVES ?
{
“emails”: [{
“from”:
[email protected],
“subject”: “Meet-up” ,
“isRead”: “false
}]
}
- The exact form of data that the client has asked for: NO MORE, NO LESS
GRAPHQL MUTATION
mutation {
createPerson(name: “Levi”, age: 9) {
id
}
}
GRAPHQL MAIN CONCEPTS
- Schema, Type, Field, Directives + Enum, Interfaces,
Fragments, etc...
- Query, Mutation, Subscription
GRAPHQL SUBSCRIPTION
subscription {
importantEmail: {
from
subject
isRead
}
}
39 Real-time GraphQL
SIMPLE APPLICATION EXAMPLE
- A collection of links of interest added by users related to
tech articles
- Users can vote on links
- Number of votes are updated in real-time
- Technology Stack: GraphQL, React, Facebook Relay (Client),
Graphcool Platform (Server)
very SHORT DEMO
41 Real-time GraphQL
QUERYING THE SERVER FOR THE LINK LIST
QUERYING THE SERVER FOR THE LINK LIST
QUERYING THE SERVER FOR THE LINK LIST
ADDING A NEW LINK
VOTING ON LINK
SUBSCRIBING FOR VOTES
04
CONCLUSIONS
What’s the status at this point ?
48
WHAT’S THE STATUS AT THIS POINT ?
- GraphQL is 5 years old
- Feb 2012, originally idea called “SuperGraph” introduced
by Nick Schrock, adapted as an implementation for mobile
app newsfeed API at Facebook
- Nowadays, many different programming languages support
GraphQL: C#/.NET, Clojure, Elixir, Erlang, Go, Ruby, Java,
JavaScript, PHP, Python, Scala, Ruby
50 Real-time GraphQL
05
SHORT RECAP
51
SHORT RECAP
- Real-time apps overview: UX benefits
- Available State-of-the-Art techniques
- Where does GraphQL fit in
- Demo: Implementation example using React, Relay, Graphcool
- Conclusions
06
DISCLAIMER &
REFFERENCES
53
DISCLAIMER & REFERENCES
- Realtime React Apps with GraphQL by Robert Zhu
https://www.youtube.com/watch?v=AYbVMNtO-ro
- Lessons from 4 Years of GraphQL by Lee Byron
https://www.youtube.com/watch?v=zVNrqo9XGOs
- How to GraphQL – The Fullstack Tutorial for GraphQL
https://www.howtographql.com/
- Demo Source Code
https://github.com/luciancostinailenei/graphql-playground/tree/master/realtime-graphql-react-relay
github.com/luciancostinailenei
? QUESTIONS
56
THANK YOU
