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.
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.