In this episode, we move beyond just displaying chunk indexes—we actually start fetching and showing real article records for each chunk in our infinite scroll. First off, instead of rendering plain chunk indexes, we set up a dedicated Livewire component (called article-chunk) that receives an array of article IDs corresponding to that chunk.
Inside the article-chunk component, we perform a query to select and fetch only the articles with those IDs. There’s a bit of detail about how to make sure we preserve the right order, since just doing a simple whereIn query can mix up our intended sequencing. To solve this, we use a raw SQL ORDER BY FIELD clause based on the exact order of IDs in the chunk—so our displayed articles appear exactly as planned, whether you’re showing the latest or the oldest first.
We handle some practical gotchas, like making sure each chunk has a unique key (so Livewire knows how to re-render them) and cleaning up the styles so the chunked lists display nicely with appropriate spacing. There’s also a demo of how load more now brings in the next chunk, and how updating the main query order automatically reflects in the loaded chunks, thanks to how we’re passing IDs down and preserving order.
By the end of the episode, we’ve got real, ordered article data rendering chunk-by-chunk, and everything is ready for the last piece—infinite scrolling, which we’ll tackle next!