What the hell is 👿 Hasura 👿
Tags: javascript, webdev, programming, beginners
Published: 2022-05-18 20:25:22

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 ! 
![Vanish](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44w84avvjkkk6191opcj.gif)

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. 
![Hasura Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1bki0jho34b4ffrs3jt.png)
 
## What you already need to know before you start

1.You need to know how api's work [Nice Video](https://www.youtube.com/watch?v=cuEtnrL9-H0)

2.How Graphql works [100 second video about graphql](https://www.youtube.com/watch?v=eIQh02xuVw4) 

3.Very Basics of Apollo Client (just go with it) [Nice Video on basic setup for apollo client](https://youtu.be/YyUWW04HwKY)

## 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](https://aws.amazon.com/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](https://warm-pasca-cb3c6c.netlify.app/gamepage) ( 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](https://github.com/sashaboi/cards-game). 

Now in Hasura I made a postgres database linking my heroku account and made a table called LeaderBoard:
![Leaderboard table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nn89d6apsjflwwceard0.png)
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](https://www.npmjs.com/package/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](https://www.apollographql.com/docs/react/get-started) 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 :
![Hasura dash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mx4hcihlh3j2pibwudq.png)
 
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](https://twitter.com/i_am_onkar) and see my [github](https://github.com/sashaboi/)
Until next time...