GraphQL Subscriptions - Speaker Deck

Slide 1

Slide 1 text

Subscribe! @_kamlesh_ @peri_nikhil

Slide 2

Slide 2 text

Kamlesh Chandnani Associate Architect - Frontend @_kamlesh_

Slide 3

Slide 3 text

Peri Nikhil Engineer, Tech Evangelist, OSS Enthusiast @peri_nikhil

Slide 4

Slide 4 text

Enough! Let’s talk about building the thing " @_kamlesh_ @peri_nikhil

Slide 5

Slide 5 text

What are Subscriptions? @_kamlesh_ @peri_nikhil

Slide 6

Slide 6 text

Subscriptions return data to the client every time an event happens on the server @_kamlesh_ @peri_nikhil

Slide 7

Slide 7 text

Subsription is a root level type like Query and Mutation const typeDefs = gql` type Subscription { postAdded: Post } type Query { posts: [Post] } type Mutation { addPost( author: String, comment: String, ): Post } type Post { author: String comment: String } ` @_kamlesh_ @peri_nikhil

Slide 8

Slide 8 text

Let's look at a typical GraphQL ﬂow! @_kamlesh_ @peri_nikhil

Slide 9

Slide 9 text

HTTP POST GraphQL Document HTTP Server (Express) GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers Courtesy: Robert Zhu

Slide 10

Slide 10 text

HTTP Server (Express) GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers HTTP POST GraphQL Document @_kamlesh_ @peri_nikhil

Slide 11

Slide 11 text

HTTP Server (Express) GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers GraphQL Document @_kamlesh_ @peri_nikhil

Slide 12

Slide 12 text

HTTP Server (Express) GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers GraphQL Document @_kamlesh_ @peri_nikhil

Slide 13

Slide 13 text

HTTP Server (Express) GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers GraphQL Document @_kamlesh_ @peri_nikhil

Slide 14

Slide 14 text

HTTP Server (Express) GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers GraphQL Response @_kamlesh_ @peri_nikhil

Slide 15

Slide 15 text

HTTP Server (Express) GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers GraphQL Response @_kamlesh_ @peri_nikhil

Slide 16

Slide 16 text

Let's see how Subscriptions ﬁt into this @_kamlesh_ @peri_nikhil

Slide 17

Slide 17 text

WS:Subscribe GraphQL Document Subscriptions Server (WS) GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers Event System @_kamlesh_ @peri_nikhil

Slide 18

Slide 18 text

Subscriptions Server (WS) WS:Subscribe GraphQL Document GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers Event System @_kamlesh_ @peri_nikhil

Slide 19

Slide 19 text

Subscriptions Server (WS) GraphQL Document GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers Event System @_kamlesh_ @peri_nikhil Event Stream

Slide 20

Slide 20 text

Subscriptions Server (WS) GraphQL Document GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers Event System EVENT @_kamlesh_ @peri_nikhil Event Stream

Slide 21

Slide 21 text

Subscriptions Server (WS) GraphQL Document GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers Event System EVENT @_kamlesh_ @peri_nikhil Event Stream

Slide 22

Slide 22 text

Subscriptions Server (WS) GraphQL Document GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers Event System EVENT @_kamlesh_ @peri_nikhil Event Stream

Slide 23

Slide 23 text

Subscriptions Server (WS) GraphQL Document GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers Event System Executable GraphQL Document @_kamlesh_ @peri_nikhil Event Stream

Slide 24

Slide 24 text

Subscriptions Server (WS) GraphQL Document GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers Event System GraphQL Executable Document @_kamlesh_ @peri_nikhil Event Stream

Slide 25

Slide 25 text

Subscriptions Server (WS) GraphQL Document GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers Event System GraphQL Executable Document @_kamlesh_ @peri_nikhil Event Stream

Slide 26

Slide 26 text

Subscriptions Server (WS) GraphQL Document GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers Event System GraphQL Response @_kamlesh_ @peri_nikhil Event Stream

Slide 27

Slide 27 text

Subscriptions Server (WS) GraphQL Document GraphQL Server PARSE GraphQL Language VALIDATE Schema EXECUTE Resolvers Event System GraphQL Response Event Stream @_kamlesh_ @peri_nikhil

Slide 28

Slide 28 text

Why can’t I just poll? @_kamlesh_ @peri_nikhil

Slide 29

