Getting A Realtime GraphQL API in Minutes with Hasura
Tags: graphql, hasura, api, webdev
Published: 2020-03-23 05:40:21

---
title: Getting A Realtime GraphQL API in Minutes with Hasura
published: true
description: 
tags: GraphQL,
 Hasura,
 API,
 Web Development
---
 We live in a world where we want to try out our ideas so fast and building and setting up a good backend for Front end engineers is really difficult, that why we use BAAS(backend as a service) like Firebase, Hasura. To go further first we have to know what GraphQL and Hasura are.
#### What Is GraphQL?
GraphQl is a query language created by Facebook to query our data, which helps to solve the issue of over/under fetching and also helps with low bandwidth consumption of data. example of a query
```
 query {
    post{
      id
      title
      author{
        id
        name
      }
   }
}
```
To learn more [GraphQL](https://graphql.com)
#### What is Hasura?
Hasura is an engine that connects your Mirco-services and Database and generates a realtime GraphQl API(Application Programming Interface). That is really super 😎 and 🤯, the most amazing thing is Open source.
To learn more [Hasura](https://hasura.io)
 &nbsp; &nbsp; In this series, we would be focusing on building a Todo list app using Hasura, Postgres, and Gatsby.js but in this part, we would focus on generating our API and later series we would be using Gatsby for the consumption of the GraphQL API.
&nbsp; To get started you go to [hasura](https://hasura.io/docs/1.0/graphql/manual/getting-started/heroku-simple.html) and click the button deploy to Heroku which deploy the backend in 30 seconds.

![Alt deploy to heroku](https://dev-to-uploads.s3.amazonaws.com/i/qtfji0nmgi5katedh3r4.png)
After you sign-in, you would be asked for the app name and region you want the server to be, I would be using ``todolist-gatsby-app`` as name and ``United Stated`` as my region, choose what best for you then click deploy
![Alt app-setup](https://dev-to-uploads.s3.amazonaws.com/i/2res89rogcoefdlb3l92.png)
After the deploy is done you click on the ``view`` button which displays a Dashboard with GraphiQL UI and a Data UI where you can create a table and query your database.
![Alt dashboard](https://dev-to-uploads.s3.amazonaws.com/i/op02syvdkfu5h1sgb668.png)
you should have something like the screenshot above. Go to the Data menu and add the following field shown in the photo below and click the Add table button.
![Alt table](https://dev-to-uploads.s3.amazonaws.com/i/vn2r7lq92nkm4cq5ez5q.png)
That all you need to create a graphQL API, now we go to the GraphiQL menu tab and we can query and mutate our todos table.
Let add data to your todos table by adding this mutation
```
mutation {
  insert_todos(objects: {name: "Learn more about Hasura", completed: false}){
    affected_rows
  }
}
```
while to query our table you use this
```
  query MyQuery {
  todos{
    id
    name
    completed
  }
}

```
and you get back this
```
  {
  "data": {
    "todos": [
      {
        "id": "524e3f9a-9033-497a-982c-78543f8b1c46",
        "name": "Learn more about Hasura",
        "completed": false
      }
    ]
  }
}
```
This is where we would be stoping for today. Thanks for reading and don't forget to follow me to get notified for next part of the series 😎.