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

---
title: Introduction to GraphQL
privateVideoUrl: https://fullstack.wistia.com/medias/q07h2ze7ua
isPublicLesson: false
description:
  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.
useMdx: true
---

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

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

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

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

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

In the course introduction, we mentioned that we're going to use a Postgres
database to store our comments. In our application, we need to be able to do two
things:

1.  Add new comments — insert new entries to the database.
2.  Display the comments in the UI — extract them from the database.

But how exactly do we communicate with the database from a frontend application?

That's where Hasura comes into play! It will generate GraphQL APIs from a
database. That way, from the frontend (client), we will communicate with Hasura
through GraphQL, and beneath, Hasura will handle accessing the database.

<Svg>
  <HasuraAppFlow />
</Svg>

And since we're going to use GraphQL, let's first talk about it a bit.

## What is GraphQL?

> _GraphQL is a query language for APIs and a runtime for fulfilling those
> queries with your existing data. GraphQL provides a complete and
> understandable description of the data in your API, gives clients the power to
> ask for exactly what they need and nothing more, makes it easier to evolve
> APIs over time, and enables powerful developer tools._
>
> <https://graphql.org/>

When we're working on an application that requires resources stored in a
database, we don't directly access the database from the frontend code — we have
a server for it.

> **Why we don't access a database directly from a frontend application?**
>
> If we were to connect a frontend application to a database, we would need to
> put the database credential in the frontend code. However, the frontend code
> is accessible to everyone, which would cause the credentials to leak. Users
> can't access the server code, so we put the database connection code there.

The client sends requests to the server to fetch or modify data. The server
handles these requests — accessing the database and possibly performing some
additional logic. Then it returns a result to a client. It can be, for example,
a list of items that the client application wanted to fetch or a message that
the request was successful (for example, after creating a new item). If
something goes wrong, the server will return an error message. A common way to
handle client-server communication (and you might be familiar with it) is using
REST APIs. Let's quickly take a look at it!

### A quick recap of REST APIs

<Svg>
  <RestFlow />
</Svg>

With REST APIs, the client sends a request to a particular endpoint to access a
particular resource. It needs to be sent using an HTTP method expected by the
server — GET, POST, PUT, PATCH, or DELETE. The request body and the response
format are usually agreed upon between the frontend and backend teams. The
backend team implements and exposes APIs that frontend applications can use. A
sample list of endpoints can look like this:

<Svg>
  <RestTable />
</Svg>

### Moving to GraphQL

A GraphQL server exposes **one endpoint** and accepts **POST requests**. The
body of the request is expected to be a stringified JSON object that contains a
`query` and `variables` property, for example:

```js
// POST request body
{
  query: `
    query GetUser($id: ID!) {
      id
      name
    }
  `,
  variables: { id: 1 }
}
```

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.

It looks like the list of endpoints isn't loading here.

sarahschedler

A
sample list of endpoints can look like this:

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

Introduction to GraphQL