Slide 29 text

Client repeatedly initiates a request without knowing if there’s any new data.  @_kamlesh_ @peri_nikhil

Slide 30

Slide 30 text

Server resources get unnecessarily consumed.  @_kamlesh_ @peri_nikhil

Slide 31

Slide 31 text

It’s not real-time, really. @_kamlesh_ @peri_nikhil

Slide 32

Slide 32 text

So, how would Subscriptions help? @_kamlesh_ @peri_nikhil

Slide 33

Slide 33 text

We can build real time apps!! @_kamlesh_ @peri_nikhil

Slide 34

Slide 34 text

You see them everywhere, everyday! @_kamlesh_ @peri_nikhil

Slide 35

Slide 35 text

Focus on the retweet count and not the tweet @_kamlesh_ @peri_nikhil

Slide 36

Slide 36 text

@_kamlesh_ @peri_nikhil

Slide 37

Slide 37 text

Subscriptions use web sockets under the hood and can be accessed using“wss”(websockets) protocol @_kamlesh_ @peri_nikhil wss://graphql.abc.com

Slide 38

Slide 38 text

What does that even mean? $ @_kamlesh_ @peri_nikhil

Slide 39

Slide 39 text

The WebSocket speciﬁcation deﬁnes an API establishing "socket" connections between a web browser and a server. @_kamlesh_ @peri_nikhil

Slide 40

Slide 40 text

In plain words: There is a persistent connection between the client and the server and either of them can send data at any point of time. @_kamlesh_ @peri_nikhil

Slide 41

Slide 41 text

HTTPS vs WSS? @_kamlesh_ @peri_nikhil

Slide 42

Slide 42 text

HTTPS vs WSS? Wrong question to ask @_kamlesh_ @peri_nikhil

Slide 43

Slide 43 text

HTTP works in the form of request- response pair, where in the client always sends a request and server responds to that request @_kamlesh_ @peri_nikhil

Slide 44

Slide 44 text

HTTP Server Client Can I have a ? request response Here you go @_kamlesh_ @peri_nikhil

Slide 45

Slide 45 text

In contrast WebSocket(“wss”) is a full duplex connection where either the server or the client can send data at any point of time. @_kamlesh_ @peri_nikhil

Slide 46

Slide 46 text

Websocket Server Client Sure Beers Whiskey Can we be friends? @_kamlesh_ @peri_nikhil

Slide 47

Slide 47 text

Quit blabbering, show us an actual demo! @_kamlesh_ @peri_nikhil

Slide 48

Slide 48 text

What’s happening behind the scenes? @_kamlesh_ @peri_nikhil

Slide 49

Slide 49 text

Client Server PubSub Impl. Event Stream Subscribe Publish Messaging System Publish Subscribe @_kamlesh_ @peri_nikhil

Slide 50

Slide 50 text

Wait! What is PubSub?  " @_kamlesh_ @peri_nikhil

Slide 51

Slide 51 text

PubSub is a form of service- service communication pattern @_kamlesh_ @peri_nikhil

Slide 52

Slide 52 text

PubSub keeps a track of who subscribed to what. @_kamlesh_ @peri_nikhil

Slide 53

Slide 53 text

In a nutshell PubSub is an orchestrator. @_kamlesh_ @peri_nikhil

Slide 54

Slide 54 text

There are multiple pubsub engine interfaces available:  •Redis •RabbitMQ •Kafka •Google PubSub •MQTT enabled broker •Postgress @_kamlesh_ @peri_nikhil

Slide 55

Slide 55 text

Won’t a client get ALL events published on the channel? @_kamlesh_ @peri_nikhil Client Server PubSub Impl. Event Stream Subscribe Publish Messaging System Publish Subscribe

Slide 56

Slide 56 text

What if there are concurrent matches? @_kamlesh_ @peri_nikhil

Slide 57

Slide 57 text

Filter to the rescue @_kamlesh_ @peri_nikhil

Slide 58

Slide 58 text

Client Server Event Stream Subscribe Filter PubSub Impl. Publish Messaging System Publish Subscribe @_kamlesh_ @peri_nikhil

Slide 59

Slide 59 text

Okay, but show us how these things work in code! @_kamlesh_ @peri_nikhil

Slide 60

Slide 60 text

Live Code?! @_kamlesh_ @peri_nikhil

Slide 61

Slide 61 text

