Creating the comments table
In this lesson, we'll create a comments table and learn a bit about databases along the way.
In previous lessons, we covered GraphQL basics, and we learned about Hasura. We
also created a new Hasura project and played a bit with its functionalities. In
this lesson, we're going back to implementing the commenting systems. We will
use the project created in the previous lesson and create the comments
table
there.
Table's content#
This is an example comment form to help us visualize what data we need to store in the database. It has two inputs to get information from a user and a submit button:
Let's look at the comment form and list down what columns we need in thecomments
table.
author
— comment's author identifier. It could be a name, email, or username, however a user would like to introduce themselves. We could go more granular here and create separate columns like name, surname, and email, but a single author column is good enough!content
— comment's message.
These two columns are the data from the form, and that could be enough. However, we may need a bit more:
created_at
— date when the comment was added. It will be important for us to sort the comments by the posting date. The value can be sent from the frontend application or generated by the database.topic
— identifier of a post or another content that was commented on. Imagine that you have a blog, and users can add comments to each blog post. You'd need a way to identify which comments belong to a particular post. By storing the topic id, the comment is assigned with a particular resource (e.g., blogpost). An example of a topic could be:my post about cats
.
Creating the table in Hasura Console#
Now, let's go back to our Hasura project and go to the Create Table page. We're going to fill the form with the information about columns.
We need to provide column names and column types. For columns author
,content
and topic
, we'll go with type text
, which allows storing strings
of any length.

This page is a preview of The newline Guide to Full Stack Comments with Hasura and React