Learn Inertia
This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
14. Manual visits and partial reloads

Episodes

0%
Your progress
  • Total: 2h 20m
  • Played: 0m
  • Remaining: 2h 20m
Join or sign in to track your progress

Transcript

00:00
So putting forms to one side, let's look at another concept, which can be really useful. You might not always use this, but we're going to talk about partial reloads. Now, what we're going to do to demonstrate this is implement a button just down here
00:15
that allows us to refresh the comment list. So imagine that a few users are posting comments on this page. They want to refresh the list to see the latest comments before they start to write another comment.
00:27
That's how we're going to imagine this. So let's go ahead and build the button out first, and then we're going to see how we can do this with inertia. And this will, again, further demonstrate the way that props get reloaded into pages.
00:39
So just underneath the form here, let's create out a div. We'll add some padding on the top to this, just so it doesn't get in the way. And let's add in a button in here, which will reload or refresh comments. OK, so let's have a look at that.
00:55
Great. And let's just put this in the middle. So we'll say flex and justify center. And let's go ahead and make this button small.
01:04
So text small, and we'll set the text to an indigo 700. OK, so this is the button we're going to press to reload these comments in. So how do we do this? Well, the first thing I want to do is set this to a type of button
01:19
because it's not technically a submit button. And now what we want to do is just say V on click and call the method. So we're going to call this refresh or reload comments. So we can build this method out to do exactly that.
01:34
Let's go up and create this function out. We can just do this at the bottom of our script here. And the question is now, how do we refresh our comments? We've already seen making a request with a form.
01:47
But technically, what this is, is form specific functionality and posting through. What we want to do is manually make a request to this page and just load the data that we need. So to do this, inertia is basically just routing within a back end and a front end.
02:08
So we're going to pull in the main star of inertia. And that is the router, which allows us to make manual visits to pages. So what we can do here is say router. And then again, we can say get post whatever we want to do.
02:21
We could even use this to submit forms through. But of course, the form helper is a lot more convenient. So we're going to make a get request to slash comments. Now, that is pretty much everything that we need to do to reload the data
02:36
that's getting passed from our comment index controller down to our view, which is, of course, getting picked up in props and then being shown on the page. So just with that change in place, let's head over to the database and just manually create a comment just to simulate someone else posting it somewhere else.
02:54
So I'm going to say hello and let's go ahead and add in now. Hit save changes. And what we should now see when we click this is hello. There we go.
03:05
Now, notice that we were jumped to the top of the page. Again, preserve scroll can be used in here. So we can go ahead and pass our options in here to preserve the scroll. Now, we have to be careful with this because this first argument here
03:18
is actually the data that we want to pass down to here. We're not doing that in this case because we just want to reload a load of data in. But in this case, we're just going to leave that empty. So the second are the options.
03:30
That is where we can use preserve scroll and set that to true. So now when we hit refresh comments, that made a request. But of course, it didn't actually jump us to the top of the page. Let's just demo that out again by just duplicating this down and saying another comment.
03:47
And setting out date and time. And let's go over, hit refresh. And there we go. We just reload that data in.
03:55
Now, we've got a bit of a problem in here. And this is a really key component of how we load data into inertia pages. Now, let's take a look at our network tab and actually see what happens when we press refresh comment.
04:09
So I'm going to press this again. And you can see, sure enough, we've made a request to the same page. We get the props down, which we would expect, because that needs to reload the data in here. But if we head over, we've also got auth, errors, posts, and Ziggy.
04:24
Now, we're going to talk about where auth comes from later when we look at shared data. And we're also going to talk about Ziggy as well. But really, the key part of this is all we want to do when we press refresh comments is just go ahead and refresh this.
04:42
Nothing else. The refresh comments button, we're just interested in reloading posts. If we had other data in here that we didn't want to be reloaded back down within that request, we could also prevent that as well.
04:55
Just to demonstrate this, I'm going to create out the current date and time, just so we can keep an eye on how this does not reload this data. So we do not want to reload this. Just imagine if you're building out an app and you had loads of data being passed down
05:10
in lots of different properties inside of this array. You're only going to want to refresh posts, not pull in loads more data. This is basically, with partial reloads, a nice way to only choose the data that you want to be loaded onto the page, which, of course, speeds up your apps or the requests
05:29
to your API. So let's go ahead and look at how we can do this. We'll keep our network tab open so we can monitor this. And we're going to come over to index just over here.
05:39
So very easily, we can just use the only property of this and then within an array, choose the data that we only want to load by key. So in this case, we only want to load posts in. That's the only thing we're interested about doing when we make a manual request here.
05:57
We just want this partial data. So let's take a look at the difference this makes. Let's come down here and hit refresh comments. It makes the same request, but this time the props only contains that post in there.
06:10
If, for example, we wanted to load the posts and that now timestamp that I just created out, we could choose that as well. So now when we make a request to refresh those comments, we also get that timestamp passed in as well.
06:24
That was just there to demo that. Of course, we don't actually need that. But hopefully, that makes a lot more sense. We only want this data being reloaded down.
06:32
Now, at the moment, really, the request duration here and the speed of this isn't a concern because the only real data that's being passed down here are the posts. But as your application grows, if you are submitting forms, doing anything on your page, always try to leverage only to just bring back the data that you need and nothing more.
28 episodes•2 hrs 20 mins

Overview

Single-page applications are great, but they come with the challenge of maintaining two separate projects — the client and the API.

Inertia serves as the solution, seamlessly connecting these two components and enabling you to build everything in one application (a monolith) while achieving the same outcome. The best part? You won't have to create an API.

To be honest, when I first started working with Inertia, I was a little confused about how everything worked. If that sounds familiar, then this course is made for you. I'll guide you through everything you need to know to kickstart your journey in building single-page applications using Laravel, Inertia, and Vue.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.