Laravel Cursor Pagination
This episode is for members only

Sign up to access "Laravel Cursor Pagination" right now.

Get started
Already a member? Sign in to continue
Playing
04. Fetching and displaying posts with pagination

Episodes

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

Transcript

00:00
now that we have our data let's hook this up over on our home page just here at the moment of course we just have hello so over in app.view what i'm going to do is go ahead and just paste in some pre-built markup which you can grab from the
00:14
course resource here just containing pretty much everything we need start up with tailwind to get this working you can see it looks like this we've got this text area here where we can post and then here is where we're going to iterate through each of the posts
00:28
and show the post id and the post body so that's pretty much all we need and of course the load more button here is going to go ahead and load more so down here under our script section let's use script setup here just to make things a little bit easier we're going to make a initial request
00:43
to fetch all of our posts we're going to need somewhere to store them so let's go ahead and call this posts and let's use a ref here with just an empty array so we're going to go ahead and import that from view
00:56
so import ref from view and that is what we're going to iterate over in our template so let's go ahead and make a request to do this let's just import axios which is pre-installed with laravel and we'll go down here and we'll
01:13
create a method out which will fetch posts so let's call this fetch posts and we'll make this an async method or function and into this eventually well we can actually pass this in now so we can pass the endpoint in here
01:30
should just be api slash post and then we can just make a request set that data to post and view will react and update that data so let's create a response variable here and let's await on axios get endpoint and what we should be able to do
01:49
initially now is on the mount of this component make a request to this and see this now browse network tab so let's say unmounted and we can either create a function in here or we can just directly pass fetch posts if we're not doing
02:04
anything else so if we come over now and we just open up our developer tools under network come over to fetch xhr give that a refresh sure enough we see a request to get all of that data so all we need to do now is store that inside of posts and then just start to iterate through
02:21
it so we're going to access the value of posts because that's a ref and we're just going to go ahead and set that to response data and let's just take a look at this yeah so response data and data because it's wrapped in that data property and
02:36
data is a wrapper within axios okay so now what we can do is just dump this on the page and then start to iterate through this so let's just output our posts here come over and there we go there's our array of all of our posts
02:50
so let's go through and iterate each of these and we'll say post in posts let's not forget to key this by the post id something unique and then we can just start to output this data so in our case post body
03:06
and of course the post id like so great so we come over now there we go we've got all of that data in there well 10 of them anyway and then when we hit load more we want to fetch more posts so how are we going to implement this
03:23
load more button well let's just take a look down here at the moment we have no pagination data inside of here whatsoever the only thing that we really need in this case is the next page url we just open up our api endpoint as a reference
03:38
you can see that down here we have next page url that is of course if we click on this going to contain the next batch that we want to load in which is the next 10 so really if we just store this somewhere so we can store this in a ref
03:53
next page url and we'll create a ref out of this and just set that to null for now when we get this response back we can store this down here so next page url value and let's go ahead and say response data and then next underscore
04:10
page underscore url when we make a next request we can make it to this next page url and then go ahead and fetch more data now because we've passed the endpoint in here technically now the endpoint that we make a request to can be the next page url
04:25
so let's go up here and we'll say v on click fetch posts and next page url now the only issue with this is what it's going to do is technically replace that data because over in our fetch post method we're just setting the post value to what we get back
04:46
so this should work but you can see it just replaces that data of course because we're implementing a load more solution we want this to overwrite it instead so to get around this we can go ahead and build up a new array of data which includes the destructured response
05:02
that we get back plus the destructured data that we already have so this will be the existing posts this will be the new post and then we'll just put it all together destructured into a single array so let's try this out if we click load more there we go we have a very simple load
05:19
more solution but of course with the pagination that we're using at the moment varvel standard pagination when we start to post more data through it's not quite going to work so that's what we're going to look at in the next part we're going
05:31
to start to be able to actually post a new post prepend it to the top of this list and then see how our pagination acts which we know because we've already seen the introduction to the course but let's go over and get it sorted so we can actually test it out

Episode summary

In this episode, we focus on hooking up our front-end Vue app to fetch and display posts from the backend, and we add basic pagination so users can load more posts as they scroll or click a button.

We start by taking some pre-built markup (made with Tailwind) and integrating it into our app. This markup includes a textarea for posting, a section to list out the posts, and a "Load More" button. Then, in our script section, we use the script setup syntax to make things cleaner and use the composition API's ref to store our posts array.

Next, we import Axios and write a fetchPosts function to grab posts from our API when the component mounts. We store the results in a posts ref, handle the nested "data" property from Axios, and display the posts on the page. We map through these posts using v-for, outputting each post's body and ID.

For pagination, we check our API response for a next_page_url and store this in its own ref. When the load more button is clicked, we use this URL to fetch the next batch of posts. Originally, this replaced the existing posts, but we tweak it so that the new posts are added to the end of our existing array by combining the old and new arrays.

By the end, clicking "Load More" correctly appends more posts to the list. In the next episode, we plan to tackle adding new posts and making sure they show up at the top of the list, while considering how that affects our pagination logic.

Episode discussion

No comments, yet. Be the first!