What are we going to build? During this lesson, you'll get to know more about the course, the tech stack, and what you're going to learn.

Course Introduction

Introduction

In this lesson, we'll cover the basics of GraphQL; what it is and how to use it. We'll also understand how it fits the course's subject.

Introduction to GraphQL

We'll learn about Hasura and play a bit with its features and writing GraphQL queries. This knowledge will let us move on to the commenting system!

Using Hasura to Generate GraphQL APIs and Protect Data

In this lesson, we'll create a comments table and learn a bit about databases along the way.

How to Create a Comments Database Table and Set Permissions

Storing comments with Hasura

We'll get to know a sample blog application that we'll be adding a comments section to. We'll also go over the setup and explain the directory structure.

Setting Up Next.js Blog Starter and Understanding Its Structure

In this lesson, we'll create a React hook that will fetch the comments from the database. We'll cover how to create a custom hook as well as how to integrate with Hasura.

Fetching Blog Comments from a Database with a Custom React Hook

In this lesson, we'll add a UI for the comments section and a new comment form. We'll also display the comments that we get from the React hook.

A Brief Tutorial on Building the UI for a Blog Comments Section

This lesson will show how to extend the hook to handle adding new comment logic. It will cover adding a new GraphQL mutation and using it from the frontend application.

How to Use GraphQL to Add Comment Features to a Frontend App

Implementing a comments system

We'll learn about optimistic updates and add them to our hook's implementation to improve the user experience.

An Overview of Optimistic Updates for React Hooks

In this lesson, we'll add pagination to both the hook and UI.

Adding Pagination to a Comments Section with Hasura and React

Extending the comments system functionality

This lesson will teach you how to publish a React hook as an NPM library.

How to Publish a Custom React Hook as an NPM Library

Right now, all the comments are public instantly. However, we may want to review the comments before showing them to other users. This is what we'll cover in this lesson.

Coding a Comments Section that Requires Manual Content Approval

Bonus

We just completed the course! Let's see what's next and how you can use the new knowledge.

Summary

react

next.js

### The newline Guide to Full Stack Comments with Hasura and React

Build and implement a comprehensive commenting system for your website using Hasura and React.  We’ll use the commenting feature to teach technology concepts like Hasura with appropriate authorization, optimistic updates for a more responsive UI, pagination, and publication of library in NPM.

### Why this course

Many developers would like to add a comments section to their website or blog for users to post comments or hold discussions. While it's possible to use existing hosted solutions such as Disqus or Facebook Comments, they often charge a fee and impose their UI leaving little to no control for modifications or customization. 

Another option is to build your own from scratch — which is what we'll do in this course. We’ll use Hasura, which generates GraphQL API from a database so that the backend part is as easy and the least time-consuming as possible. Along the way, we’re going to learn about databases, GraphQL, building UI components with React and TypeScript, and more.
By the end of this course, you’ll have a commenting system added to a website we’ve called, Why comments?, with all comments stored by Hasura. We'll also publish the fetching and adding comments logic as a library to NPM.

This course focuses on building a commenting widget, however, the skills you’ll acquire will allow you to build any fullstack widget you can think up for your application.  You’ll be able to contribute to fullstack React, GraphQL, and Hasura projects at work, in open source, or your own projects. You'll discover that this stack not only eliminates the need for having large teams of backend developers, but it lets your projects move faster.

### Your Instructors

Hi, I'm Aleksandra, and I'm your instructor for this course. I’m the former tech lead of Hasura console and lead maintainer of Bliz.js. This course combines my knowledge in a few areas such as TypeScript, React, Hasura, GraphQL, and general application development.

Build and implement a comprehensive commenting system for your website using Hasura and React.  We’ll use the commenting feature to teach technology concepts like Hasura with appropriate authorization, optimistic updates for a more responsive UI, pagination, and publication of library in NPM.

The newline Guide to Full Stack Comments with Hasura and React

Implementing pagination and optimistic updates

Importance of tests, and how to test React components

In this lesson, we're going to add pagination. Why are we doing this? Very
often, we don't always want to fetch all the comments. If there are many of
them, the API call can be slow and worsen the user experience.

For that reason, we will add pagination so that users can decide whether they
want to read more comments by going to the next page. We'll first extend the
hook and then add a simple UI.

export const useComments = (
  hasuraUrl: string,
  topic: string,
  config?: {
    limit?: number;
    offset?: number;
  }
): UseComentsResult => {
  ...
}

query GetComments($topic: String!, $limit: Int, $offset: Int) {
  comments(
    where: { topic: { _eq: $topic } }
    limit: $limit
    offset: $offset
    order_by: { created_at: desc }
  ) {
    topic
    author
    content
    created_at
  }
}

fetch(hasuraUrl, {
  method: "POST",
  headers: {
    "x-hasura-role": "anonymous",
    "Content-type": "application/json",
  },
  body: JSON.stringify({
    query: getCommentsQuery,
    variables: {
      topic,
      ...(config?.limit && { limit: config.limit }),
      ...(config?.offset && { offset: config.offset }),
    },
  }),
});

useEffect(fetchComments, [config?.limit, config?.offset]);

---
title: Adding Pagination to a Comments Section with Hasura and React
isPublicLesson: false
description: In this lesson, we'll add pagination to both the hook and UI.
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/m24kvify3z
---

### Why do we need pagination?

In this lesson, we're going to add pagination. Why are we doing this? Very
often, we don't always want to fetch all the comments. If there are many of
them, the API call can be slow and worsen the user experience.

For that reason, we will add pagination so that users can decide whether they
want to read more comments by going to the next page. We'll first extend the
hook and then add a simple UI.

Let's open the `useComments.ts` file. We'll make a few modifications.

1.  The `useComments` function will accept a new parameter — an object with
    `limit` and `offset` fields. The first one stands for how many comments
    should be fetched, and the second one where we should start. E.g.,
    `offset: 10` means _skip the first ten comments_. This object will be
    optional as someone may still want to fetch all comments.

```ts
export const useComments = (
  hasuraUrl: string,
  topic: string,
  config?: {
    limit?: number;
    offset?: number;
  }
): UseComentsResult => {
  ...
}
```

2.  We will modify the `GetComments` query to take the `limit` and `offset`
    variables as the next step.

```graphql
query GetComments($topic: String!, $limit: Int, $offset: Int) {
  comments(
    where: { topic: { _eq: $topic } }
    limit: $limit
    offset: $offset
    order_by: { created_at: desc }
  ) {
    topic
    author
    content
    created_at
  }
}
```

3.  We then need to pass those variables in a fetch call.

```js
fetch(hasuraUrl, {
  method: "POST",
  headers: {
    "x-hasura-role": "anonymous",
    "Content-type": "application/json",
  },
  body: JSON.stringify({
    query: getCommentsQuery,
    variables: {
      topic,
      ...(config?.limit && { limit: config.limit }),
      ...(config?.offset && { offset: config.offset }),
    },
  }),
});
```

4.  Whenever offset or limit change, we need to refetch the comments. For
    example, when a user goes to the next page, the offset changes. Instead of
    skipping the first ten comments, we might skip the first twenty. Or the
    number of comments on one page can be configurable. 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 `useEffect` so that the
    `fetchComments` function is called whenever those values change.

```js
useEffect(fetchComments, [config?.limit, config?.offset]);
```

5.  We're almost there. However, we currently don't have the total count of all
    comments when using `limit` and `offset` configurations. Total count is
    necessary when we want to display the number of pages for easier pagination,
    or we want to show the number of all the comments as we did so far. Hence,
    we're going to extend the `GetComments` query to fetch aggregated count as
    well.