@_kamlesh_ @peri_nikhil

Slide 62

Slide 62 text

2 steps 1. Write a subscription type on server 2. Subscribe to it from your client @_kamlesh_ @peri_nikhil

Slide 63

Slide 63 text

1. Write a subscription type on server

Slide 64

Slide 64 text

const typeDefs = gql` type Subscription { matchUpdates( matchId: ID! ): Match! } `; @_kamlesh_ @peri_nikhil

Slide 65

Slide 65 text

const resolvers = { Subscription: { matchUpdates: { subscribe: () => pubsub.asyncIterator([‘matches_updated’]), resolve: (payload, args, context) => context.getMatchById({ matchId: args.matchId }), }, }, }; @_kamlesh_ @peri_nikhil

Slide 66

Slide 66 text

The Resolver Map for a ﬁeld on the Subscription type takes an object, not a function like Query and Mutation. const resolvers = { Query: { matchesQuery: (parent, args, context) => {...} }, }; const resolvers = { Subscription: { matchUpdates: { subscribe: () => {...}, resolve: (payload, args, context) => {...} }, }, }; Function Object with “subscribe” and “resolve” ﬁelds @_kamlesh_ @peri_nikhil

Slide 67

Slide 67 text

The “subscribe” ﬁeld describes what events you’re concerned with subscribe: () => pubsub.asyncIterator([‘matches_updated’]) Client Server PubSub Impl. Event Stream Subscribe Publish Messaging System Publish Subscribe @_kamlesh_ @peri_nikhil

Slide 68

Slide 68 text

The “resolve” ﬁeld ﬁgures out what data to send to the subscribed clients resolve: (payload, args, context) => context.getMatchById({..}) Client Server Event Stream Subscribe PubSub Impl. Publish Messaging System Publish Subscribe @_kamlesh_ @peri_nikhil

Slide 69

Slide 69 text

“withFilter” allows the server to ﬁlter out events that are sent to the client based on some arguments subscribe: withFilter( () => pubsub.asyncIterator([‘matches_updated’]), (payload, args) => payload.matchesAffected.some((match) => match.id === args.matchId), ), Client Server Event Stream Subscribe Filter PubSub Impl. Publish Messaging System Publish Subscribe @_kamlesh_ @peri_nikhil

Slide 70

Slide 70 text

2. Subscribe to it from your client @_kamlesh_ @peri_nikhil

Slide 71

Slide 71 text

Every Query variable will have the “subscribeToMore” function on it @_kamlesh_ @peri_nikhil

Slide 72

Slide 72 text

Slide 73

Slide 73 text

Use the “updateQuery” function to merge the new data with the Apollo store to update the UI @_kamlesh_ @peri_nikhil

Slide 74

Slide 74 text

Slide 75

Slide 75 text

“subscribeToMore” returns a function to terminate the subscription (unsubscribe) @_kamlesh_ @peri_nikhil

Slide 76

Slide 76 text

useEffect(() => { const unsubscribeMatchUpdates = matchQuery.subscribeToMore({ document: subscriptions.MATCH_UPDATES_SUBSCRIPTION, variables: {matchId}, updateQuery: (previousResult, { subscriptionData }) => { if (!subscriptionData.data) return previousResult; return {...}; }, }); return () => unsubscribeMatchUpdates(); }, [matchId, matchQuery]); @_kamlesh_ @peri_nikhil

Slide 77

Slide 77 text

But, how do we really make a case to our managers? @_kamlesh_ @peri_nikhil manager you

Slide 78

Slide 78 text

If you want to build a module which requires real time updates, then deﬁnitely subscriptions is your way to go @_kamlesh_ @peri_nikhil

Slide 79

Slide 79 text

You can’t really use polling because it won’t be real time and you’ll waste server resources @_kamlesh_ @peri_nikhil

Slide 80

Slide 80 text

But, why should I use GraphQL Subscriptions? @_kamlesh_ @peri_nikhil

Slide 81

Slide 81 text

Coz, it is the cleaner soulution, utilising all the beneﬁts of Apollo cache and the GraphQL schemas @_kamlesh_ @peri_nikhil

Slide 82

Slide 82 text

And of course because we all ❤ GraphQL @_kamlesh_ @peri_nikhil

Slide 83

Slide 83 text

@_kamlesh_ @peri_nikhil That’s all folks! Thank You Repo Url: http://bit.ly/fun-cricket