Todos Table

We need a table to store the todos that our application will manage, and also correct permissions on querying and inserting them. Hasura Console to the rescue.

Hasura Console is where you manage your project's database and GraphQL API.

Go to Hasura. Go ahead and copy Hasura's Admin secret and use it to login to the Hasura console.

If you are not familiar with the Hasura Console, now it is a good time to click around and explore.

Click on DATA tab on the top menu, and click on Create Table.

We'll create a todos table:

For the id and created_at you should use the Frequently used columns option. This ensures correct name, type and default values for those columns. It's a quick way to get started creating a new table.

The other columns, name and is_completed, you need to add manually (see the image bellow). Make sure you set the default value for is_completed to false.

Scroll down and click Add table.

To make sure we have a working GraphQL API, we will now insert two todos. Click the Insert Row tab and create two todos by specifying a name and clicking on Save (see the animation bellow).

Once you've added the todos, go the GraphiQL tab to query the data. Copy-and-paste the following query and click the play button.

query {
  todos {
    id
    created_at
    name
    is_completed
  }
}

You should see your todos to the right as a response.

Right now, the only way to query todos is by using the admin role with an admin-secret (x-hasura-admin-secret). We are going to change that behavior so that anyone (public) is able to insert and select todos.

In the Hasura Console, go to your todos table and click on Permissions. We will set insert and select permissions for the public role.

The public role is used by users that are not logged in.

Row insert permissions should be set to Without any checks and Column insert permissions should only have name checked.

Row select permissions should be set to Without any checks and Column select permissions should have all columns checked.

Anyone can now insert and select todos. This is not secure, but it's a good start. We will secure our backend later when we add authentication.

Frontend Web App