Using Hasura to Generate GraphQL APIs and Protect Data

[00:00 - 05:35] Hi and welcome to our next class. In this lesson we're going to learn about Hasura and play a bit with its features and writing GraphQL queries and petitions. This knowledge will let us move on to the commenting system. So let 's get started. 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 a database or other GraphQL services and provides us with a GraphQL API. In this lesson we're going to explore basic Hasura's functionalities and see them in action. 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 stands for Structured Query Language and it's a query language for managing data hold in a database. A compiler is a program translating code written in one programming language into another language. In our case the first language is GraphQL and the output language is SQL. You can take a look at the following example and for a query that takes users, the related posts and tags, it converts to a single SQL query which joins tables users posts and tags and takes the required data. The SQL query is not 100% exactly what's going to be generated by Hasura but it's more or less what it's going to happen. Hasura has an analyzer tool that will let you see the exact query generated from a GraphQL one. Hasura comes with more features other than automatic GraphQL API generation. In this course we're going to learn about role-based permission systems and it will let us protect our data and restrict access to it. Let's spin 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, for example hero crew digital ocean and so on or we can use Hasura cloud 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 one and their free tour covers all of our needs to implement the commenting system. To create a new project we need to visit Hasura cloud dashboard. You will need to create a new account first. You can sign up with GitHub Google or using email and password. I'm already signed up so please post for a second to create the account and see you in a bit. After successful logging into the cloud dashboard you will see that Hasura already created a new project for you so that we can get started even faster. When you click on the new project it will open a new page with its details. On the main screen there is a basic project information including the GraphQL endpoint URL and so on. On the left sidebar navigation we can see collaborators we can invite other people to our project, environmental variables. If needed we can update environmental variables for example if we need to enable or disable some Hasura features controlled via an verse. There's also a domain section we can connect the project to a domain that we own. There's a usage. It provides basic project usage metrics and integrations it allows us to integrate our project with monitoring systems like data doc or neural. 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 database and additional Hasura's features. In other words it's a UI for the underlying backend responsible for generating the GraphQL APIs. In our newly created project we don't have any database connected yet. However Hasura provides us with a one click Heroku integration which will create a database for us and then Hasura console we take care of connecting it to Hasura backend. When you click on the data tab 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 the Heroku logo. This step will require having an account on Heroku. If you don't have one you can quickly create it for free. When the new database has been created and connected to our Hasura we can see it displayed on the left sidebar with the name default. Below in the tree we can see a public schema. What it is schema? You can think of schemas as folders containing database objects such as tables, views, functions, indexes and so on. For a new database Postgres automatically creates a default schema named public. Since we haven't added any new objects yet we can see it as an empty folder in the Hasura console. Let's click on the create table button and add our first table. Clicking on the create table button opens the form when we need to provide a few pieces of information. The first one is table name. I will go with users but feel free to provide any name that you want. This is our test table so it doesn't matter what name it has. Then we have columns. We need to specify what data I want to store in this table. The first one that I'm adding is an ID column. I want each user to have a new unique ID assigned.

[05:36 - 07:05] Since my table is called users I will also add name and age columns. From the column type dropdown you can choose from a set of available types. The next part is setting a primary key. By specifying it we let Postgres know which columns should be used as a unique identifier of tables records. We're going to skip the remaining fields right now as they are not mandatory and we'll click the add table button. After submitting the form we will be redirected to the tables page. The GraphQL APIs to query and change data are already generated. Hasura did it out of the box when we created the table. On the tables page we can see multiple tabs. The first one browse rows displays the data in the underlying table. We don't have any data yet so it's empty. We can add new rows using the GraphQL API or we can use the Hasura console UI to do it. Let's go with the second option right now to get ourselves more familiar with the console application. We need to go to the insert row tab and fill a few inputs with the data we want to insert. I will create a few sample users. You can click save and then you will go back to the browser list app and see the data up here there. As we added new records to the table we can now try out the GraphQL API and perform some queries to retrieve the data. We can do it from the Hasura console if we go to the API tab in the top navigation.

[07:06 - 07:23] In there we can see a graphical IDE and on the left side there is a graphical explorer. We can use it to construct queries interactively. Remember when I mentioned in the previous lesson about GraphQL being introspective and different tools leveraging it to generate types?

[07:24 - 08:07] GraphQL explorer and graphical IDE are taking advantage of it as well. That's how the former knows what checkboxes and inputs render and the letter gives us fully flesh out of completion. Going back to our data, let's write a sample query to fetch users from the database. However, I'm interested only in a user of a particular ID. That's why I'm constructing the query to take a variable. After writing the query I can click the play button and see the results on the right side. I'd like to encourage you to pause for a bit and try a few more queries yourself. Take your time and play around with GraphQL. Let's move on to mutations for a moment.

[08:08 - 08:37] Previously we were using the Hasura console to insert entries to the database. Now we can do it with GraphQL. You can use the explorer to create a mutation or we can type it manually. This is how the mutation could look like. I will pass age and name to the mutation and return all of the tables fields. Here I also encourage you to pause and write different mutations . You can insert some more data or you can edit the existing data. I want to show you one more thing.

[08:38 - 09:10] Hasura provides a permission system. Access rules are role based meaning we can set up different privileges for different roles. For example, Admin, Viewer, Editor and still on. They can be set for particular tables at actions like insert, update, select and delete. There are two types of permissions. Role level, you can restrict access to particular roles in a database. For example, when you want a user to only access roles where the role ID matches the user ID .

[09:11 - 09:55] Column level, we want to restrict access to a particular column. Let's straight out. We need to go back to the tables page and navigate to the permissions tab. In this example , we'll create a role viewer and configure its select permissions. Let's select without any checks options for role level permissions and that will mean that the user will have access to all roles. For column level access, we will select only the name column. We want users with role viewer only to see users' names and not see their ID and age. After saving the permissions, let's go back to the APA page and set a new header, "x hasura role", to viewer.

[09:56 - 10:24] Right after the new header is added, the content of the graphical explorer changed. We no longer see ID and age columns and we are no longer able to perform mutations. Since we only configured select permissions for a role viewer, it can only query data and it can perform adding modifications of the data. In this and the previous lesson, we covered the basics of GraphQL and Hasura. We played a bit of Hasura's features and writing GraphQL queries.

[10:25 - 10:33] It will let us move on to our commenting system. In the next lesson, we're going to create a a comments table and set permissions to it.