Okay, let's work on pagination on the front end. So we want to be able to paginate through these results here. So on the back end in our schema, you'll see that we're already using the paginate directive, and you can see we have a default count of 10. So in GraphQL Playground, if we don't specify a page, then it just defaults to page 1, as we've been doing. So if you want a different page, we can just say page 2, and that should show the results for page 2. Now, if you want information about the paginator, we can do that as well. We have this paginatorInfo field, and we can get things like the current page, the

Now, if you want information about the Paginator, we can do that as well. We have this paginatorInfo field, and we can get things like the currentPage, the lastPage, the total amount of items, and a boolean for hasMorePages. So we can make use of this information on the front end to generate our pagination. So let's go ahead and do that. So back to our front end, let's go down here to where our query is. So first, let's modify this to accept that page param. So let me grab this first. And now we'll make this an object, we'll say query, let's paste that in. And remember, we can accept variables here.

And now we'll make this an object, we'll say query, let's paste that in. And remember, we can accept variables here. So we'll say variables as a method, and we'll return the variables we need as an object. So we'll return and we need page in this case. And let's just put one in here for now. Okay, let me save that. Now let's go ahead and accept those params in our query here. So we have to give this a name, say, getPosts. And it's accepting a page param. And it's of type int, and it's required.

And it's accepting a page param. And it's of type int, and it's required. And here we can do the same. So it's a page param, and we're using page, okay. And now let me just add the paginator info that we did here. So we'll add this part of the query right here. Okay, save that. And let me make sure this still works. So back to our app, and everything is still the same, okay. But now we should have access to these variables here.

So back to our app, and everything is still the same, okay. But now we should have access to these variables here. Actually, first, let's work on the page. So we want to be able to do something like this, where we specify a query variable, say page equals 1 or page equals 2. So if there's nothing there, we want it to default to 1. But if it is there, we want to take that value as the page. So as you see right now, nothing's happening because we're not reading that query string variable. So let's do that.

variable. So let's do that. So the page is going to be, so first we have to check if it exists. So we'll say, this->route->query('page'). So if that exists, and I'm going to change it to a $variable because it's a string and that won't work. So we can do the same thing. So this->route->query('page'), and if it doesn't exist, then just default to 1. Okay, now let's see if the results change as we update the page. And I have a typo here, sorry about that.

Okay, so that still works, cool. Now we can just generate the links here. So let's do that. So let's put it somewhere in our template right here after the unordered list. So let's make a new container here. Let's make it a div. And let's make sure the posts are initialized. So I'll say $posts, because initially it's set to null. And let's start with just the amount of results here. So let's say $totalResults.

And let's start with just the amount of results here. So let's say X total results. And we can grab this from, remember, we have that new paginatorInfo field. So posts.paginatorInfo.total. And that's coming from this query here, right here. Okay. Does that work? Okay, we have 51 total results. Now let's display the current page. So say page 1 of 5.

Now let's display the current page. So say page 1 of 5. So back to the template, let's make another div here. Let's just say page 1 of X. So the 1 will be the current page. So we can just grab this and use the currentPage field. So it's, what is it, current or currentPage. And same for this one, but it's lastPage. Okay, lastPage. Let's see if this works.

Okay, last page. Let's see if this works. Okay, one of six. Try two of six. Okay, so that works. And now we just have to add the links for next and previous. Or you can add specific page numbers as well. I'll keep it simple with just next and previous links. So let's put another div here. And let's start with the previous link.

So let's put another div here. And let's start with the previous link. So I'll make use of the router-link component. And we'll say to equals, and I'm going to use backticks here. Let's say /page or ?page=, and let's put in a variable here. And we can say posts.paginatorInfo.currentPage minus 1. And we only want to show this if the current page is not 1. So v-if equals posts.paginatorInfo.currentPage does not equal 1. Okay, let's see if this works. So right now, actually, I forgot to add the actual text.

And for the next case, it's almost the same. So let me just grab this. Let's put it underneath. Let's say next here. And it should go to the next one. So plusOne. But only if there are more pages. So we have that hasMorePages field that we can make use of. So hasMorePages. Okay, so does this work?

This is just a simple explanation with no code.

So yeah, that's working correctly. So yeah, that's basically it. You can do something similar for the Apollo query component if you're querying your components that way. But I'm just going to stick to what we have here. So let's go ahead and make a commit, git add, git commit, view Apollo pagination.