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.

Episode summary

In this episode, we take a look at how to implement lazy data loading with Inertia.js. Normally, when you pass data from your controller to a template, that data is always available up front and immediately accessible in your components. But sometimes, you don't want all your data to be loaded right away — maybe you want to load extra data only when a user requests it. That's where lazy loading comes in.

We start by checking out the Inertia docs and exploring the three main options for data evaluation. The first is how we've been doing things so far: passing data directly, so it's always available. But then we dive into wrapping data in a function, which allows Inertia to only evaluate and fetch that data when it's actually needed. Finally, we focus on the Inertia::lazy() method, which is perfect for loading data like comments or posts only in response to a user action.

To demonstrate this, we build a button on the user's profile page that, when clicked, loads the user's posts via a lazy request. We go through setting up the controller to send the data lazily, wiring up the front-end button to make a partial AJAX request using the router, and making sure the fresh data loads in just when we need it.

Along the way, we hit a quick snag with making sure we pass the correct user data, but we solve that and confirm that hitting the button brings in our data on-demand. By the end of this lesson, you'll know exactly how to keep your initial page loads lean, and let users fetch additional data only when they need it!

Episode discussion

No comments, yet. Be the first!