This episode is for members only
Sign up to access "Fast Infinite Scroll with Livewire" right now.
Get started
Already a member? Sign in to continue
Playing
04. Fetching records for a chunk
Transcript
00:00
We are currently iterating over these chunks, but we're not doing anything useful with them. We're just outputting the index on the page. And obviously, that's not what we want.
00:09
So what do we do inside of here? Well, remember, each chunk represents, if we head back over to our article index, an array of each of the IDs for that chunk.
00:21
So what we're going to do is we're going to create out another Livewire component, which takes in them IDs. And when that Livewire component gets rendered,
00:30
it just shows the articles with those IDs. So not only do we have all of the IDs loaded up front within specific chunks, whatever size we decide we want them to be, these only
00:42
get loaded when the Livewire component is rendered that we're just about to create. So let's go ahead and make this out. We're just going to call this article chunk.
00:52
And let's go and just render this out inside of here. So Livewire, article chunk, and we're done. So let's figure out how we access all of the chunks from all of the IDs from this chunk.
01:10
So there's a couple of ways that we could do this. We could go ahead and reference chunks directly in here, and then the chunk itself. If we give this a refresh, yeah, we can't actually output that.
01:20
Let's just far dump this out on the page real quick. And let's have a look. There we go. So we've got the array here of the first 10.
01:29
Then we've got an array here of the next lot, and so on and so forth. So that's kind of like how we're going to load them in. So with this, we could do that, or we
01:37
could create a method over on the base Livewire component. But let's just roll with this for now. So I'm going to go ahead and pass in the IDs, which is all of the records from that chunk
01:48
that we've just seen output to the page. And then over in the article chunk that we've just created, let's open that up. And we know that we're accepting into this an array of IDs.
02:00
So what do we do now? Well, within the render method, since we're just rendering these once and not doing much else, we can just pass down the articles in here
02:10
from the database. Now, this is where things get slightly trickier. Now, we can't just say article latest all, or get, or whatever we would normally do.
02:21
We have to pluck these out by the IDs themselves. So that's relatively straightforward to do. We can say article and where in, and then we can choose the ID, and we can reference the IDs.
02:33
Then we can just say get, like so. So we can just order these how we would normally do that. So we could just grab these like this based on the IDs and then get them out.
02:43
So let's go ahead and roll with that. We'll go over to our article chunk.blade.php file, and we'll go ahead and do a for each loop on each of the articles that we're getting down.
02:54
So article, go ahead and end that for each loop here. And let's go ahead and just output some really basic data here. So let's create out an H2, set a class of this
03:07
to font bold and text extra large, output the article title, and we'll output the article ID as well because we kind of want to see how we're ordering this stuff and making sure that everything's in order.
03:23
We'll go ahead and create our paragraph with the article teaser. And at the top here, I'm just going to separate these out a little bit with a space y of 8.
03:34
OK, so let's just see what this looks like. OK, yeah, we've got undefined variable article. Let's have a look here. Article, there we go.
03:44
And great. So this looks a little bit weird. We know that we have got 100 records, but we're only seeing 91 as the first one.
03:53
Now, if we scroll down, it looks like 100 is now at the bottom. And if we go ahead and load more, you can see that actually nothing's happening at the moment.
04:04
So we've got a little bit of work to do here. Now, the first thing that I want to fix is that load more. Why isn't this loading more items in? Well, this has to do with not keying
04:16
what we are iterating over. So we are outputting this, but we haven't given this a unique key. And that means that LiveWire can't figure out
04:26
how to re-render this properly. So with the key, it's pretty straightforward. We don't have a unique ID here, but we do have a chunk, which is unique because it's just 0 to 9.
04:35
So that should be fixed now, and we should be able to load more. And you can see we've got 81 up to 90, 71 up to 80. You can notice a pattern here.
04:44
They're just basically in the wrong order. So how do we fix the ordering on this? Well, if we head over to our article chunk, let's just pull everything down here.
04:53
And I'm actually going to put in a query so that looks a little bit neater. And let's figure out the ordering of this. Now, here's the thing.
05:00
What we could do is just say latest. Now, let's just take a look at that and see what we get. We've got 100 down to 91. We've got 90 down to 81, 80, and so on and so forth.
05:13
So this looks like it is in the correct order. And you're right, it is in the correct order. But what happens if, at the article index level, we want to change the ordering here?
05:27
So let's just say we did want the oldest articles to be plucked out, as in the entire list of articles we want oldest first. Well, that's great.
05:37
We get the wrong order again, because we're doing this within latest. So now we've technically got two places that we need to go ahead and update this to.
05:45
And things are going to start to get a little bit annoying. So now I've changed that over. It works, but it's not great. So what we really want to do is only
05:53
have one source of how we order this, which is in the latest order. We don't have to rely on ordering these subsets of articles every single time.
06:03
So what we're actually going to do here is go ahead and order this by a raw SQL query. So we can actually do that by using order by raw. Now, what do we want to order this by?
06:15
Well, we want to order it by the order of the IDs that we get into this batch. So for this, we're going to go ahead and order using the field function.
06:24
We're going to order this with the ID. And then we're going to go and concatenate on the imploded list of IDs that we get through into here. It will basically order this by, not by ID,
06:37
but it will order it on the ID column where it gives the correct order of IDs that we get into this component. So basically, order it by the order
06:46
you've been giving these IDs in. So we can go ahead and implode here. And we just want to break these up by a comma and this IDs. So basically, on its own, this field function
07:00
would look like this, field ID. And then we would have 1, 2, 3, 4. If that were the case and we had 1, 2, 3, 4, it would order it by 1, 2, 3, 4.
07:11
So hopefully, that makes sense. OK, so let's check this out now. If we head over to our article index, we've got latest here. That does work.
07:19
We've got 100 at the top, all the way down to 91. So that's great. But now, the difference is, if we did want this to be oldest, that subset of articles is being ordered
07:29
by the order of this overall query that we have here, which is much better. So I'm going to switch that over to latest. And I'm just going to go over to the article index
07:39
and just go and change this around. So I'm going to go ahead and add a space in here just to make this look a little bit better, space Y of 8. The reason that we need to do that is because each
07:54
of these chunks are spaced. But then the spacing between these chunks isn't. So that's just fixed up nicely. OK, now that we've done this, we are pretty much done.
08:04
All that we need to do is implement the intersection observer API. And we now have a really nice, fast way of infinite scrolling. So let's cover that in the next episode.
5 episodes• 27 mins•1 year ago
Overview
Infinite scrolling in Livewire can be simple to implement, but things slow down as more data rolls in.
In this short course, we’ll look at a technique to load batches of records upfront, then fetch and render each batch only when its needed.
The result? No drop in performance, regardless of how many records a user scrolls through.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!