-
So to start the first Inertia 2.0 feature that we're gonna be discussing here is polling. Polling allows us to reach out to our server
-
for fresh information at an interval. So if we take our organization settings page, as an example, we have this refresh button on both our organization members
-
as well as our pending organization invitations. If we were to click this button, it goes out to our server for fresh information specifically for our organization members table. The same thing works here
-
for our pending organization invitations. An alternative approach that we could now do in Inertia 2.0 is instead have this automatically happen and refresh new information for both of these tables
-
at an interval. So say something like maybe every five seconds. In that case, every five seconds, it would take this information, fetch it from our server,
-
get that response back, wait five more seconds, send back up to our server, get another response back. Each time that it gets that response back, it will go back through and update our table
-
with that fresh information. And what's really nice about this is that it works as a composable. So whatever page we put it on, say if we put it on our organization settings page here,
-
whenever we move off of this page and that page component becomes unmounted, Inertia will automatically stop the interval for us. So over in our code,
-
let's go ahead and dive into our settings organization page. We can import this composable from the Inertia Vue 3 package, and it's called usePull. So we'll go ahead and import that there.
-
Inside of our script, then all that we need to do is call this composable. So usePull. The first argument is going to be the pull interval that we want. So to stick with our five second example,
-
we could do 5,000 milliseconds. The second argument then are our reload options. These are the same options that we can pass to any link, get request and the like with Inertia.
-
So this is consistent with those, meaning that if we wanted this pull to only fetch fresh information just for our organization members and pending organization invitations,
-
we can provide that within the reload options here, the same way that we would with our refresh button links, by specifying an only with the users and invites
-
specified as the only properties to update. The third argument then are additional pull specific options that we could provide. So say that we wanted to manually start this
-
after some interaction on our page. We could set auto start to false. And then as you can see from the return, this composable returns back a stop and a start function.
-
So we could get that back as const start and stop and manually start this at any point that we need to, which could also be inside of a click handler.
-
And of course we could stop it at any point as well. Then one more really cool thing that this pull feature does is whatever the tab with the pull goes into the background. So if we open up a new tab,
-
the pull then goes into the background and it will throttle it by 90%, meaning that whatever we set our pull interval at, it will slow that by 90%,
-
making fewer requests while the tab making the pulls is in the background. If you want it to maintain the same pull interval whenever the tab does move into the background,
-
there's an option for that called keep alive that you could set to true. And now regardless of whether or not our tab is active or inactive, that interval will always be five seconds
-
or whatever you set it at here as the interval. All right, so for our use case, let's leave it just like this and let's go take a look at it in action.
-
So let's go ahead and give our page there a refresh. And at this point, every five seconds, both of these tables should be refreshing. All right, let's go ahead and right click,
-
inspect and jump into our network tab. Now it won't show requests prior to our DevTools being open, but with it now open, we should see these requests happening
-
about every five seconds. So there's another. And if we take a look at the response that we're getting back for this, we should see our props with our users listed out
-
and the invites omitting all of the additional organization based information that we have being requested for this page and just getting the two keys that we've specified
-
as the only field for this request. So with this set, I mean, if we wanted to, we could go ahead and remove these refresh buttons because this is automatically refreshing
-
for the user in the background. Just so that you have both examples to reference out on GitHub, I'm gonna leave both intact here as we have it at present.
