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.

Episode summary

In this episode, we take a break from forms and dive into partial reloads with Inertia.js. We start by adding a simple "Refresh Comments" button under the comment form, which lets users manually reload the comments list without refreshing the whole page. This comes in handy if multiple users might leave comments, and you'd like to see the latest ones before submitting your own.

You'll see how to create the button using Vue (with a proper type="button", styling, and an event handler method), then write the reloadComments method. Here, you'll learn how to make a manual GET request using Inertia's router to update only the comments.

But that's not all. We hit a practical issue: every time we use Inertia's router to reload the page's data, all props are re-fetched by default—even stuff we don't need, like authentication info or timestamps. To solve this, we use Inertia's "partial reloads" and the only option, making sure only the posts (our comments) prop updates. This is more efficient, especially as your app grows.

We also quickly demo how to "preserveScroll" so your scroll position doesn't jump around when you reload. By the end, you'll have a nice pattern for updating only what you need on the page, keeping things fast and snappy as your app gets more complex!

Key takeaways:

  • How to trigger a manual page update with Inertia.
  • Why and how partial reloads matter for performance.
  • The basics of preserving scroll position when reloading content.

It's a super practical episode that will make your Inertia-powered apps feel way more dynamic and efficient.

Episode discussion

No comments, yet. Be the first!