A Step-by-Step Guide to Hasura for UX Designers
Nikhil Kumar, Software Engineer
Today’s post is about the step-by-step process of using Hasura. If you missed the first post in this series, we discussed how GraphQL can save time and effort when it comes to UX iteration.
As stated in our earlier post, Hasura GraphQL Engine is an open-source service that connects your databases and microservices and auto-generates a production-ready GraphQL backend.
In this post, we’ll explore the features of Hasura and how to set up the Hasura environment for GraphQL to perform queries and mutations over schemas/tables.
As a non-dev team member, you’ll most likely be invited to the pre-configured Hasura dashboard by your dev team member.
Hasura has great documentation that covers almost everything you need to know. But from a designer perspective, I thought a post like this would be a good start to understanding the technical documentation.
Before we start: Hasura offers a variety of plans at different price points. It even has a free version that’s free forever. The free plan is suitable for small projects and development/staging environments. For exploring Hasura’s features, this is our choice. You can review their other plans here.
Getting Started with Hasura
First, create an account. Click the “Create Free Account Now” button.
Once you’re done with registration, you’ll be redirected to your dashboard.
Click “Create My First Project”. We have two options:
- Enter database URL
- Try with Heroku
For this demo we’re going to use the Heroku version. Heroku is a container-based cloud Platform as a Service (PaaS) used by developers to deploy, manage, and scale modern apps. Click the Heroku button. If you’re already logged in with Heroku, Hasura will continue creating your app. If not, create your account on Heroku. When you’re done, come back to Hasura and click the Heroku button. Hasura will set up your project with a random name and url.
You should see something like the below:
Click “Launch Console”. This will open a new tab with the GraphQL Console.
Let’s set up a few tables/schemas. Although this is usually the developer’s work, let’s give this a try since we’re learning how it all works.
Click the “Data” tab from the top menu.
Click the “Create Table” button and set up the fields like below. For this exercise, let’s create a table named “Student” comprised of student records. Don’t forget to make the Id column a primary key.
Primary key is used to uniquely identify a record and can be used only on one column of a table.
Click the “Create” button at the bottom of the screen.
Now that we’ve created a table, let’s add some records to it.
Notice that here you don’t have to fill in the Id field because we made it unique and added a default parameter there, gen_random_uuid(). Hasura automatically generates a unique UUID for us.
Click the “Save” button. We just inserted one record in the “Student” table.
Let’s repeat the process and insert all the records from our first blog post.
Now, let’s create another table and call it “final_grades”. In this table, we have to create two keys, primary key and foreign key.
Foreign Key is used to create relationships with other tables. In our case we will create a foreign key relationship of “final_grades” tables’s student Id with the Id column of “Student” table.
In the second section, select “restrict” both under “On Update Violation” and “Delete Violation”.
Save. Now, let’s jump to the “Relationships” tab of “Student” table.
Click “Save” to create this relationship between both of our tables.
Why are we doing this? Because we want to see “final_grades” of the student, but the grades are in a different table (in our case “final_grades”), so to query the mutual or collaborative data from two tables, we have to create a relationship between them.
If you view “Student” table now, you’ll see there’s a new column called “final_grades”.
Click the “View” link and you will see the grades of that particular student.
However, the “final_grades” column has no data. This is because we have to enter the data for each student: their final grades along with the student id. So let’s copy the “student_id” of student Max and insert the record in the “final_grades” table, like below.
What we’ve just done is set up schemas and their relationships.
Using GraphQL to Perform Queries
Until this point, we haven’t even touched GraphQL. Now, let’s use GraphQL to perform queries. If you haven’t already, read the first post of this series, where we discussed the basics of GraphQL.
Let’s take a look at the components of this interface.
- GraphiQL is the section where we write the GraphQL queries.
- Queries Explorer. This is really helpful and makes it faster to write different queries and mutations. These are basically suggestions, which can be used directly by clicking on any of them. Your selections will then appear in the GraphiQL section.
- That is the output window. Any result after executing queries will appear in this section.
- This is GraphQL API, which can be used by developers to interact with the data/tables we created.
- This section is for providing the query variables, like arguments in functions. We won’t be using it in this post.
- This section is used for setting up the headers in API requests, like content-type, security credentials, etc.
How to execute queries and get results
1. Fetch all records from the “Student” table
Write the query as above and click the “play” button. It will return all the records of the “Student” table.
2. Fetch a particular record by primary key
3. Fetch the final grades of a student named Max, from the “final_grades” table with student name, blood type
Conclusion
GraphQL is a trending technology that’s been adopted by an increasing number of companies — and for good reason. In using GraphQL on client projects, we’ve found that it drastically increases the productivity for our whole team. I highly recommend it for all team members, including technical and non-technical. We also found Hasura to be one of the best tools for using GraphQL for its ease of use.
For UX designers, in particular, GraphQL allows them to easily check in and play around with data. Not only does this save time, but it gives designers the power to check the frequent changes in data and incorporate them into the UI. The ability to access the data themselves also gives designers a deeper understanding of the core of the product. Designers could even suggest improvements to the backend team, such as changing the type of data to improve the UX. In the end, this helps us create a stronger product with a better UI experience.
