Pagination With Apollo Client

So far, we’ve implemented a new query that allows paginating over a list of products sorted by their publication timestamp. Now we will see how we can use this new API with Apollo Client.

Implementing the frontend

Now, when the backend part is implemented, we can start working on the frontend of our application. To use pagination, we would have to implement a new query definition on the frontend and update the component that displays a list of products to fetch them using the new query.

Let’s first look at the UI we will implement. Our home page won’t load all products we have on the backend but will load just the first two products when it is first rendered. We will also add the Load more button at the bottom of the page to allow a user to fetch more products. Every time a user clicks on this button, our application will load two more products until it has all products already loaded.