Infinite Scroll with Livewire
Playing
04. Getting the data on the page

Episodes

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

Transcript

00:00
okay let's go ahead and get a new live wire component created and get this data output on the page so we've got rid of the example that we saw from earlier and i'm going to go ahead and use live wire make here to create out an article index let's go ahead and create that out we know where everything is i'm going to immediately go ahead and put this directly
00:20
on the dashboard that'll be article index and we're good to go so let's head over to the article index class first of all and let's take a look so how would we normally do this well we just pass this down from render there are a load of different ways that we can output data within alpine within live wire but we're going to go ahead and do this directly in here for now so
00:43
i'm going to go ahead and say articles and of course reference that article model and we're going to say latest which we can now do since we've set up our data really nicely and then we're just going to say yeah that's pretty much all we're going to do for now so obviously that's going to give us all of the articles on the page so over on the article index blade file we can now
01:02
now go ahead and just dump all of these out so it's the outer class here since we're using tau wind we're going to go ahead and say space y of eight and then in here this is where we want each of our articles so we're just going to go ahead and for each loop over each of these so for each articles as article and go ahead and end that for each down here and that's where our
01:25
articles are going to be displayed so as you can see we have got 100 articles on the page here obviously that's not what we want we don't want to display articles so let's create out an h2 in here and let's go ahead and style this up really quickly with some extra large text and font bold and then in here we're going to output obviously the article title but we while we are doing this
01:48
infinite scroll we really want to see the order of these to make sure that we have the correct order so we're going to go ahead and output the article id in here as well so article id and we should be good let's check it good okay so we're going from 100 all the way down to one perfect okay let's go ahead and create out a simple paragraph down here that's just going to output the article teaser
02:13
just so we're sort of bumping up the amount we have on this page and i even think if we head over to our dashboard we could probably just reduce the size of this a little bit just to kind of push it a little bit further just so we've got more room to scroll down here okay so we've got all the data on the page now now we're going to take a sneak peek at how we're actually going to
02:33
start to pull this together the key thing here is using pagination so obviously this is kind of natural we would use pagination if we wanted to show a first set of results and then a second set of results but usually these are spread between different pages and that's what we need to get around so we're going to go ahead and use the with pagination trait within this livewire component to
02:57
allow us to do this and then this is going to be paginated so we're going to go ahead and paginate this by 10 and we're just going to show the first 10 on the page so this is a obviously a good start we're only showing the first 10 we just need to figure out how to load more now what we're going to do inside of here is keep track of the pages that we're current or the page that we're currently
03:20
on we're not going to have this in the query string because with infinite scrolling we don't really want to update the query string we can do that but usually with infinite scrolling a user just expects to scroll down we don't expect to link to a certain position in our infinite scroll so we're going to go ahead and create our a integer in here just called page and of course i'm going
03:42
to set that to one and then in here we're going to go ahead and define where we want this to be on so with this uh with the paginator we can pass through several options to this the second one is which columns we want to select the next one is the query string and then the last one is the actual page that we're on so really this is the only thing that we're interested in okay so now
04:02
that we've done that that should just work as normal and we have this on each of the pages so now what we can do interestingly is when we do change this page we of course get a different set of results so we've gone from 100 to 91 and now we're going from 90 to 81 but that's not quite good enough obviously because what we're then doing is replacing the entire set of this data
04:26
so let's head over to the next episode create out a load more button to get this working and then from there we can go ahead and use our intersection observer just to invoke that method to load more in so in the next episode finally we'll get to the point where we can actually see this kind of infinite scrolling working

Episode summary

In this episode, we get hands-on with bringing article data onto the page using Livewire. We start by creating a new Livewire component for listing articles (the Article Index) and set it up on our dashboard. Then, we jump into the component logic to fetch all articles, order them from latest to oldest, and finally pass them through to our Blade view.

We walk step-by-step through rendering this data with a simple @foreach loop, so every article's title, ID, and teaser are shown. This approach makes it easy to visually confirm everything is appearing in the correct order, especially when preparing for infinite scroll.

Once we’ve got all 100 articles flooding the page (which we definitely don’t want long term!), we tackle pagination next. The magic comes in by adding Livewire’s WithPagination trait and tweaking the component so only 10 articles appear per page. We discuss how to keep track of which page the user is on, and why, for infinite scroll, we wouldn’t want to reflect that page number in the URL.

By the end of this episode, we’ve got a page showing just the first 10 articles, ready to be extended. Next up: we’ll wire up a “load more” button and set the stage for true infinite scrolling with Intersection Observer. Stick around, we’re almost there!

Episode discussion

No comments, yet. Be the first!