Next up we’ll cover pagination. You’ll implement a simple pagination approach so that users are able to view the links in smaller chunks rather than having an extremely long list of
Once more, you first need to prepare the VueJS components for this new functionality. In fact, we’ll slightly adjust the current routing setup. Here’s the idea: The
LinkList component will be used for two different use cases (and routes). The first one is to display the 10 top voted links. Its second use case is to display new links in a list separated into multiple pages that the user can navigate through.
You added two new routes:
/new/:page. The second one reads the value for
page from the url so that this information is available inside the component that’s rendered, here that’s
The root route
/ now redirects to the first page of the route where new posts are displayed.
You need to update the
AppHeader component to show the new
We need to add quite a bit of logic to the
LinkList component to account for the two different responsibilities that it now has.
The query now accepts arguments that we’ll use to implement pagination and ordering.
skip defines the offset where the query will start. If you passed a value of e.g.
10 to this argument, it means that the first 10 items of the list will not be included in the response.
first then defines the limit, or how many elements, you want to load from that list. Say, you’re passing the
first, you’ll receive items 10 to 15 from the list.
You need to update the references to this query in the
You’ve set the
variables to a function which runs before the query is executed. This allows you to retrieve the information about the current page from the router (
this.$route.params.page) and use it to calculate the chunk of links that you retrieve with
Also note that you’re including the ordering attribute
createdAt_DESC for the
new page to make sure the newest links are displayed first. The ordering for the
/top route will be calculated manually based on the number of votes for each link.
You also need to map
Next, you need functionality for the user to switch between the pages. First add two
button elements to the bottom of the
LinkList component that can be used to navigate back and forth.
Since you added
pageNumber as one of the
LinkItem, you now need to add it to the
props array of the
Since the setup is slightly more complicated now, you are going to calculate the list of links to be rendered in a separate method.
isNewPage, you’ll simply return all the links returned by the query. That’s logical since here you don’t have to make any manual modifications to the list that is to be rendered. If the user loaded the component from the
/top route, you’ll sort the list according to the number of votes and return the top 10 links. This is accomplished through an
orderedLinks computed property which you will implement next.
You will make use of the lodash library within the
You also need to add a
count property to the
Next, you’ll implement the functionality for the Previous- and Next-buttons.
The implementation of these is very simple. You’re retrieving the current page from the url and implementing a sanity check to make sure that it makes sense to paginate back or forth. Then you simply calculate the next page and tell the router where to navigate next. The router will then reload the component with a new
page in the url that will be used to calculate the right chunk of links to load. Hop on over to the running app and use the new buttons to paginate through your list of links!
You have now added a simple pagination system to the app, allowing users to load links in small chunks instead of loading them all up front.