Front-end frameworks such as Angular and React are very much popular among developers as they have a ton of features and advantages. One of them is allowing us to build Single Page Applications.
Almost all of these applications need to integrate APIs in it and for that front-end developers have a lot of dependencies with the back-end developers. You might have to wait for days to get an API and once you get it there are a lot of things that you might need to be updated in the API. That again makes you wait for another few days.
To solve this problem, a few guys came up with the idea of building an open-source platform leveraging the power of GraphQL. It’s a powerful tool that provides a fast and easy way to create scalable and secure GraphQL APIs.
The platform is built using several popular technologies like PostgreSQL, Node.js and GraphQL. Hasura lets developers build their own powerful APIs as they want using a robust database schema builder, an API explorer.
We can connect to a variety of database systems within no time and create schemas, and tables, adding relationships all from the console that it provides with writing the old school SQL.
Supported databases are as follows:
- Allow DB
- Big Query
- Citus
- CockroachDB (beta)
- MS SQL Server
- Postgres
Once the tables are built, and relations are established, we can fetch the data from the tables using GraphQL, which is an explorer allowing us to construct graphql queries and mutations.
Queries are to fetch the data from the tables and mutations are to insert, update and delete. Hasura builds most of the queries and mutations on its own based on the database tables and the relations. We just need to select the query, check some checkboxes and the query is automatically built.
For e.g., If we have a table named frameworks which contains information about different type of frameworks, Hasura creates queries named frameworks, frameworks_aggregate and frameworks_by_pk.
frameworks have columns names from the table which can be selected to build select query, like
query {
frameworks {
id
framework_name
inception_date
}
}
This query will return an array of frameworks:
{
data: {
frameworks: [
{
id : 0,
framework: ‘Angular’,
inception_date: ‘2023-02-21’
},{
id : 1,
framework: ‘Django’,
inception_date: ‘2023-02-21’
}]
}
}
frameworks_aggregate – used to get count of frameworks in the table
query {
frameworks_aggregate {
aggregate {
count
}
}
}
frameworks_by_pk – used to get data from frameworks table by primary key
query {
frameworks_by_pk(id: 1) {
id
framework_name
inception_date
}
}
Hasura also creates mutations such as insert_frameworks, delete_frameworks, update_frameworks etc.
insert_frameworks- Inserts a new framework into the frameworks table.
mutation {
insert_frameworks(objects: {framework_name: “React”, id: 2, inception_date: “2022-02-12”}) {
returning {
id
}
}
}
update_frameworks- Updates a frameworks inception date for id equals 2.
mutation {
update_frameworks(where: {id: {_eq: 2}}, _set: {inception_date: “2022-06-24”}) {
returning {
id
}
}
}
delete_frameworks- Deletes a framework from the table for id equals 1
mutation {
delete_frameworks(where: {id: {_eq: 1}}) {
returning {
id
}
}
}
And even more interesting is the fact that we can convert those queries and mutations to REST APIs with a single button click, that’s how powerful Hasura is.
So, in a nutshell, it’s a powerful tool to write queries and build APIs out of it in a flash.
Awesome, isn’t it?
I’m tired of praising Hasura and its power, let’s see it in action.
Step 1: Get the compose file and start the containers
We will have Hasura in Docker, so let’s first get Docker to compose a file for it.
curl
https://raw.githubusercontent.com/hasura/graphql-engine/stable/install-manifests/docker-compose/docker-compose.yaml -o docker-compose.yml
or for those who’re using wget, use:
https://raw.githubusercontent.com/hasura/graphql-engine/stable/install-manifests/docker-compose/docker-compose.yaml
This will download a docker-compose.yaml file.
Run the following command to start both the Hasura GraphQL Engine and the postgres database in Docker containers:
docker compose up -d
Confirm if the container is running using the following command
docker ps
This command will show all the currently running containers. In the above image, we can see that two containers are up and running:
- Hasura graphql engine – @ port:8080
- Postgres
Step 2: Connect a database
Open the Hasura console by navigating to http://localhost:8080/console. From the console, click on the Data tab:
Select Environment Variable option and enter PG_DATABASE_URL which is the default env name in the docker-compose file for the DB URL and then click on Connect Database button.
Step 3: Try out Hasura
Once the DB is connected, we can create tables, navigate to Data -> Create Table and we can create tables from the UI itself without writing any SQL.
Now, insert some values into it using the Insert Row option.
Now, try out a query by navigating to the API tab in the console and try running the following query.
Similarly, we can insert data into the table using mutations from the API console itself.
So, this is the way to implement and powerful Hasura, which helps a lot of front-end developers to end the backend dependencies.
