All right, why don't we get started with polling. This one is very cool and very easy to implement. You're going to like it. So, here I have a Fresh Breeze application, and yeah, maybe we're building some kind of project app. So, we fetch all projects from the database, and we also include the number of comments for each project. All right, very cool. So, let's imagine it's very, very popular, and we want to, in real time, display the total number of comments for each project.

So, let's imagine it's very, very popular, and we want to, in real time, display the total number of comments for each project. How can we do that? Well, of course, we could wire up some kind of WebSockets layer, but yeah, in situations like this, simple polling may do the trick. So, let's get started. All right, let's start in our routes file. So, for the dashboard routes, we fetch all projects from the database, including the total number of comments for each, and then we send that to a dashboard view component. Now, most of this is provided by Laravel Breeze, but we do accept projects as a prop,

total number of comments for each, and then we send that to a dashboard view component. Now, most of this is provided by Laravel Breeze, but we do accept projects as a prop, and then if I scroll down, we quickly loop over them, and for each one, we display the title and the comment count, and yeah, this is how we end up with something very simple, just like this. All right, so now, let's implement our polling, and it couldn't be simpler. I'll start by saying use poll, and we will import this at the top, and now, I will provide a frequency. So, if I say two seconds here, this means every two seconds, request the page again and refresh the props.

So, if I say two seconds here, this means every two seconds, request the page again and refresh the props. All right, so let's give it a shot. If we do nothing else, what's going to happen here? Let's see. So, if I refresh the page, let's have a look at the network tab, and yeah, like clockwork, every two seconds, we'll make another request to the server to refresh the updated data, and yeah, notice the response here. It includes everything, and this is an important note, so pay attention. Yes, we get the errors, but also data about the authenticated user, the projects, of course,

It includes everything, and this is an important note, so pay attention. Yes, we get the errors, but also data about the authenticated user, the projects, of course, as well as anything else we might be requesting. So, for example, if we go back into my routes file, let's just say, as an example, we need to send through the total number of users in the application. Well, if we come back and wait a second, well, now, if I scroll down to the bottom, it's also performing a query to fetch the total number of users for every user visiting our site every two seconds we are doing that. All right, file that away for just a second, but nonetheless, this is cool. So, why don't we add some comments?

All right, file that away for just a second, but nonetheless, this is cool. So, why don't we add some comments? We'll do it like this. I'll open up the terminal. Let's boot up php artisan tinker, and we can say app\Models\Comment, give me a factory, and we'll hard code the project to the one with an ID of one. All right, so let's give that a shot, and if I switch back, sure enough, now we have three comments, and if I do it again, now we have four, and notice specifically that I'm not refreshing the browser. Instead, yeah, to be clear, every two seconds, it's making another request to the server,

I'm not refreshing the browser. Instead, yeah, to be clear, every two seconds, it's making another request to the server, and it's repopulating that prop. All right, let's see this a little bit better, though. Yeah, this layout should be a little better. All right, so once again, let's create a Comment, and it updates. Run another one, six, seven, eight, you get the idea. Why don't we create a hundred new ones, and we'll see that jump up. Whoa, it's going viral. That's amazing.

Whoa, it's going viral. That's amazing. Okay, so you get the idea. Now, let's do this. If we look at this code here, and we just break down what's going on, well, it's just sort of a glorified page refresh, right? Every two seconds, I want you to hit this route, run whatever code you need to, and then return the results, but yeah, all I really care about in this example is the projects. The only problem is, well, I'm running every single query that is associated with this route, even if it's irrelevant to what I'm trying to refresh, right?

The only problem is, well, I'm running every single query that is associated with this route, even if it's irrelevant to what I'm trying to refresh, right? So that means, yeah, once again, for every User on the site, every two seconds, we're going to run this query and any other query that might exist in this route, even though all I actually care about is basically running this query again and returning the results. So here's what I'd recommend. Wrap these within functions. Instead, we want to be explicit about when these queries run, only when necessary, not every single time the php logic hits each individual line, right? All right, so that helps a little bit, but it doesn't quite solve the problem.

every single time the php logic hits each individual line, right? All right, so that helps a little bit, but it doesn't quite solve the problem. So if I were to come back to Chrome and give this a refresh, let's return to the Network tab, and yet again, it'll make a query here, and it still fetches all of this unnecessary data that we don't care about. All right, so here's the next step. Back to PHPStorm. The second argument to use pull is effectively what you would pass to Inertia's router.reload method. So you could do things like onSuccess, onStart, or only.

method. So you could do things like onSuccess, onStart, or only. So I'm going to be explicit. The only thing I care about pulling for is projects, and yet to be clear, projects corresponds to this prop, which of course corresponds to this piece of data here. All right, now this should do the trick. Now if we give it one more try and we take a look at the Dashboard component, yeah, this time of course we get errors, but you always get those. We get our projects, but nothing else. Nothing related to the authenticated user or that user's count prop, and yet this is

We get our projects, but nothing else. Nothing related to the authenticated user or that user's count prop, and yet this is the entire point, and it's specifically because we requested to only receive updates related to projects. So yeah, think about it. If we did not wrap this within a function, well, even though Inertia knows that it only cares about projects, it'll hit this method of course, and it'll run this line, then this line, then this line, and then it will run a query that effectively is ignored. So that, to be crystal clear, is explicitly or specifically why we wrapped this within a function.

So that, to be crystal clear, is explicitly or specifically why we wrapped this within a function. We don't need to run this code unless we ask it to. All right, so what else? Maybe just a couple more things you should be aware of. By default, pulling automatically starts, but if you want, you can disable that through the third argument. You could say autostart false, and then you would need to be explicit about starting the pulling. So as it turns out, the usePull function will return an object that includes start and stop.

pulling. So as it turns out, the usePull function will return an object that includes start and stop functions. So if you want, you could say let startStop equals a call to usePull, and yeah, then at this point, you could manage this system. So yeah, maybe if we did something like, how do we want to do this? How about right down here, start, and when you click on it, we would call that start method. All right, let's take a look. Give it a refresh.

All right, let's take a look. Give it a refresh. It didn't look very pretty, but that's okay. So we'll open up the network tab, and by default, because we set autostart to false, it's not pulling our server. But if we manually started it, after every two seconds, it'll begin working. And of course, we can do the inverse by calling that stop method, and that is something to be aware of. But yeah, that mostly is it. So we now have incredibly simple pulling as part of Inertia 2.

But yeah, that mostly is it. So we now have incredibly simple pulling as part of Inertia 2. Tell me what you think.