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 this lesson, we will cover adding new comments — we'll write a GraphQL
mutation for inserting a new entry to the database, and we'll call it from the
frontend application.

Firstly, let's go to the Hasura Console to create and test a GraphQL mutation.

 allows us to add multiple comments, but we'll only
add one at a time, so let's go with 

 as
arguments. Try it out in GraphiQL if you want!

mutation AddComment($topic: String!, $author: String!, $content: String!) {
  insert_comments_one(
    object: { author: $author, content: $content, post_id: $topic }
  ) {
    id
    created_at
  }
}

We'll store it as a constant in our code and then implement the 


function inside our hook. It's going to be pretty similar to our 


function. We also need to send a POST request and handle the response.

Let's start with the function signature. Our GraphQL mutation takes three
arguments: 

. We already know the topic inside of
the hook, as it was provided as the hook's parameter. Our function just needs to
take the remaining two pieces of information. What's the type of the parameters?
Instead of writing a new one, we can use the 

 — Constructs a type by picking the set of properties Keys
(string literal or union of string literals) from Type.

const addComment = ({
  content,
  author,
}: Pick<Comment, "content" | "author">) => {};

Now that we have the function, we can add the Hasura API call. We'll again use a
native 

 function, whose arguments will look very similar to fetching the
comments. We'll provide an URL to our Hasura instance and specify the config:

const addComment = ({
  content,
  author,
}: Pick<Comment, "content" | "author">) => {
  fetch(hasuraUrl, {
    method: "POST",
    headers: {
      "x-hasura-role": "anonymous",
      "Content-type": "application/json",
    },
    body: JSON.stringify({
      query: addCommentMutationtopic,
      variables: {
        topic,
        content,
        author,
      },
    }),
  });
};

---
title: How to Use GraphQL to Add Comment Features to a Frontend App
isPublicLesson: false
description:
  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.
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/35oacjmpve
---

In this lesson, we will cover adding new comments — we'll write a GraphQL
mutation for inserting a new entry to the database, and we'll call it from the
frontend application.

### GraphQL mutation

Firstly, let's go to the Hasura Console to create and test a GraphQL mutation.

In the GraphiQL explorer, we can see `insert_comment_one` and `insert_comment`
mutations. `insert_comments` allows us to add multiple comments, but we'll only
add one at a time, so let's go with `insert_comments_one`.

<img width="400" src="./public/assets/mutation_insert.png"></img>

In the mutation, we're going to pass `topic`, `author`, and `content` as
arguments. Try it out in GraphiQL if you want!

```graphql
mutation AddComment($topic: String!, $author: String!, $content: String!) {
  insert_comments_one(
    object: { author: $author, content: $content, post_id: $topic }
  ) {
    id
    created_at
  }
}
```

We'll store it as a constant in our code and then implement the `addComment`
function inside our hook. It's going to be pretty similar to our `fetchComments`
function. We also need to send a POST request and handle the response.

### `addComment` function

Let's start with the function signature. Our GraphQL mutation takes three
arguments: `topic`, `author`, and `content`. We already know the topic inside of
the hook, as it was provided as the hook's parameter. Our function just needs to
take the remaining two pieces of information. What's the type of the parameters?
Instead of writing a new one, we can use the `Pick` utility type to "pick"
`content` and `comment` properties from the `Comment` type.

> [TypeScript docs:](https://www.typescriptlang.org/docs/handbook/utility-types.html)
>
> **Pick&lt;Type, Keys>** — Constructs a type by picking the set of properties Keys
> (string literal or union of string literals) from Type.

```tsx
const addComment = ({
  content,
  author,
}: Pick<Comment, "content" | "author">) => {};
```

Now that we have the function, we can add the Hasura API call. We'll again use a
native `fetch` function, whose arguments will look very similar to fetching the
comments. We'll provide an URL to our Hasura instance and specify the config:

-   `POST` request method.
-   The same headers as before — `x-hasura-role` and `Content-Type`.
-   In the request's body, we'll provide just created GraphQL mutation and
    variables — `topic`, `content`, `author`.

```tsx
const addComment = ({
  content,
  author,
}: Pick<Comment, "content" | "author">) => {
  fetch(hasuraUrl, {
    method: "POST",
    headers: {
      "x-hasura-role": "anonymous",
      "Content-type": "application/json",
    },
    body: JSON.stringify({
      query: addCommentMutationtopic,
      variables: {
        topic,
        content,
        author,
      },
    }),
  });
};
```

```tsx
const addComment = ({
  content,
  author,
}: Pick<Comment, "content" | "author">) => {
  fetch(hasuraUrl, {
    method: "POST",
    headers: {
      "x-hasura-role": "anonymous",
      "Content-type": "application/json",
    },
    body: JSON.stringify({
      query: addCommentMutationtopic,
      variables: {
        topic,
        content,
        author,
      },
    }),
  })
    .then((res) => res.json())
    .then((res) => {
      if (res.errors && res.errors.length) {
        setError({
          error: errorMessage,
          details: res.errors[0].message,
        });
        return;
      }
      //refetch
    })
    .catch((err) => {
      setError({
        error: errorMessage,
        details: err,
      });
    });
};
```

And that's almost it! We now need to add response handling. In case of an error,
we set the error message in the same way we did in Lesson 2. However, what
should happen in case of a successful call?

```tsx
const addComment = ({
  content,
  author,
}: Pick<Comment, "content" | "author">) => {
  fetch(hasuraUrl, {
    method: "POST",
    headers: {
      "x-hasura-role": "anonymous",
      "Content-type": "application/json",
    },
    body: JSON.stringify({
      query: addCommentMutationtopic,
      variables: {
        topic,
        content,
        author,
      },
    }),
  })
    .then((res) => res.json())
    .then((res) => {
      if (res.errors && res.errors.length) {
        setError({
          error: errorMessage,
          details: res.errors[0].message,
        });
        return;
      }
      // ???
    })
    .catch((err) => {
      setError({
        error: errorMessage,
        details: err,
      });
    });
};
```

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.

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

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