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
19. Lazy data

Episodes

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

Transcript

00:00
As we know by now, when we pass data down within a controller to our templates,
00:06
this data is always available. It's always used here and then sent down and available in our components for us. But what happens if we don't want that to be the case? What happens if we want lazy data loading?
00:20
Now, if we just head over to the Inertia docs and look at the lazy data evaluation section, you can see that we've pretty much got three options here for how we evaluate data. So the first one is pretty much what we're doing. We're just doing this in a standard way like we normally would with any kind of blade template.
00:40
We're just passing the data down so it's available. The second option is to wrap this in a function. So let's look at the differences here. So this is always included on the first visit.
00:53
We kind of know that already. This is always included on the first visit, optionally included on partial reloads, which we've already learned about, and it's only evaluated when needed. Now, the majority of the time, what we're going to do when we're sending data down to our components,
01:11
if we want them to be truly lazy and only load them in when we need them, is use the Inertia lazy method. So I'm actually going to head over to the user's profile page. And what we're going to do is create a button which loads this data down only when we press that button. So we're only going to load the user's post when we request it.
01:33
And there's a couple of other variations of this, like when you first land on the page, you want to render the page out first and then make a separate request to grab this data. And we'll take a look at that too. OK, so we're going to go over to the user's show page and we are going to create our button.
01:51
Let's say just up here. And let's say load posts. Let's go ahead and actually take these styles that we had here and do a very similar thing. So I'm just going to copy the whole lot over.
02:07
We'll get rid of this link. And we'll say. Load comments. We'll get rid of this V on clicks, we'll add that back in a second and let's take a look.
02:20
OK, so we've got load comments in here. So when we press on this button, we just want the comments to load. But how do we get the comments to not be loaded in the first place? Well, that is over on the user show controller.
02:32
And like we've already seen, we're going to wrap this in that inertia lazy method. So let's cut this out. Let's go ahead and use either the inertia class or the inertia helper. And we're going to say lazy and we can either include a shorthand function here like it shows on the docs
02:49
or we can just include. A standard closure, if we've got maybe a lot of data that we need to build up here and return, it really depends on how this best looks within here because we're using a standard closure here. We just need to bring the user into scope and we're pretty much done.
03:08
So now what's going to happen is if we come over to here, of course, we don't see any posts because we don't actually have any posts being loaded. These aren't being there's no request being made to the database to grab these or do anything at all. Of course, there isn't a database request anyway, but if you were doing that, then that would be the case. So the question is, how do we click this button to actually load them posts in?
03:32
Well, if we just go over to our show page here, let's say V on click. Load comments or load posts, whatever we want to say, and we go up to our script or down to our script section. Let's create out a load comments function. Now, here is where we're going to bring in our router, because remember, we can do that to make manual and partial requests.
03:59
And we're going to say router get and we're going to pass in the root name that we've learned from using Ziggy. So that is users and show. And then here we're going to pass no data down and we're going to say only. And posts that is going to make a request through to this page, just pulling back the post, which we've now lazily loaded and they should be shown.
04:23
And that hasn't worked. So let's have a look here. Yeah, of course, we actually need to pass the user into this. Now, this is another sort of interesting thing, nothing again specifically to do with inertia. But if we want to access the user as part of our props, how do we do that?
04:40
Well, what we can do is just assign this to a variable called props. So then anywhere else inside of our script, we can access this data. So now we can say props user and we could say ID or just leave it as the object, as we already spoke about in the Ziggy episode. So now when we go ahead and click load posts, sure enough, then posts have been loaded in.
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!

Episode discussion

No comments, yet. Be the first!