Cancellable Requests, React Hooks, and RxJS

In this talk which I gave to the Insiten developers, I talk about cancellable requests using the fetch API, using RxJS with React hooks, and some patterns you can employ in those contexts.

Transcript

The following transcript was automatically generated by an algorithm.

00:01 : i i'm actually gonna try to cover
00:03 : a lot of stuff so uh
00:06 : let's see how much i get through so uh
00:11 : one one of those two i would say two of
00:14 : the biggest things
00:15 : i want to cover this time is uh rxjs
00:19 : rxjs plus react hooks
00:23 : um like how do you wire that up
00:27 : and uh what are some sensible ways
00:30 : of connecting these two technologies
00:34 : and then another main topic is going to
00:37 : be cancelable requests
00:42 : um
00:44 : so those are what i'm gonna just start
00:46 : with a very small
00:48 : example for uh rxjs
00:51 : um i think that is
00:56 : oh this is so that's this example
00:59 : where there's a counter you can count
01:02 : the thing
01:03 : up and down and this is a very basic
01:06 : example you see
01:08 : with react hooks but i'm doing it with a
01:12 : behavior subject i believe
01:16 : so let me open that up
01:26 : okay so this is what the code looks like
01:29 : for this example um so
01:32 : i have this i have this behavior subject
01:36 : created here um
01:39 : on the sort of top level scope on the
01:41 : global scope sort of
01:43 : and then uh
01:46 : we are creating we're using a use date
01:49 : to temporarily
01:51 : sort of cache the current result
01:55 : from the behavior subject and this is
01:58 : just a way to
01:59 : put it into the react hooks so
02:02 : repository of
02:03 : objects or of values and then
02:07 : using this use effect hook we subscribe
02:10 : to this
02:11 : uh behavior subject and then we make
02:14 : sure
02:14 : it's cleaned up here using by returning
02:17 : this cleanup function
02:18 : okay and as the dependency we're saying
02:21 : we're
02:22 : dependent on this
02:25 : count which isn't super important right
02:27 : now because it never changes
02:29 : but um if we're gonna use uh make this
02:32 : into a reusable hook
02:34 : then the dependency array will matter
02:37 : um so um
02:41 : so how would we make some
02:44 : uh oh and when we when we want to change
02:47 : a value
02:50 : in in this behavior subject we just
02:52 : called dot next
02:54 : like you normally would with rxjs
02:58 : um yeah toby i have a question
03:02 : so are you using
03:06 : i'm looking at your code you're using
03:07 : set value only in
03:10 : the used effect hook
03:13 : you're not using it in a button click oh
03:17 : uh correct correct um
03:21 : yeah uh should i use set value here no
03:24 : uh because i actually want the value to
03:27 : go through the behavior subject
03:30 : um and why is that
03:34 : desirable because this behavior subject
03:37 : might be used
03:39 : might be watched by other
03:42 : parts of the application conceptually
03:45 : like this might be
03:46 : passed into another component that's
03:49 : also watching it
03:50 : so if i if i channel the results
03:54 : the values through this behavior subject
03:56 : and all the places that watch
03:58 : this guy will get updated
04:03 : right whereas this value this use state
04:07 : value is just a temporary cache
04:09 : for the current value of this behavior
04:12 : subject
04:12 : for the purpose of only this component
04:16 : and and so so that this changing of
04:20 : the value is
04:23 : is it can can notify react to to
04:26 : re-render
04:29 : right and to be clear because i'm just
04:30 : not as familiar with react
04:32 : this use effect is only going to run
04:33 : once right because of the second
04:35 : argument
04:36 : you're passing online um
04:40 : it will only run once if this array is
04:44 : empty um if
04:47 : if this dependencies array has a value
04:50 : then it will rerun this effect
04:54 : when this value changed since the last
04:57 : time
04:59 : and in this example that will not happen
05:02 : because we're not change this is a const
05:04 : it can never change
05:06 : however um if we're gonna extract
05:10 : this logic here into a reusable hook
05:13 : let's just go ahead and do that now i
05:14 : was planning to do that anyway
05:20 : uh we're gonna so i'm gonna make a
05:22 : reusable hook called use observable
05:24 : we're going to pass in an
05:26 : observable
05:32 : i'll just do any for now i'm going to
05:34 : try to go
05:35 : quick so i'm not going to batter with
05:38 : writing the types out correctly
05:41 : um and so i paste this in
05:44 : and i'm gonna swap this guy in here
05:49 : as the dependency and this guy
05:54 : should be parameterized
05:57 : uh oh i'm using this value i'm actually
06:01 : gonna
06:01 : make this behavior subject for now maybe
06:04 : i call this
06:05 : use behaviors subject
06:09 : okay for now it's use behavior subject
06:12 : so if i
06:13 : ever wrap this guy up then i can
06:16 : you know use it oh no now want to return
06:20 : just the value i think
06:29 : so the user of this uh this
06:33 : hook can just write this and that's
06:36 : pretty convenient
06:37 : uh it doesn't like this oh
06:40 : yes i did mean that
06:45 : so so this is pretty convenient um
06:50 : and yeah so this does the same thing and
06:53 : we have a reusable hook for
06:55 : behavior subjects what about if we want
06:58 : to generalize to
07:00 : a an observable
07:04 : um i i just didn't bother with the
07:08 : initial value
07:09 : and said initially it's null so this
07:13 : this is a real reusable hook i have in
07:15 : this repository
07:18 : by the way this repository is on my
07:20 : github
07:23 : so if it's called
07:26 : react hooks examples
07:29 : so you're welcome to i just push
07:32 : my new example code in here so
07:36 : you can go grab it and spin it up and
07:39 : play with it
07:40 : there is a there is a rest server that's
07:44 : bundled with this
07:46 : yeah you can you can read the
07:48 : instructions and
07:49 : if you want to play with it um
07:53 : so yeah so so i made a reusable use
07:57 : observable hook that's like this if you
07:59 : do want to
08:00 : like if it's a synchronous observable
08:03 : and you want to grab
08:05 : the initial value from out of it
08:09 : there's a way to do that uh ilia and i
08:12 : did some work
08:13 : on that so you can just subscribe
08:16 : to the observable once in the event that
08:19 : you can get the value
08:20 : synchronously and and then stick it here
08:23 : i'm not gonna bother with that here
08:25 : because
08:26 : i want to get through some other
08:28 : material here
08:29 : so this is a very simple way
08:32 : basically to connect with a
08:35 : connect basically the react hooks system
08:38 : with the rxjs system
08:40 : uh one important thing to note is is the
08:44 : cleanup process uh
08:48 : oh i i also put some code to
08:51 : detect for nose so i allow the incoming
08:54 : observable to be null
08:56 : and in the case it's no i don't actually
09:00 : blow up i just uh i just
09:03 : don't do anything um and that's designed
09:07 : so that
09:08 : it's possible that if if you want to
09:10 : just cancel the previous
09:12 : observable you can pass in a null this
09:15 : time
09:16 : and because the react host system
09:19 : remembers the cleanup function from last
09:22 : time
09:23 : it'll clean up the last observable that
09:25 : was observed
09:27 : in the event that you pass in either a
09:30 : different observable this time or a null
09:32 : value
09:35 : not sure if that's really needed but i
09:37 : put it in there
09:38 : for some reason um okay so that that's
09:42 : that's observables that that's sort of
09:44 : like the
09:45 : basics the most simple way to connect up
09:48 : uh
09:48 : observables with the react system uh
09:51 : any questions about that uh because next
09:54 : i'm gonna talk about
09:56 : the uh aborting reporting fetch requests
10:00 : using the fetch api with that
10:04 : conditional logic you put where you
10:06 : could pass null
10:08 : is it so is that like uh
10:12 : can you just quickly give like an
10:14 : example of what that would be
10:15 : okay okay so let's say
10:19 : [Music]
10:22 : so first let's say that you have two
10:24 : counters
10:26 : for some reason one that starts
10:29 : from one and one star and you might
10:32 : wanna
10:33 : like maybe there's like a toggle button
10:34 : or something they wanna toggle between
10:37 : the two observables
10:39 : um
10:44 : i wanna go fast so i might not build the
10:47 : whole thing out
10:48 : but but let's say you you you click the
10:50 : toggle button
10:51 : and then and then you're like
10:55 : if something then
11:00 : then our i want to basically switch the
11:12 : observable
11:18 : like basically when when you when you
11:20 : toggle this button it's going to switch
11:22 : the observable
11:23 : to one or the other and and so this
11:26 : will not stay the same right
11:30 : and the the cleanup logic
11:33 : is is set up
11:36 : such that if if the first time
11:39 : you pass in this one
11:42 : that that also registers the cleanup
11:45 : function
11:47 : for the first one and then if you toggle
11:50 : and then the second time you render you
11:53 : pass in a different observable that's
11:56 : going to
11:56 : clean up the cleanup call the cleanup
11:59 : logic
12:00 : for the first observable so that the
12:02 : first observable gets unsubscribed
12:05 : does that make sense so whatever you
12:07 : return from the use effects hook is
12:10 : like what react knows to use as the uh
12:14 : like what to call when
12:17 : it changes what to call when it needs to
12:20 : be cleaned up and
12:21 : it and when it when it changes yeah when
12:25 : this
12:26 : changes it'll call this effect again
12:29 : and whenever it caused the same effect
12:32 : again
12:33 : it makes sure to clean up the previous
12:36 : run
12:36 : of that same effect
12:39 : okay which is whatever was returned last
12:42 : time exactly
12:44 : okay and that's that's a very important
12:46 : thing about the life cycle
12:48 : of hooks so so with um
12:52 : or um with with my idea of passing in
12:56 : a null value for the observable would be
12:59 : like
13:00 : you know else maybe you have some
13:03 : condition where
13:06 : you just want to pass in a null value
13:08 : and you want to cancel
13:11 : all of the observables that you might
13:14 : have subscribed so you just pass in a
13:16 : null value
13:16 : and if that's the case uh it will also
13:20 : have the effect
13:21 : of canceling or cleaning up the last one
13:26 : that does yeah and then no it won't
13:28 : establish a new one
13:30 : yes please okay okay
13:33 : so now i want to talk about uh
13:35 : cancelable requests
13:36 : so a cancelable request i i learned this
13:40 : from um wait no
13:44 : not yet uh let's talk about this uh
13:48 : this abort controller mechanism that
13:52 : you can use uh with the fetch request
13:55 : and i learned this
13:56 : from this dave david wash blog post
14:02 : but essentially when when you use the
14:05 : fetch api you have the option
14:09 : of enabling a board controller and you
14:13 : wire it up
14:14 : like this you first new up an instance
14:17 : of an abort controller you could just do
14:20 : it
14:21 : it doesn't require any special parameter
14:24 : or something you just new it up
14:26 : and then you you wire it up into the
14:28 : fetch options
14:30 : that are passed as the second argument
14:33 : of the fetch api and if you had
14:37 : and and then you do your normal way of
14:39 : using fetch you can await it if you're
14:41 : using async away
14:43 : and then you maybe you await the json
14:46 : parser etc but what this allows you to
14:50 : do
14:51 : once you've wired this up is you can
14:54 : at any point in time you can call
14:57 : abort controller dot abort that's gonna
15:01 : abort
15:02 : this request while it's in mid-flight
15:05 : um assuming is still in mid-flight at
15:09 : the time you called abort
15:11 : okay and that will actually cause the
15:14 : underlying
15:15 : request in the browser to cancel itself
15:19 : and and the status of that actual
15:22 : request will be cancelled
15:24 : and this is i think this is slightly
15:27 : better
15:28 : than um than just ignoring
15:31 : the response when it comes back because
15:33 : you can certainly do that
15:35 : um is it slightly better because well in
15:40 : the event
15:41 : that you the the data hasn't
15:45 : come back yet you can actually abort it
15:48 : and cause
15:49 : the data not be sent at all saving some
15:52 : network bandwidth right you can
15:54 : sort of like well there might be a lot
15:56 : of data coming through
15:57 : that the pipe maybe there's a lot of
16:00 : to-dos or something i don't know
16:02 : and and then that doesn't need to be
16:04 : sent now because you aborted it and
16:06 : you're telling the network
16:12 : protocol at that level to stop the
16:14 : transaction
16:16 : so um that's pretty nice uh
16:19 : with rxjs if you're using angular and
16:22 : you're using
16:23 : it the http client it uh
16:27 : it actually has that cancellation
16:29 : capability built in
16:31 : to their rxjs way of making requests
16:36 : which is if you start subscribing
16:40 : to a code observable
16:43 : coming from their http client api
16:46 : and then you unsubscribe it
16:49 : the moment the last subscriber well
16:53 : in this case every sub every new
16:55 : subscription
16:56 : calls a new request i think so it's not
16:59 : the last subscriber
17:00 : but if you unsubscribe it that's the
17:03 : moment it'll actually cancel the request
17:08 : and we're actually going to do that a
17:10 : little bit later so anyway
17:11 : so there is is this capability of
17:15 : canceling requests and it's pretty nice
17:18 : and
17:19 : i want to make use of this right we want
17:22 : to
17:23 : use this in our application
17:27 : but this api is slightly awkward so i
17:30 : decided
17:31 : we should make a cancelable request
17:34 : object that has this cancel method on it
17:38 : so this is what that is it's a very
17:40 : small class
17:42 : we we just make an abort controller
17:45 : first thing and then you
17:49 : basically you use it like this uh you
17:53 : there's a little bit of example code
17:56 : here you use it like this
17:57 : you say new cancelable requests
18:01 : and and it gets the same parameters
18:04 : that you might give to a fetch request
18:08 : you you probably stick it into a class
18:12 : variable or some other kinds of variable
18:14 : it doesn't matter
18:15 : and then you say request
18:19 : dot fetch and that's when it actually
18:21 : starts calling the fetch api
18:25 : but this request object also has a
18:28 : cancel method
18:29 : so so maybe there's something else
18:31 : that's happening in the ui
18:33 : that warrants this request be cancelled
18:36 : and to do that you you just do this
18:39 : request.cancel
18:40 : so so that that's that's the job of this
18:44 : request object it just makes it
18:47 : easier for you to cancel a request
18:51 : and then we're going to be using this in
18:54 : as part of the wiring of of hooking it
18:57 : into
18:58 : the react system and the rxgs system any
19:01 : questions about this one
19:03 : yeah i'm kind of confused about what the
19:06 : init
19:07 : uh property is doing oh yeah oh yeah
19:10 : okay
19:11 : um this
19:14 : internet yeah maybe the name isn't great
19:17 : maybe i should call it
19:18 : like this
19:22 : dot in oh i defined that here
19:25 : request maybe i should call this
19:29 : fetch options maybe that's a better name
19:33 : for this
19:35 : so it's it's the set of options that
19:39 : the fetch api accepts um
19:45 : and uh yeah it and
19:48 : and this requests request in net type
19:52 : is coming from
19:56 : coming from the uh like this is part of
19:59 : the fetch api
20:00 : it's it's part of the standard it's been
20:04 : fetched is a standardized thing into the
20:06 : browser
20:07 : so this is just telling you what
20:10 : parameters
20:11 : can you give to fetch these are all the
20:14 : options you can give
20:15 : and the one we're using is the abort
20:17 : signal
20:20 : so we're just basically we're
20:22 : automatically
20:24 : inserting our abort signal
20:27 : uh and then we're passing it into fetch
20:33 : what's the matter here
20:36 : okay does that answer your question
20:40 : yeah okay so yeah so so now that we have
20:44 : a little
20:44 : bit more convenient way to cancel
20:48 : requests we're gonna try to wire it up
20:50 : so i i
20:51 : oh one thing i want to mention is i
20:53 : actually tried several ways of doing
20:55 : this uh
20:56 : i i had a session with mike a couple of
20:59 : weeks ago we went through
21:02 : an exercise of wiring it up a couple of
21:05 : different ways
21:06 : uh before this talk i tried a few more
21:09 : ways
21:10 : um i'm not gonna show all the
21:13 : different that i showed
21:17 : i'm gonna show the ones i like better
21:20 : but if you want to you can check out
21:22 : this repository and
21:23 : look at all the versions that i've gone
21:25 : through
21:27 : um so uh this is
21:30 : one version that i uh
21:34 : let's see actually
21:40 : actually let me let me show this version
21:42 : first okay
21:44 : so first of all let me show you when you
21:47 : run
21:47 : this example and
21:50 : in this case it's this one
21:55 : ouch did i just break stuff
22:00 : uh i thought i saved this
22:05 : well this stuff doesn't work so
22:37 : um come on
22:42 : okay all right i think this works again
22:45 : okay so first of all uh
22:48 : the thing i want to show is that if you
22:52 : switch this to this example component
22:55 : that i built and then switch off of it
22:57 : immediately
23:00 : um let's see
23:04 : i'll just show you like so it's making
23:06 : this request which
23:08 : is going to take two seconds because i
23:10 : configure the back end to
23:12 : like have the request delay by two
23:14 : seconds
23:15 : so it takes two seconds to come back
23:18 : we're gonna do it again and this time
23:20 : i'm gonna switch away
23:23 : before the two seconds is up you can see
23:26 : the status of the request is cancelled
23:29 : so it actually told the browser to
23:31 : cancel this request
23:34 : and uh now i'm gonna
23:38 : and then well and then if you click on
23:40 : try again
23:41 : it'll make another request and then this
23:44 : this request will also be canceled if
23:46 : you happen to switch away
23:48 : before it completes so let's look at
23:51 : this code here
23:53 : so if it weren't cancelable would it
23:55 : have stayed in the
23:57 : network panel as pending uh if it were
24:00 : not
24:01 : cancelable you would just end up waiting
24:04 : until
24:04 : it completes successfully
24:08 : or if you weren't canceling it i should
24:12 : say
24:14 : yeah you just end up with okay but then
24:16 : when it actually comes back
24:18 : you actually need to build a mechanism
24:20 : to ignore the
24:22 : the retrieved uh request and the the
24:25 : response i should say
24:27 : uh you just need to ignore it and
24:31 : because you your ui is gone now
24:37 : um and okay so
24:40 : so this is an example of how you would
24:42 : wire this up
24:44 : uh from scratch so
24:47 : um this url
24:51 : um i'm using it to
24:55 : instantiate a new cancelable request i'm
24:58 : gonna use
24:59 : use date to i'm just saying this request
25:02 : is a state
25:04 : uh i i found we could have used a ref
25:07 : for this but i actually prefer using
25:10 : state for
25:11 : for this kind of thing because i find
25:12 : the ref
25:14 : api very clumsy
25:17 : uh there's not a convenient way to
25:20 : instantiate things so i
25:22 : usually for things like this that don't
25:23 : really change
25:25 : i just instantiate once i use use date
25:28 : anyway
25:29 : with a lazy initializer so so i create a
25:32 : re
25:33 : cancelable request and then using
25:36 : a use effect i'm gonna start the fetch
25:40 : process and then when when the data
25:44 : completed
25:45 : i'm going to call this set data from
25:48 : this use date
25:49 : to to set the data so that this data can
25:52 : be used to render the ui
25:55 : if there's a if there's an exception
25:59 : um i here i'm checking for
26:04 : the abort event
26:07 : because when if this cancel
26:10 : is called which would happen if
26:14 : this use effect hook uh
26:17 : ended up cleaning up uh its
26:21 : its pending request um this
26:24 : cancel gets called it actually causes
26:27 : this
26:28 : this waiting uh request to error out
26:33 : and we'll end up with an error so this
26:36 : is testing
26:37 : if it was the actual abort
26:41 : error that was generated by this
26:43 : cancellation
26:44 : if and if it was we're just going to
26:47 : ignore it
26:48 : but if it's a different type of error
26:50 : then that's not the abort
26:52 : action so we're gonna still throw that
26:55 : so that developers know about that can
26:57 : you draw under the cancel method again
26:59 : the requests.cancel
27:01 : can you oh you wanna see this
27:04 : oh okay it's simple yep
27:08 : and where did that um that message your
27:11 : matching
27:12 : come from user reported a request is
27:15 : that like part of the
27:16 : standard abort controller api i'm gonna
27:19 : i'm gonna delete this code and i'll show
27:21 : you what
27:22 : would happen if i didn't have this
27:26 : let me see
27:29 : i want to make sure i'm using the right
27:32 : one though
27:39 : there's a version a and a version b
27:45 : so this is version b
27:54 : okay let me try this
28:01 : okay i'm gonna wait for it to compile
28:04 : okay
28:04 : so i'm gonna try version a so if i
28:08 : if i uh let me see
28:12 : i'm gonna look at the network panel
28:16 : i'm gonna go here and then i'm gonna
28:18 : switch away from it
28:20 : so it's cancelled you can see this
28:23 : cancellation
28:24 : and what happens also when that happens
28:27 : is you get this uncaught exception
28:31 : um in your in your
28:35 : js console which is fine for the user
28:37 : they don't see it but developers see
28:39 : this
28:40 : and uh and i don't want this to show up
28:43 : for the developers
28:44 : obviously because this is expected
28:46 : behavior
28:47 : so so basically what happens is if
28:51 : if you're waiting on this fetch
28:54 : um which is in reality over
28:58 : here so like you're awaiting this fetch
29:00 : api to come back
29:02 : with a response and while
29:06 : you're waiting for it you get this abort
29:09 : then what actually happens is this
29:12 : line will throw an error
29:15 : which is going to skip the rest of all
29:17 : of this code
29:19 : it also includes
29:22 : well here we're not we don't have
29:25 : anything else
29:26 : but it'll it'll cause this uh
29:30 : promise to fail with an error
29:33 : and uh if if it's an uncaught promise
29:36 : you'll end up with
29:37 : like this big exception that says you
29:40 : have an uncaught exception
29:42 : um so to prevent that from happening i
29:45 : catch it
29:46 : and and but but i want to make sure the
29:48 : one that i catch
29:49 : is this a board request if it happens to
29:52 : be a
29:53 : different error i don't want to ignore
29:55 : that because that could actually be a
29:57 : programming
29:58 : program or mistake and we want them to
29:59 : know about that
30:02 : okay um
30:06 : okay so um i i actually experimented
30:09 : with
30:10 : different ways of extracted
30:13 : extracting this logic into a reusable
30:16 : hook
30:17 : um one way that i liked
30:20 : was this where
30:24 : we have a reusable hook that's called
30:26 : use request
30:28 : and then you pass a url
30:31 : maybe along with other parameters that
30:34 : fetch
30:35 : accepts as well and then you also pass a
30:38 : set data callback
30:40 : into this hook and the contract
30:44 : is whenever the request comes back
30:47 : with the data it'll call it'll call your
30:51 : set data callback and then it also gives
30:54 : you
30:54 : ability to retry so it returns a retry
30:58 : function
30:59 : and if you want to retry you just call
31:01 : the returned retry function
31:04 : so i felt like this is kind of a nice
31:07 : way
31:07 : to um but but you still
31:10 : you still um
31:14 : use your own use date to to collect the
31:17 : data
31:18 : um so i'll show you the internal of this
31:21 : so
31:23 : so this guy um
31:26 : this guy inside the use effect actually
31:29 : i
31:30 : i changed it to instead like the
31:32 : previous version
31:34 : i had a state that remembers the
31:37 : cancelable request
31:39 : but this one i just knew up a new one
31:42 : inside the effect
31:44 : because the cleanup will be done by this
31:46 : cleanup function anyway
31:48 : so there's actually no need to put it in
31:51 : a state
31:52 : so a new up a cancelable request fetch
31:56 : it
31:57 : wire up the uh ignore the error if it's
32:00 : a
32:00 : a board error and then and then the
32:04 : setter is passed in so when the data
32:06 : completes
32:08 : i just call the passed in setter and you
32:10 : can define what that does for you
32:13 : and then i have this tri number that
32:15 : kicks off
32:16 : if you want to retry you just
32:19 : in increment the tri number and i i
32:23 : stole this trick from the react hooks
32:28 : faq that uses this reducer to just
32:31 : keep incrementing a number so you can
32:33 : just call this
32:34 : increment tri-number function to
32:37 : to increment this number and this number
32:40 : goes into
32:42 : the dependency of this use effect so
32:44 : that every time this
32:46 : number is incremented this use effect
32:48 : hook is
32:49 : uh executed again
32:53 : uh yep so so so this is
32:57 : one way you can you can sort of
33:01 : uh extract a reusable
33:05 : hook for this purpose
33:08 : um yeah
33:11 : i think that's good uh we also
33:13 : experimented
33:14 : with a more
33:18 : uh more rxjs
33:22 : centric way of doing things so let me
33:24 : show you that now
33:26 : um
33:32 : okay so first of all um
33:36 : let me see okay first of all we
33:39 : we realized that in order to
33:43 : do it the rxjs way
33:46 : we're gonna have to uh hand roll
33:50 : our own code observable object
33:53 : which is done this way it used to be
33:55 : that this was
33:56 : called observable.create
34:01 : you might have seen like some tutorials
34:04 : i might have done a talk about
34:06 : this before also it used to be if you
34:08 : want to hand
34:09 : roll your own observable you use
34:12 : observable create
34:13 : i found that they deprecated this
34:16 : and create is deprecated so the new way
34:19 : of doing it
34:20 : now is just new observable but you get
34:23 : to pass in the exact same
34:26 : uh parameters
34:31 : so so basically what you do it's
34:33 : actually remarkable
34:35 : how similar this process is
34:39 : to making a used effect hook
34:42 : if you think about it so let me put them
34:45 : side by side actually
34:48 : um
34:55 : maybe uh we do the use
35:02 : yeah compare it to this hook
35:06 : here to the make shared requests
35:10 : uh so the make shared request
35:14 : is let me just talk about this for a
35:16 : moment
35:17 : before i compare so the make sure
35:19 : request is a function
35:21 : it's not a hook it's not a it doesn't
35:23 : start with the word use
35:25 : so it's not a react hook but it is a
35:28 : function
35:29 : that returns a an observable
35:33 : er which is
35:36 : will eventually uh give you the result
35:39 : of a request
35:40 : so you pass in the request information
35:44 : the same arguments that you would give
35:46 : to
35:47 : the fetch api you pass
35:50 : into this function and then this
35:53 : function just
35:55 : sort of gives them hands it off
35:58 : to the fetch api but but through the
36:01 : cancelable request
36:02 : object okay so so here we
36:06 : we're making um
36:09 : so this part is the
36:12 : the content of here let me hide some
36:15 : stuff
36:16 : first okay and and
36:19 : and you can forget about this pipe for
36:21 : the moment
36:22 : so so when you make a observable
36:26 : object from scratch what you do is you
36:29 : pass in a function
36:33 : into this new observable
36:36 : constructor and what this function is
36:38 : supposed to do is
36:40 : anything if it's a code observable it
36:43 : needs to start some sort of process
36:45 : you just start that process just just
36:48 : put in the code
36:49 : that would start that process right
36:52 : there and then
36:54 : which in our case
36:58 : that is this we're gonna we're gonna
37:01 : new up a cancelable request and just
37:03 : start the fetch
37:05 : process right away okay and
37:08 : we want to do this same error handling
37:11 : thing that we do
37:12 : for the other case but uh when the data
37:16 : actually comes back
37:18 : then we want to notify the observer
37:21 : that's observing our observable so this
37:24 : observe
37:25 : this observer will come
37:28 : once there's code that
37:32 : subscribes to our observable
37:36 : you can think about this observer as a
37:39 : subscriber
37:40 : so for every subscriber that subscribes
37:44 : your
37:44 : to your observable your callback is
37:48 : gonna
37:48 : get executed one time
37:53 : so so yeah you can think of it as one
37:56 : call of my callback function serves
37:59 : one subscriber and the observer is sort
38:02 : of a stand-in for
38:04 : my subscriber so when when
38:07 : the data i'm fetching actually completes
38:10 : and comes to me
38:11 : i'm gonna notify my subscriber
38:14 : of that data by calling observer.next
38:18 : and giving the data to it and uh and
38:21 : then i'm gonna
38:22 : complete this stream of data for that
38:26 : observer
38:27 : this complete is yeah it's
38:30 : like rxjs has the concept of completing
38:32 : a stream
38:33 : the last thing that will ever come
38:36 : so we're going to complete this stream
38:38 : because that's how
38:40 : uh angular http clan does
38:43 : does it as well there's only ever going
38:45 : to be
38:46 : one data point in the stream and then
38:48 : after that comes
38:49 : it will be completed so we're going to
38:52 : follow their convention here
38:55 : and then uh similar to the
38:58 : use effect hook in react in
39:01 : when you make a new observable object
39:04 : you also return
39:06 : a cleanup function so
39:09 : again these two these two
39:12 : integration pieces of code look
39:15 : extremely similar and that's because
39:18 : in many ways the the problem that react
39:22 : hooks is trying to solve
39:24 : in many ways it's it's the same problem
39:26 : that rxjs was trying to solve they're
39:28 : trying to solve
39:30 : for a lot of the same stuff so it makes
39:32 : sense that they have similar apis
39:35 : so we're gonna return a cleanup function
39:39 : to the to rxjs
39:42 : as well and this cleanup function is
39:44 : going to get called
39:46 : when the subscriber unsubscribes so
39:50 : um that's how that's why when you use a
39:54 : switch map
39:56 : to make a request it
39:59 : will get cancelled if that the result of
40:02 : that
40:03 : chain of rxjs observable things
40:06 : eventually get unsubscribed that will
40:10 : eventually propagate up the chain and
40:12 : actually cancel that request
40:14 : and by by implementing this cleanup
40:17 : function
40:18 : you wire that up to happen
40:21 : hey toby um
40:25 : so the this this tear down logic like
40:28 : the return
40:28 : value does this also get called if the
40:30 : subscriber
40:32 : calls cancel if the observer calls
40:34 : cancel
40:36 : if the observer observer like subscriber
40:40 : subscriber can't call cancel cancel is
40:43 : not a method
40:44 : of rxjs observables but
40:47 : unsubscribing is right okay yeah that's
40:52 : true so
40:54 : we're we're calling like you're using
40:56 : the observer.next and the
40:58 : observer.complete but there's also an
40:59 : observer.cancel
41:01 : available right is there
41:05 : no are those the three things that are
41:07 : available on
41:08 : subscribers is next canceling complete
41:12 : i i have to be honest i i don't know
41:15 : about cancel
41:16 : is that an actual method on
41:20 : on a subscribe subscription let me see
41:25 : on an observer not a subscription on an
41:28 : observer you can cancel like that
41:35 : yeah i believe so julia do you know
41:39 : i don't know i don't know sorry i don't
41:42 : know this
41:42 : so i would uh observer
41:46 : do they the weird thing is
41:51 : is is there a type for observer oh it's
41:54 : subscriber
41:55 : okay we can drill into it maybe if we
41:58 : can
41:59 : so i i don't know the answer to this
42:00 : don't want i don't want to derail you
42:02 : too much but the
42:03 : the point is that whatever you return
42:04 : from the observable
42:06 : uh class is going to you said that's the
42:09 : teardown logic that gets called when you
42:10 : unsubscribe right
42:11 : yep okay that's clear i thought maybe
42:14 : it's
42:16 : observer.error or something isn't it
42:18 : like observer
42:19 : yeah error error is another part of the
42:23 : rxjs api so um
42:27 : you would do something like like oh you
42:30 : would oh actually i
42:31 : didn't do this right i should have done
42:33 : it like here
42:35 : mike is right that's definitely what i
42:36 : was thinking of is observer.air
42:38 : not cancel yeah so so i should have
42:41 : definitely done this and i just that's
42:43 : just something i missed
42:45 : so if if i want to connect
42:48 : the error condition in terms of rxjs
42:52 : then i need to tell the observer that i
42:55 : encounter an error so instead of
42:56 : throwing an error
42:58 : i need to tell the observer about it
43:02 : um perfectly by the way
43:05 : there is a from page method
43:09 : rxgs method that you can use just that
43:11 : exact that's exactly
43:13 : what toby wrote oh seriously okay well
43:16 : that
43:17 : that's good to know so it's it's good to
43:20 : know
43:20 : what actually happens inside though
43:22 : right so you're saying there's a
43:24 : from fetch like that
43:27 : yeah oh it's a so from fetch
43:30 : so you can do uh from fetch
43:34 : and and you put in a url like this
43:42 : so it's like from a vet but for yeah
43:45 : and it's it's cancelable cancelable
43:48 : right away
43:48 : that's uh so it basically internally it
43:52 : probably looks
43:53 : like this one one thing i added
43:56 : is this share replay logic so because
43:59 : one thing i am really
44:00 : worried about is uh code observables
44:04 : being observed by a reactive ui
44:08 : because with a code observable
44:12 : which would which this would be if i did
44:14 : not have this line here
44:16 : this would be a code observable um
44:19 : so you use it like well i
44:22 : had the code that was using it so you
44:26 : you would uh you would use it like this
44:29 : you you say make the request
44:32 : and then you would get this back and
44:35 : that's the observable
44:36 : if you have multiple subscribers
44:40 : to this same code observable it would
44:42 : end up
44:43 : making the request for each new
44:46 : subscriber
44:47 : that you would have and in our scenario
44:49 : that would be like
44:51 : if if you pass this down to your
44:54 : children
44:54 : components for example and they are
44:57 : observing this
44:58 : like they are doing this inside of them
45:01 : as well so you end up with multiple use
45:04 : observables
45:06 : on the same observable and if that
45:09 : observable is
45:10 : code it's going to make one request per
45:14 : one of these use observable hooks that
45:17 : you're using on
45:18 : it so to prevent that we actually want
45:20 : to buffer the data
45:23 : using a sure replay
45:26 : so a share replay conceptually you can
45:28 : think of
45:29 : it as you made a behavior subject
45:34 : and then whenever this data comes back
45:36 : you're just doing a dot next
45:38 : on that behavior subject and that
45:40 : behavior subject is buffering that data
45:42 : for you
45:43 : so when you subscribe to it you're
45:45 : subscribing to that buffer
45:47 : not not subscribing to the request
45:50 : itself
45:50 : and therefore it doesn't send out
45:54 : another request every time an extra
45:57 : subscriber comes in
45:59 : so this is why i had this like this
46:02 : this ref count true is very important
46:05 : actually because the ref count true says
46:10 : um if oh
46:14 : if let's say if you have three
46:17 : subscribers
46:18 : on this guy um
46:22 : and then the ref count actually keeps
46:25 : that count
46:26 : it's like oh one two three subscribers
46:28 : it knows how many
46:30 : active subscribers there are and if
46:33 : that count goes back down to zero and
46:38 : that it takes note of that oh ref count
46:40 : is zero now
46:41 : and it will actually go back and cancel
46:44 : the request upstream it
46:46 : unsubscribes to the the
46:49 : code observable that was upstream which
46:52 : will enable it to cancel uh
46:57 : like enable it to call this cleanup
46:59 : function and thereby
47:00 : canceling my cancelable request
47:04 : um yep so
47:07 : so i i thought this is i like this
47:11 : way of doing things as well this is
47:13 : another one of my favorite
47:16 : experiments uh where
47:19 : uh oh and this share replay is why i'm
47:22 : calling this guy
47:23 : make shared request i'm saying this
47:26 : request is okay for sharing
47:30 : uh if it weren't for this share replay
47:32 : it will not be
47:33 : um so this this share request um
47:38 : then we can just use this
47:42 : use observable hook to to observe that
47:45 : data
47:45 : and then get access to the data
47:49 : which can in turn be used in the ui
47:52 : um and a simple way to implement retry
47:56 : is
47:57 : just set set this
48:00 : share request again this is now the new
48:04 : instance of the
48:05 : request and that's going to cause
48:08 : this observable thing to be a different
48:11 : instance
48:11 : that's going to cause the previous one
48:13 : to clean up and then cause the
48:16 : the request to be made again so uh
48:20 : i i kind of like this one it's pretty
48:22 : clean
48:23 : uh uh i made a
48:26 : another one uh
48:31 : i don't like this one quite as much but
48:34 : this one is
48:36 : i start with a subject at the top of the
48:38 : chain and then use a switch map
48:40 : to call into this make sure request
48:44 : and then i i'm i'm like sending messages
48:48 : to this
48:49 : top level subject to to to trigger
48:51 : requests
48:53 : uh i'm not sure i like this one
48:57 : i think that this one requires less code
48:59 : so
49:00 : but this is this is a potential way that
49:03 : you could do it
49:05 : um
49:10 : and then i thought what if you didn't
49:14 : want to
49:15 : go like all in with rxjs
49:19 : um but but you want some of the benefits
49:22 : so this is another way you could
49:23 : potentially wire this up
49:26 : you could use a behavior subject to
49:29 : to store your data uh in lieu of
49:32 : you state um
49:36 : and then you can think of like you it's
49:39 : sort of like
49:39 : interchangeable like you can in any
49:42 : scenario
49:43 : you might use a use date or you might
49:45 : use a behavior subject
49:47 : they both of them do serve the same job
49:49 : which is to cache some data
49:52 : they just have a different api and maybe
49:55 : you prefer
49:56 : behavior subject because you're used to
49:58 : it um but both of them are doing the
50:00 : same job
50:01 : so yeah what did you what you said that
50:04 : you don't like they use ref
50:06 : clunkiness that's why you use use state
50:09 : yeah what do you mean by clunkiness okay
50:13 : uh yeah okay i'm gonna take a slight
50:15 : detour talk about that sure
50:17 : uh so there's this hook
50:20 : if you're not familiar called use wrap
50:28 : um
50:31 : you have to import it okay
50:34 : so you give it a initial value
50:38 : but but you're not allowed a lazy
50:40 : constructor like this
50:42 : um and the way you but um
50:45 : when you want to set a value first of
50:48 : all you
50:49 : access the value using this um
50:54 : my ref.current
50:57 : oh um i i should probably preface this
51:00 : by saying
51:01 : use ref they tell you that you can use
51:04 : use ref
51:06 : similar to the way you use instance
51:09 : variables in a class um
51:13 : but and as as long as you
51:16 : don't need as long as your ui
51:20 : is not tracking changes to this
51:23 : value uh it's okay to use a ref
51:28 : so the way you typically use a ref is
51:30 : like you instantiate a ref
51:32 : but then you can't set like
51:36 : if you want a lazy initialization
51:39 : like this like
51:43 : it's hard to do you would have to
51:46 : do it inside of a use effect i believe
51:53 : you you do like this right
51:57 : we can use just
52:00 : use memo
52:05 : use use memo to calculate this
52:08 : like that no like you can instead of use
52:11 : ref you can do
52:12 : like use memo and initialize it uh
52:16 : initialize it lazily and then you also
52:20 : don't have to do that
52:21 : current because it's since it's always
52:23 : the same idea
52:24 : anyway but use memo doesn't
52:27 : this use memo doesn't guarantee that
52:30 : it's only
52:31 : ever gonna instantiate it once oh yeah
52:34 : that's true
52:34 : it's not whereas the you state lazy
52:37 : function does give you that guarantee
52:41 : so so i just feel like i just prefer
52:44 : this it's like yeah maybe i can build
52:48 : some sort of infrastructure
52:50 : to to get rid of this clunkiness but
52:53 : i feel like this is fine for my needs
52:58 : so so i prefer to do this for for just
53:01 : setting up um setting up like
53:05 : one time initialization kind of thing i
53:07 : i like this use date
53:09 : with a lazy initializer function pattern
53:17 : okay so anyway so this pattern
53:20 : is another one another one that i kind
53:23 : of like
53:24 : which is just if you like using a
53:27 : behavior
53:28 : subject i guess one thing about behavior
53:31 : subject that's
53:32 : i think is nicer than
53:36 : using a normal use date is that
53:39 : once you have this behavior subject
53:42 : because it's an observable
53:43 : you can pass it down to your children
53:47 : and then your children can just work
53:50 : with it
53:50 : as an observable and there's this
53:52 : convenient
53:53 : use observable hook that can just allow
53:56 : them
53:57 : to sort of work with it in a very
54:00 : convenient way
54:06 : yeah it it can definitely be done
54:10 : with a normal use date and the normal
54:12 : react hooks stuff
54:13 : too it's it's up to your preference i
54:16 : think
54:17 : but anyway if you did this then
54:21 : you can use a use request
54:24 : uh hook like this this is the same one
54:27 : that i
54:28 : showed earlier and you pass in a setter
54:31 : uh but the setter will just call your
54:34 : dot next
54:36 : to supply the data to your behavior
54:38 : subject
54:39 : and then you turn around and use this
54:42 : behavior subject
54:44 : and then to to sort of unbox the data
54:47 : and then there's the data you can use it
54:48 : in your ui
54:55 : okay um i there's some stuff that i
54:58 : omitted
54:59 : i didn't have time to go to or or it
55:02 : would probably
55:03 : take even longer to go through so
55:05 : there's some
55:06 : stuff that i haven't really solved which
55:09 : or
55:10 : at least implemented in this code one of
55:12 : them is
55:13 : error handling i haven't totally
55:16 : addressed error handling like if
55:19 : if we want this thing to work with
55:21 : errors we might
55:23 : pass in another error callback
55:26 : function perhaps to allow the outside to
55:30 : handle errors correctly or because
55:34 : rxjs has its own error handling
55:36 : mechanism there might just be
55:40 : you know a wiring up of a
55:44 : behavior subject or any observable
55:46 : perhaps you pass in an observable
55:49 : and it'll wire up both the streaming of
55:51 : the data
55:52 : and the error handler correctly that
55:55 : that's something
55:56 : i i think that could be done in a nice
55:58 : way
55:59 : um another thing that i have not
56:02 : tackled is i see in
56:06 : a lot of the code um
56:09 : in auto wash and in other projects
56:12 : really
56:13 : but in the angular projects as well
56:16 : where you
56:17 : you want to combine or you you want to
56:20 : make a number of requests
56:22 : up front and you combine that into one
56:25 : promise or you combine that into one
56:28 : big observable uh i haven't
56:32 : explored into like what what's a nice
56:36 : way of doing that
56:37 : uh it depends on whether you go a more
56:40 : rxjs route or you go a more
56:44 : uh react hooks or promise based route
56:47 : so that's another area that we can
56:51 : explore more in the future and i'm sure
56:54 : like you guys have explored that as well
56:57 : and just just in your daily work
57:01 : okay any questions or comments
57:09 : okay um yeah that that's
57:12 : all what i have for you uh
57:16 : i'm also open to requests if you if
57:18 : there's
57:19 : topics that you like to like me to cover
57:23 : in the future
57:23 : just just let me know thank you
57:27 : thank you toby very cool
57:30 : alrighty talk to you guys later