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
16. Partial visits (and more) with links

Episodes

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

Transcript

00:00
So links within Inertia work in pretty much the same way as we've already seen when we do things like router get and of course when we post forms.
00:10
All of these things are very closely related. They are all making a request to a separate page, rendering a new component and fetching new data to pass down to that component. That's the kind of basis of Inertia.
00:24
But what we can do with links is actually pass some of these options through as well if we need to. Now let's look at an example of that that we probably wouldn't use in reality and we're going to look at preserving the scroll when we click through to the profile page.
00:39
Now it's unlikely that you're going to want to use this but it's going to demo this out nicely and in a moment we'll look at a better way that we can actually use preserve scroll. So we're going to go back to the link for the user's page here. How would we preserve the scroll on a link?
00:54
What would be passed through here? Well, Inertia contains several props here that you can actually use. So we can actually still preserve the scroll by just creating out an empty preserve scroll prop in here or attribute.
01:08
So let's go over now and take a look at this. I'm going to scroll down the page, hit Alex and you can see sure enough we stayed in exactly the same place but we are now over on this other page. So just as an example, we're going to switch over this refresh comments button
01:24
which calls a method and actually set this as a link. Now in reality you wouldn't do this because you would probably want this as a button to actually call a function rather than look like a link that went somewhere but let's swap it out anyway just at least temporarily just to see what else we can do here.
01:42
So let's go over to the reload or refresh comments section over on index. So reload, what do we call that, refresh and let's swap this out for a link and we're going to see it's going to work in exactly the same way. We'll get rid of the type here, we'll get rid of the V on click.
01:59
We just want to set the href here to go through to slash comments. Now let's see that in action and it's going to work in exactly the same way. So if we click on this, we get bumped to the top because we don't have a preserve scroll but you can see here it is making a request to comments
02:16
and it's loading through all of the data inside of here. So this would be a good candidate if it made sense for this button to add in a preserve scroll. So let's get rid of that assignment there and if we come down and click it, there we go. We still make that XHR request but it's not going anywhere.
02:36
Now notice that over in comments, over in props, we are loading all this data down. Well with links you can choose to only load in some data so you can do a partial reload with these as well. So again very similar, in fact exactly identical to the way that this works
02:54
when we make a manual request to a page, a manual visit or we submit a form. So I'm going to say that I only want posts loaded in when we click on this link. So let's try it again and hit refresh comments, head over here. Sure enough over in the prop section, we just reload the posts.
03:12
So if that made sense and if it made sense to have a link to reload or refresh comments, then you can still pass in any of the options that you're used to seeing when you're doing things like submitting forms and using manual visits with router. So finally I'm just going to go ahead and switch this back because it does not make sense to have
03:32
a link here for this particular functionality. It's good to demo this out. Let's get rid of everything we've done here and we'll switch this back to a button but I'm going to leave this in here just so you have a reference to it.

Episode summary

In this episode, we dive deeper into how Inertia handles navigation using links, and how this ties back to partial reloads and preserving scroll position on navigation. First, we look at how you can use link components just like router visits or form submissions—they all fetch new data and swap out components, the Inertia way.

We then experiment with some of the options you can pass to these links. For example, we show how you could use the preserve-scroll prop to keep your scroll position when navigating to a new page (even though it's a bit of a contrived example for a profile page, but hey, sometimes demo code is like that!).

Next, we take a UI element—a "refresh comments" button—and temporarily turn it into a link to demonstrate that you can use the same link options (like partial reloads and preserve-scroll) here too. Along the way, we show how partial reloads work: you can request to only reload specific props (like just the posts), making your navigation more efficient.

We wrap up by cleaning up the demo and switching things back, but leave the example code in case you want to reference how to use these features. The main takeaway: you can use all those handy Inertia navigation options with links, just like with manual visits and forms, giving you full control over how your app fetches and displays data as users interact.

Episode discussion

No comments, yet. Be the first!