Episodes
Transcript
00:00
Inertia now natively supports polling for data.
00:03
Now, previously to Inertia v2, what we would have to do is use something like router reload to set this up within a JavaScript timer. So we would have to do a lot of the work ourselves.
00:15
What we can now do is use a new helper, use poll to go ahead and choose a duration, plus any of the standard router reload options that we would use if we were doing this ourselves.
00:27
Let's start out with a really basic example. And then we'll build this up into something that you would probably use within a real life app, kind of like a real time dashboard.
00:37
Okay, so let's go over to our web routes and I'm gonna just pass down the amount of users as a count. So let's just call this user count into our dashboard template.
00:47
So let's put in our user and just grab the count here. We'll just work with this piece of data just to demonstrate this. Okay, so over in our dashboard,
00:55
we can now go ahead and pull this in as a prop. So that's gonna be user count and that'll be a number. And then let's just go and dump it on the page somewhere. So let's just dump out the user count inside of here.
01:07
Okay, so let's go ahead and make sure we're running npm run dev and let's head over and check this out. Okay, so sure enough, we've got one user in our app.
01:16
So the goal here is to poll for this new data every say five seconds. And when we go ahead and add a new user to the app, we want this to automatically update
01:27
and re-render the new value when a new user is added. So at the moment, that's not gonna work. Let's go ahead and run PHP artisan tinker and let's use our user factory to create our new user here.
01:41
And of course, if we come over to our app, it's still at one. Give it a refresh, we hit two. Let's go ahead and add the ability to poll here
01:50
to keep this value up to date. Okay, so to do this, let's go up to the top of the page here. We're gonna go ahead and use the new use poll helper.
01:59
So we can go ahead and pull that in from inertia view three and let's go ahead and set in a time here. Let's say every five seconds. Now this is actually all we need to do to get this working.
02:10
We need to be really careful here because when we use this by default, it's gonna fetch all props, even global props that are defined
02:17
in our handler inertia requests middleware and that will go ahead and update them. So really we don't need all of this data to be refreshed every five seconds,
02:27
but we'll get to how we can pass some options to this. Okay, let's go to the browser and open up our network tab and let's go over to the fetch XHR section, filter that out and have a look at what's happening here.
02:38
You can see that sure enough, every five seconds, this is now making a request to the same page that use poll has been defined on. And of course, if we just inspect this,
02:49
you can see that all of the props here, user count, which we are interested in, but including our authenticated user and any errors in our session are now being reloaded.
02:59
So just by doing that, let's go back over to our terminal and let's go ahead and create a new user, come back over and you can see that we just caught that as it upgraded.
03:08
Let's go ahead and do that again. And yeah, there we go. You can see we're just catching it at that five second point but you get the idea.
03:14
Every five seconds, this data is going to update. Okay, so a really important part of this is probably not just using this on its own. Let's take a look at the second option
03:26
or argument to this use poll feature. And that is any of the options that you usually pass through to router reload. So if you are familiar with router reload,
03:37
this is just a partial reload. So we would say router reload, that would reload the current page. And we would pass options in here
03:45
like the specific prop that we want. So in this case, it would just be the user count that we would want reloaded. So any of them options that you would use in here,
03:54
that is being used behind the scenes. So you can just pass them directly into here. So let's go ahead and say only and let's just choose the user count.
04:02
And you might have several props that you'd want updating. Okay, so now let's take a look at the difference. If we head over to the network tab and just wait a few seconds for that request to come in,
04:11
you can see that the props now, we just get the user count. We do get errors because that's just implied that we always need errors but the user count is being reloaded
04:19
and we're not reloading the user's information. So this will make the request a lot faster if we filter down only the props that we need. Okay, let's take this a step further
04:29
and look at manual control of polling. So what we can do from this is extract the returned functions, start and stop from use poll.
04:41
This is pretty straightforward. It's gonna allow us to manually start and manually stop our poll. So let's come down and just create out some buttons up here.
04:50
So I'm just gonna wrap the user count that we have here in a div. And then up here, let's create out a couple of buttons. So let's say start
04:58
or let's make this a little bit more interesting and say live on and live off. Imagine we're building a dashboard where we wanna see the data rolling live.
05:08
Okay, so to change this, we can just do a V on click. So let's say V on click and let's say stop and we'll do the same for live on, V on click and let's say start.
05:19
Okay, great. Okay, let's come over and just check this out. We'll keep our network tab open so we know that these requests are being turned on and off.
05:27
You can see that at the moment we are making requests. Let's actually go ahead and reduce the duration of this. So let's just say every one second we're getting this data through.
05:35
Okay, so I'm gonna press live off and sure enough what that is gonna do is stop this live polling. When I press live on,
05:42
that's gonna go ahead and restart that and it will continue to poll for this data. Now the question is how do we know whether polling is currently active or not?
05:52
Well, what we can do is we can set that at the same time. So what we would have to do is integrate this using a watcher. So here's how I would do this.
06:01
Let's go ahead and create out an is polling ref in here which holds by default let's say false. Now what we can do is we can set this value, we can watch for this value
06:13
and we can start or stop this depending on whether we are polling or not. So rather than directly call start and stop in here, I'm gonna set is polling to true
06:24
and I'm gonna set is polling to false when we turn this functionality off. And what we can do is now that we have an independent variable or a ref which controls this,
06:35
we can show these values based on whether we are polling or not. So if we are not polling, we can go ahead and say live on
06:44
and we'll do the same here for this one. So V if is polling live off. So by default, we can see that this is on but we can control that as well.
06:54
I'll show you how to do that in just a second but now we only show one of these buttons. So what we can do with use poll is we can set it to an auto start as well.
07:04
So the second object that we can pass through a specific poll options. So let's say auto start and this can be just true or false. So we're just gonna grab from is polling the value.
07:17
So now what we're doing is independently saying, well, are we starting to poll? This will not start if this is false, which it is by default.
07:25
So when we give this a refresh, we're not polling. When we press live on, that's gonna set the is polling value to true and it's of course gonna change around the button
07:34
but it hasn't started polling yet. So how do we do this? Well, we create a watch around. So let's go down here and go ahead and create out a watcher
07:44
and we'll watch for that is polling value and that is where rather than within the template directly, we'll go ahead and start the polling. So we're gonna go ahead and create out a function in here
07:55
and we'll say is polling. Let's pull that through into here. If we are polling, we do want to start polling. We're gonna say start, otherwise we're gonna say stop.
08:06
So we're gonna invoke the methods that we get through from here rather than doing these directly in the template and this kind of pattern gives us a lot more control.
08:14
Okay, so now we start on the page without live polling on. We press on, that watcher goes ahead and watches for that and we start polling and of course we can now turn this off as well.
08:25
So that is how we would build a button which would control this polling behavior on some sort of real-time dashboard. Now we can take this a little bit further as well.
08:34
Let's roll with the idea that we are building a real-time dashboard. What we could also do is create out an is refreshing value. By default, that's gonna be false
08:46
and inside of our object here for our router reload, we can still continue to use things like the event hooks for our router. So on start, for example,
08:56
well on start that just means that a request is just about to be sent. So we could change the value of is refreshing over to true on the router start
09:06
and then on the router finish, we could go ahead and set is refreshing to false. So now this value is going to basically tell us whether this data is currently being refreshed or not.
09:19
Let's go ahead and pull that into an example. Okay, so let's go down here and just dump this value out for now. So let's go down and output is refreshing
09:28
just so we can see that this is working and because of the data that we're sending down, this is gonna take a little while. So let's go ahead and change over the user count
09:37
to a closure here. Let's pull that back in and return that value, but let's go ahead and just sleep for say one second. Okay, let's go over and try this out
09:46
and let's turn live on and you can see that that switches over to true as this data is refreshing. It'd probably be a good idea at this point
09:55
to change around the poll duration just so we're not seeing this flicker all the time. So let's change this to every five seconds so it's a little bit better.
10:03
Let's turn the live functionality on this and we should see that turn to true and then back to false and then if we wait another few seconds,
10:13
we should see this change to true without one second delay. Okay, great. Let's pull this into a more practical example.
10:20
So I'm just gonna go down to here where this is refreshing and I'm just gonna build out a little component here to show this. So let's go ahead and create out a div here
10:30
with a class of absolute. We'll make this relative so we can add this in and let's go and set the right here to zero. We'll add a little icon
10:39
just to make this look a little bit better and add some padding. I'm gonna go ahead and pull over an SVG that I already have here.
10:47
So let's just pull that into there and of course you could use any icon you wanted. That looks a little bit like that. So now we can go ahead and say,
10:53
we only wanna show this if it's refreshing or of course you could assign a class to this and add a transition only when this is refreshing. So if we turn live on now,
11:04
we're only gonna see that icon spin when this data is refreshing and then of course it disappears. And of course we already know
11:12
that when we go ahead and add more data, that is going to update the data within the props that we've chosen. So a really great way to build kind of real-time dashboard
11:24
with this polling functionality with Inertia. Let's just take a look at one more thing that we can configure here before we finish up. That is keeping this alive.
11:34
Now let's just, we can't really demonstrate this. It's really difficult to demonstrate this but basically whenever I close away my browser window, so as I come away here,
11:43
this is technically not refreshing in the background. This kind of makes sense because if the user doesn't have their browser window open, we don't really want to be polling in the background
11:52
and wasting resources. So what we can do is we can provide in a keep alive option into the use poll feature. So let's go up here and provide a keep alive
12:03
and let's say true. So if we change keep alive over to true, this means that even as we navigate away from this browser window,
12:12
this polling is still gonna be happening in the background. Most of the time, we're gonna have that set to the default of false, but if you do need to poll in the background,
12:21
if the user has closed their browser window or moved away from their browser window, you can go ahead and set this option to true. Okay, that's pretty much everything
12:30
with the new polling functionality in Inertia and a small example of how you might pull this into some sort of real time dashboard to refresh any of the props you've chosen on the page.
9 episodes•1 hr 27 mins•5 months ago
Overview
With the release of Inertia v2, let’s cover everything new — now and into the future.
Each episode of this course will cover a new feature or significant change, so you’re ready to adapt and introduce new functionality into your Inertia-powered applications.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!