Adding Pagination to a Comments Section with Hasura and React

[00:00 - 00:05] In this lesson, we're going to add pagination. Very often, we don't always want to fetch all the comments.

[00:06 - 00:20] If there are too many of them, the APA call can be slow and worsen the user experience. For that reason, we'll add pagination so that users can decide whether they want to read more comments by going to the next page or not.

[00:21 - 00:29] We'll first extend the hook and then add a simple UI. Let's open the usecommons.ts file. We'll make a few modifications.

[00:30 - 00:40] The usecommons function will accept a new parameter, an object with limit and offset fields. The first one stands for how many comments should be fetched.

[00:41 - 00:49] And the second one stands for where should we start. For example, offset =10 means skip the first 10 comments.

[00:50 - 00:59] This object will be optional as someone may still want to fetch all the comments. As the next step, we'll modify the get comments query to take the limit and offset variables.

[01:00 - 01:08] We also need to pass the variables in a fetch call. We'll add them to the post_ruco's body, but only if they are provided.

[01:09 - 01:17] Whenever offset or limit change, we need to refresh the comments. For example, when a user goes to the next page, the offset changes.

[01:18 - 01:31] We should listen to those changes in our hook and fetch the comments accordingly. For that, we'll pass limit and offset to the dependency array in use effect, so that the fetch_commons function is called whenever those values change.

[01:32 - 01:40] And we're almost there. However, we don't have total comments count when using limit and offset configurations.

[01:41 - 01:50] It's necessary when we want to display the number of pages for user pagination. It's also necessary when we want to show the number of all the comments as we did so far.

[01:51 - 02:03] So, we're going to extend the get_commons query to fetch aggregated count as well. We'll add comments aggregate and we'll pass the where parameter and we'll get the count.

[02:04 - 02:12] Now that we're fetching the count, we need to store it somewhere. We'll add a new state variable and we'll update it after a successful API call.

[02:13 - 02:23] After updating our local comment state, we'll also update the count state. And the last step, we need to return the count variable from the hook.

[02:24 - 02:31] Now let's add a simple UI with previous and next buttons for comments pag ination. Here we'll also perform a few steps.

[02:32 - 02:38] Let's go to the post comments.tsx file. We'll provide the hook with limit and offset variables.

[02:39 - 03:01] For now, we're going to hardcode limit to 10, but feel free to set a different number. We'll store the offset in a state variable and it will be updated upon previous or next button clicks. Since we're now getting the total count as a separate variable from the hook, we'll modify the part responsible for displaying comments number information and use the count from the API.

[03:02 - 03:14] Last and the most significant step is navigation with the previous and next buttons. I will add enough element with a paragraph to display the current page and a div who've set buttons.

[03:15 - 03:29] I won't deter the styles we used here because we talked about Tyler's classes a little earlier and I hope that you're a bit familiar with them. It's also just a simple UI implementation, so feel free to improve and beautify it.

[03:30 - 03:56] For example, one thing that you couldn't do here is using different styles for disabled buttons. When we are on the first or on the last page, previous and the next button should be disabled accordingly. Now let's go to the browser and see how the pagination looks like. So we see the number of comments and the patterns. Let's quickly play and see if that works. We can go to the next page. We can also go back to the previous page.

[03:57 - 04:17] Well done. We are officially done with the hook implementation. Feel free to stop here for a bit, improve the UI, improve the styles. You can also add a configuration for the pagination and maybe you have some other ideas. In the next bonus module, we'll learn how to publish this hook as a library and we'll also add a manual approval for the comments.