Course Introduction

Introduction

Introduction to GraphQL

Using Hasura to Generate GraphQL APIs and Protect Data

How to Create a Comments Database Table and Set Permissions

Storing comments with Hasura

Setting Up Next.js Blog Starter and Understanding Its Structure

Fetching Blog Comments from a Database with a Custom React Hook

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

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

Implementing a comments system

An Overview of Optimistic Updates for React Hooks

Adding Pagination to a Comments Section with Hasura and React

Extending the comments system functionality

How to Publish a Custom React Hook as an NPM Library

Coding a Comments Section that Requires Manual Content Approval

Bonus

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 the previous lesson, we introduced a sample blog application that will be our
use case for a commenting system. We saw a 

 component. This component is responsible for rendering posts'
content and details, and that's where we'll add a comments section and a form to
add a new comment.

What should we do there? When a user visits a particular post, for example, the
first one — 

, we need to fetch the post's comments. That means
we need to fetch those entries from the table 

: This course assumes a basic understanding of React hooks — we will
work with 

 hooks, and we'll create a custom one. If
you want to revise your knowledge, we recommend checking out the official

We could keep the fetching comments logic and state variables in the

 file, and that would be totally fine. However, we will extract it
into a separate custom hook, which will let us test the hook separately and
reuse it in other components.

Unlike a React component, a custom Hook doesn't need to have a specific
signature. We can decide what it takes as arguments, and what, if anything, it
should return. In other words, it's just like a normal function. Its name
should always start with "use" so that you can tell at a glance that the rules
of Hooks apply to it.

 prefix, and our subject is comments, we will call our
hook 

Instead of going straight to writing implementation details, we'll first "model"
the hook with TypeScript types. When we focus on types without being distracted
by the implementation, we're more likely to consider multiple ideas and compare
the alternatives. It allows us to stop for a moment and think about what we
need, what the ideal API is, and how we'd like to use it.

Let's start from something that is kind of the base of our commenting system — a

 type. In the previous module, we created a table 

, so the
type should map the database model. Here's how it looks in TypeScript:

export interface Comment {
  topic: string;
  author: string;
  content: string;
  created_at: string;
}

 is typed as a string. It's because we get an
ISOString from a GraphQL API. It's not being transformed into JavaScript's

GraphQL comes with default scalar types like 

, but it also allows defining custom scalar types.

 is one of the examples, and it's being sent as a string from
the API. On the client, we can manually parse it to a 

However, most popular GraphQL clients does not currently have a way to
automatically interpret custom scalars, so there's no way to automatically
reverse the serialization on the client.

 type, let's write down the hook function signature. Our
hook will take two arguments:

The hook returns an object, and I'll call its type 

declare const useComments: (
  hasuraUrl: string, // URL to our Hasura backend
  topic: string // e.g. "my-blogpost-about-cats"
) => UseCommentsResult;

 keyword to tell the compiler about types before we write any
implementation.

 type. What information do we need from the
hook?

interface UseCommentsResult {
  comments: Comment[];
  loading: boolean;
  error: string | null;
}

And here we go! We can proceed to implementation details now.

Firstly, let's declare all the state variables that we mentioned before:

---
title: Fetching Blog Comments from a Database with a Custom React Hook
isPublicLesson: false
description:
  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.
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/rnn4zolzin
---

In the previous lesson, we introduced a sample blog application that will be our
use case for a commenting system. We saw a `pages/posts/[slug].tsx` file which
contains a `Post` component. This component is responsible for rendering posts'
content and details, and that's where we'll add a comments section and a form to
add a new comment.

What should we do there? When a user visits a particular post, for example, the
first one — `dynamic-routing`, we need to fetch the post's comments. That means
we need to fetch those entries from the table `comments` that have `topic` set
to `dynamic-routing`.

