What the hell is 👿 Hasura 👿

You started your programming journey , made the famous "Hello World" appear and felt like you have conquered the world ! You learnt a little HTML , then went into a little Javascript , made a to do list , amazing !

But then you refresh and poof ! Everything is gone !

To keep your data , you realize you need a backend a server , and suddenly these words like Django, NodeJS, Server , Nginx, Apache, Postgres , SQL make you dizzy.

But don't worry, there is an easier way.

This open source marvel is what you can use.

What you already need to know before you start

1.You need to know how api's work Nice Video

2.How Graphql works 100 second video about graphql

3.Very Basics of Apollo Client (just go with it) Nice Video on basic setup for apollo client

What Hasura simplifies

What Hasura Simplifies , is management or creation of database (sql , mongo , postgres), setting up your own server (nginx , apache) , hosting of said server (aws, gcp , azure) .

What Hasura falls short of

Creating business logic, making your server itself do complicated operations on data, is out of question, as the server itself does not exist ! A way out here is using AWS Lambda or other server less tech to handle those needs.

Lets look at a quick example:

How I made a simple LeaderBoard in Hasura for my game :

I made a simple game here : game link ( It is a quickly spun up app forgive the styling)
Its is a simple card flipper memory game , made in React , here's the GITHUB repository.

Now in Hasura I made a postgres database linking my heroku account and made a table called LeaderBoard:

These things might sound alien , but are straight forward like the Next>Next>Next>install we do to install programs.

The table has three columns, a Name , which is a string, a score , which is a number , and an ID which is a UUID , is (auto generated at hasura's end)

Now when the Leaderboard api is to be called , we call this auto generated piece of Graphql query using apollo client for React, and tada ! we get all the leaders.

The specific query I ran was :

query getLeaderBoard {
    Leaders {
      Name
      Score
    }
  }

This returns the leaderboard with their names and scores.

You can modify these queries in your Hasura Dashboard like so :

Now , when someone wins the game, a useEffect fires another query , this time to add a player to the leaderboard.

mutation AddScore($Name: String!, $Score: Int!) {
    insert_Leaders_one(object: { Name: $Name, Score: $Score }) {
      id
    }
  }

This takes two arguments , one , the name of the player (taken from the user in a local state) and one score ( maintained in a state in the useContext.)

This api adds the player to the leaderboard.

Now to a very beginner beginner , this might be a lot. But it saves weeks of work setting up your backend, deploying it, and a lot of other things.

Now I will consider myself to be post-beginner and say Hasura is a too-good-to-be-true product and I look forward to using it even more !

Thanks for listening to me and you can get to me anytime on twitter and see my github
Until next time...