Scribd
Upload
84 views57 pages

Real-Time GraphQL - Tech9

The document discusses building real-time applications using React and GraphQL. It provides an overview of real-time apps and their benefits for user experience. Various techniques for implementing real-time functionality are described, including polling, long-polling, and subscriptions. The document explains how GraphQL subscriptions can be used to power real-time apps, and provides an example implementation using React, Relay, and Graphcool. In conclusions, the current status of GraphQL is discussed.

Uploaded by

Gigi Florica
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
84 views57 pages

Real-Time GraphQL - Tech9

The document discusses building real-time applications using React and GraphQL. It provides an overview of real-time apps and their benefits for user experience. Various techniques for implementing real-time functionality are described, including polling, long-polling, and subscriptions. The document explains how GraphQL subscriptions can be used to power real-time apps, and provides an example implementation using React, Relay, and Graphcool. In conclusions, the current status of GraphQL is discussed.

Uploaded by

Gigi Florica
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 57

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

You might also like