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

Using React Testing Library and Jest to Test Hooks and Components

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

---
title: Using Hasura to Generate GraphQL APIs and Protect Data
isPublicLesson: false
description:
  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!
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/rxw99luoxg
---

import { Svg } from '~/components/Svg';

import { HasuraIntroDiagram } from '~/components/HasuraIntroDiagram';

As we mentioned in the previous lesson, Hasura can generate GraphQL APIs from
our database. It means that we don't have to build a GraphQL server on our own!
Hasura connects to databases (or other GraphQL services) and provides us with a
GraphQL API. In this lesson, we're going to explore Hasura's basic
functionalities and see them in action!

<Svg>
  <HasuraIntroDiagram />
</Svg>

### How does Hasura work?

Under the hood, Hasura compiles a GraphQL query into a single SQL query. We
introduced new words, so let's quickly see what they mean.

> An **SQL** — Structured Query Language — is a query language for managing data
> held in databases.
>
> A **compiler** is a program that translates code written in one programming
> language into another language.

![](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-fullstack-comments-with-hasura-and-react/module_01/lesson_01.02/public/assets/compiler.png)

Hasura comes with more features than automatic GraphQL APIs generation. In this
course, we're going to learn about role based permissions system. It lets us
protect our data and restrict access to it.

### Spinning up a new Hasura project

There are various ways to "have" our own Hasura instance. We can self-host it —
deploy it to any platform we wish, e.g., Heroku, Digital Ocean, etc. Or, we can
use [Hasura Cloud](https://cloud.hasura.io/), which offers hosting for the
Hasura projects and takes care of managing the infrastructure for us.

We will use the second option in this course as it's the most straightforward,
and their free tier covers all of our needs to implement the commenting system.

We need to visit [Hasura Cloud Dashboard](https://cloud.hasura.io/) in order to
start using Hasura. You'll need to create a new account first. You can sign up
with GitHub, Google, or using email and password.

![](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-fullstack-comments-with-hasura-and-react/module_01/lesson_01.02/public/assets/1-hasura-cloud.png)

After successfully logging into the Cloud dashboard, you'll see a welcome modal
and a new project that was created for you out of the box.

We can go see the details of the project. On the main screen, there is basic
project information, including the GraphQL endpoint URL. On the left sidebar
navigation, we can see:

-   **Collaborators** — we can invite other people to our project.
-   **Env vars** — if needed, we can update environmental variables — e.g. if we
    need to enable or disable some Hasura features controlled via env vars.
-   **Domains** — we can connect the project to a domain that we own.
-   **Usage** — provides basic project usage metrics.
-   **Integrations** — allows us to integrate our project with monitoring systems
    like [Datadog](https://www.datadoghq.com/) or
    [New Relic](https://newrelic.com/).

![](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-fullstack-comments-with-hasura-and-react/module_01/lesson_01.02/public/assets/4-new-project.png)

### Creating a new database and a sample table

In the right top corner, there's a `Launch Console` button. Clicking it opens a
Hasura Console application. It's an admin dashboard to configure the databases
and additional Hasura's features. In other words, it's a GUI for the underlying
backend responsible for generating the GraphQL APIs.

![](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-fullstack-comments-with-hasura-and-react/module_01/lesson_01.02/public/assets/5-console.png)

In our newly created project, we don't have any database connected yet. However,
Hasura provides us with one-click Heroku integration, which will create a
database for us, and Hasura Console will take care of connecting it to the
Hasura backend. Let's do it then!

When you click on the **Data** button in the top navigation bar, Hasura Console
will take you to the Connect Database section. Let's click the **Create Heroku
Database** tab and then the big button with Heroku's logo.

Note: This will require having an account on Heroku. If you don't have one, you
can quickly create it for free.

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!

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

Lesson 5: (9:20)

Using React Testing Library and Jest to Test Hooks and Components

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

Using Hasura to Generate GraphQL APIs and Protect Data