Supercharge Your GraphQL Development with Hasura

GraphQL has gained immense popularity in recent years due to its flexible and efficient approach to API development. With GraphQL, you can fetch precise data from your server using a single request, reducing over-fetching and under-fetching of data. However, building a GraphQL API from scratch can be time-consuming and complex. That’s where Hasura comes in.

Hasura is an open-source engine that helps you instantly set up a GraphQL API on top of your existing database, making it incredibly easy to develop powerful and scalable applications. In this article, we’ll explore the features and benefits of Hasura and how you can leverage it to supercharge your GraphQL development.

Image from web

We are going to use docker to setup our hasura setup. Create a docker-compose.yml file and add the below code to it:

version: '3.8'
services:
  postgres:
    image: postgres
    restart: always
    environment:
      POSTGRES_PASSWORD: <your_postgres_password>
    ports:
      - '5432:5432'
  hasura:
    image: hasura/graphql-engine:v2.1.0
    ports:
      - '8080:8080'
    depends_on:
      - postgres
    restart: always
    environment:
      HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:<your_postgres_password>@postgres:5432/postgres
      HASURA_GRAPHQL_ENABLE_CONSOLE: 'true'
      HASURA_GRAPHQL_ADMIN_SECRET: <your_admin_secret_key>

First we pulls the official PostgreSQL Docker image, sets the container to restart automatically, and sets the PostgreSQL database password using the POSTGRES_PASSWORD environment variable. The ports section maps the container's PostgreSQL port 5432 to the host machine's port 5432, allowing you to access the database locally.

Second section defines the Hasura service. It pulls the Hasura GraphQL Engine Docker image, sets the container to restart automatically, and maps the container’s port 8080 to the host machine’s port 8080, allowing you to access the Hasura console locally.

The depends_on section ensures that the Hasura container starts after the PostgreSQL container. The PostgreSQL container is referenced using the service name postgres, which matches the service name defined earlier.

The environment section sets environment variables for the Hasura container. HASURA_GRAPHQL_DATABASE_URL specifies the connection URL to the PostgreSQL database, where postgres://postgres:your_postgres_password@postgres:5432/postgres indicates the username, password, hostname (postgres is the service name), port, and database name.

HASURA_GRAPHQL_ENABLE_CONSOLE is set to 'true' to enable the Hasura console, which provides a web interface for managing the GraphQL schema and exploring the database.

HASURA_GRAPHQL_ADMIN_SECRET is the admin secret key that will be used to authenticate and access the Hasura console.

Docker containers are started using

docker-compose up -d

The PostgreSQL and Hasura services will be running, and you can access the Hasura console in your web browser at http://localhost:8080/console

Load sample data

Let’s add some sample data to our Postgres database. You can download the sample data from here.

Once data is downloaded, open pgadmin, or dbeaver for interacting with your database. I’m using DBeaver. Open dBeaver.

Create a connection to your database:

Enter details accordingly.

Create a new database with name dvdrental before we import our sample data. Right click on the database.

Click on Restore to import data

Select the file location in your system.

Click on start. Your data shall we restored in the database.

Now , let’s get back to hasura and track our tables. http://localhost:8080

It will ask you to enter your admin secret that we have configured in the docker-compose.yaml file, you can take it from there and enter it here.

Once you are done , you’ll see the dashboard.

Click on DATA in the top nav bar. You’ll see something like this:

It directly pull our tables from the connected database. Initially all the tables are untracked in hasura, We need to track the ones that we want the hasura to access .

For this demo, i’m going to track all our tables. You can click on Track All button.

Once you track them, they are ready to be used. One thing to note here, it only tracked the tables, we need to track the relations as well so that we can access them.

Now head back to the dashboard by clicking on the API tab in the nav bar.

Now, as you can see, it automatically gives you the query and possible combinations:

Let’s try something. Let’s try to fetch all the movies. As you start typing you’ll get all the possible keys, relations that we can use. Pretty Cool right.

With simple GRAPHQL query, you can get the desired data from the database without writing those complex SQL statements.

You can try for your self and let me know your experience. Hasura is very poweful but need to use it securely and you are exposing the direct connection to the database to the frontend. In the next blogs, we’ll go through How we can add authorisation, how you can use your JWTtoken to manage access the tables.

In the next blogs, we’ll also go through using HASURA with Remote MONGODB atlas.

Conclusion

Hasura is a game-changer when it comes to GraphQL development. With its powerful features, intuitive console, and seamless integration with existing databases, Hasura allows developers to rapidly build scalable and real-time applications. Whether you’re a beginner or an experienced GraphQL developer, Hasura can significantly simplify and accelerate your development workflow. So why not give it a try and supercharge your GraphQL projects with Hasura?

Stay tuned for more to come, subscribe for more informative content. :)