> **Note**: This course assumes a basic understanding of React hooks — we will
> work with `useEffect` and `useState` hooks, and we'll create a custom one. If
> you want to revise your knowledge, we recommend checking out the official
> [React docs](https://reactjs.org/docs/hooks-overview.html).

### Fetching the comments — requirements

Let's open the `[slug].tsx` file and list what should happen there:

1.  On component load, we need to fetch comments added for a particular blog post
    from our Hasura instance.
2.  We need a few state variables to store information:

    -   `comments` — at first, it's an empty list, which we will update after
        successfully fetching the comments,
    -   `loading` — a boolean variable indicating whether fetching is in progress,
    -   `error` — a variable indicating that there was an error when fetching
        comments. By default, it will be `null`. If an error occurs, we'll set it
        to a string with an error message.

Let's write it down to help us _visualize_ it in the code:

```tsx
const Post = ({ post, morePosts, preview }: Props) => {
  const [comments, setComments] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // fetch comments
    // on success: setComments(result)
    // on error: setError(error)
  }, []);

  // ...
};
```

We could keep the fetching comments logic and state variables in the
`[slug].tsx` file, and that would be totally fine. However, we will extract it
into a separate custom hook, which will let us test the hook separately and
reuse it in other components.

### Implementing the hook

A note from
[React docs on implementing custom hooks](https://reactjs.org/docs/hooks-custom.html):

> _Unlike a React component, a custom Hook doesn't need to have a specific
> signature. We can decide what it takes as arguments, and what, if anything, it
> should return. In other words, it's just like a normal function. Its name
> should always start with "use" so that you can tell at a glance that the rules
> of Hooks apply to it._

As hooks should have `use` prefix, and our subject is comments, we will call our
hook `useComments`. Let's create a new file in the `lib/` directory —
`useComments.ts`.

Instead of going straight to writing implementation details, we'll first "model"
the hook with TypeScript types. When we focus on types without being distracted
by the implementation, we're more likely to consider multiple ideas and compare
the alternatives. It allows us to stop for a moment and think about what we
need, what the ideal API is, and how we'd like to use it.

Let's start from something that is kind of the base of our commenting system — a
`Comment` type. In the previous module, we created a table `comments`, so the
type should map the database model. Here's how it looks in TypeScript:

```ts
export interface Comment {
  topic: string;
  author: string;
  content: string;
  created_at: string;
}
```

> Notice that `created_at` is typed as a string. It's because we get an
> ISOString from a GraphQL API. It's not being transformed into JavaScript's
> `Date`, even though its type is `timestamptz!` in the schema spec:
>
> <img width="300" src="./public/assets/created_at.png"></img>
>
> GraphQL comes with default scalar types like `Int`, `Float`, `String`,
> `Boolean`, and `ID`, but it also allows defining custom scalar types.
> `timestamptz!` is one of the examples, and it's being sent as a string from
> the API. On the client, we can manually parse it to a `Data` type.
>
> However, most popular GraphQL clients does not currently have a way to
> automatically interpret custom scalars, so there's no way to automatically
> reverse the serialization on the client.

As we have the `Comment` type, let's write down the hook function signature. Our
hook will take two arguments:

-   `hasuraUrl` — an URL to our Hasura backend. We could "hide" it inside the hook
    implementation, but this way, we can make the hook more generic — we can reuse
    it to connect to different Hasura instances.
-   `topic` — an identifier of content, e.g., `"my-blogpost-about-cats"`.

The hook returns an object, and I'll call its type `UseCommentsResult`.

```ts
declare const useComments: (
  hasuraUrl: string, // URL to our Hasura backend
  topic: string // e.g. "my-blogpost-about-cats"
) => UseCommentsResult;
```

> We use `declare` keyword to tell the compiler about types before we write any
> implementation.

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.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

The newline Guide to Full Stack Comments with Hasura and React

Module 1: Introduction

Introduction:

Start Here

Introduction: (3:03)

Course Introduction

Module 2: Storing comments with Hasura

Lesson 1: (9:21)

Introduction to GraphQL

Lesson 2: (10:35)

Using Hasura to Generate GraphQL APIs and Protect Data

Lesson 3: (6:03)

How to Create a Comments Database Table and Set Permissions

Module 3: Implementing a comments system

Lesson 1: (4:56)

Setting Up Next.js Blog Starter and Understanding Its Structure

Lesson 2: (9:32)

Fetching Blog Comments from a Database with a Custom React Hook

Lesson 3: (5:43)

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

Lesson 4: (3:51)

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

Module 4: Extending the comments system functionality

Lesson 1: (3:16)

An Overview of Optimistic Updates for React Hooks

Lesson 2: (4:18)

Adding Pagination to a Comments Section with Hasura and React

Module 5: Bonus

Lesson 1: (3:55)

How to Publish a Custom React Hook as an NPM Library

Lesson 2: (2:52)

Coding a Comments Section that Requires Manual Content Approval

Module 6: Summary

Lesson 1: (2:35)

Summary

Fetching Blog Comments from a Database with a Custom React Hook