---
title: "Building applications with Hasura"
url: "https://docs.yugabyte.com/stable/integrations/hasura/hasura-1/"
---

# Building applications with Hasura

Use the [Hasura GraphQL Engine](https://hasura.io "Hasura GraphQL Engine") with YugabyteDB to power your GraphQL applications with a distributed database.

For details on using Hasura, see the [Hasura GraphQL engine documentation](https://docs.hasura.io "Hasura GraphQL engine documentation").

## Prerequisites

Before using Hasura with YugabyteDB, perform the following:

- Install and start YugabyteDB, as described in [Quick Start Guide](/stable/quick-start/macos/ "Quick Start Guide").
- Install and start Hasura by following instructions provided in the Hasura [Quick Start with Docker](https://hasura.io/docs/latest/graphql/core/deployment/deployment-guides/docker.html "Quick Start with Docker"). The configuration should be similar to PostgreSQL, except that the port should be `5433`. For a local Mac setup, the configuration should be as follows:
  
  ```sh
  docker run -d -p 8080:8080 \
    -e HASURA_GRAPHQL_DATABASE_URL=postgres://postgres:@host.docker.internal:5433/yugabyte \
    -e HASURA_GRAPHQL_ENABLE_CONSOLE=true \
    hasura/graphql-engine:v1.3.3
  ```
  
  In the preceding command, `v1.3.3` refers to the version of `hasura/graphql-engine` you are using; you can change it to a different version as per your needs. `@host.docker.internal:5433` is a directive to Hasura to connect to the 5433 port of the host that is running the Hasura container.
  
  Alternatively, you can connect YugabyteDB to [Hasura Cloud](https://cloud.hasura.io/ "Hasura Cloud"). For more information, see [Getting Started with Hasura Cloud](https://hasura.io/docs/latest/graphql/cloud/getting-started/index.html "Getting Started with Hasura Cloud").
  
  Examples provided in this document are based on a local installation of Hasura.

## Creating tables

You can add tables to the database that you specified in the `HASURA_GRAPHQL_DATABASE_URL` setting in your Hasura installation. You can also create relationships between these tables. To do this, open Hasura on http://localhost:8080 and perform the following:

01. Select **DATA** and click **Create Table**, as per the following illustration:
    
    ![DATA tab in Hasura UI](/images/develop/graphql/hasura/data-tab.png "DATA tab in Hasura UI")
02. Create a table called `author` that has two columns (`id` and `name`) by completing the fields shown in the following illustration:
    
    ![author table form](/images/develop/graphql/hasura/author-table.png "author table form")
03. Click **Add Table**.
04. Navigate back to **DATA** and click **Create Table** again.
05. Create a table called `article` that has five columns (`id` , `title`, `content`, `rating`, `author_id`) with a foreign key reference to the `author` table, by completing the fields shown in the following illustration:
    
    ![article table form](/images/develop/graphql/hasura/article-table.png "article table form")
06. In the **Foreign Keys** section, click **Add a foreign key** and complete the fields shown in the following illustration:
    
    ![foreign keys form](/images/develop/graphql/hasura/foreign-keys.png "foreign keys form")
07. Click **Save** on the foreign key configuration.
08. Click **Add Table** at the bottom.
09. Navigate back to **DATA**.
10. To create an object relationship, use the left-side menu to navigate to the `article` table, then select **Relationships**, as shown in the following illustration, then click **Add** and **Save**.
    
    ![relationships form](/images/develop/graphql/hasura/relationships.png "relationships form")
11. To create an array relationship, use the left-side menu to navigate to the `author` table, then select **Relationships**, as shown in the following illustration, then click **Add** and **Save**.
    
    ![array relationships form](/images/develop/graphql/hasura/relationship-array.png "array relationships form")

Finally, load sample data, as follows:

- On the command line, change your directory to the root `yugabyte` directory, and then open ysqlsh to connect to the YugabyteDB cluster, as follows:
  
  ```sh
  $ ./bin/ysqlsh
  ```
- Copy and paste the following YSQL statements into the shell and then press **Enter**:
  
  ```sql
  INSERT INTO author(name) VALUES ('John Doe'), ('Jane Doe');
  INSERT INTO article(title, content, rating, author_id)
  VALUES ('Jane''s First Book', 'Lorem ipsum', 10, 2);
  INSERT INTO article(title, content, rating, author_id)
  VALUES ('John''s First Book', 'dolor sit amet', 8, 1);
  INSERT INTO article(title, content, rating, author_id)
  VALUES ('Jane''s Second Book', 'consectetur adipiscing elit', 7, 2);
  INSERT INTO article(title, content, rating, author_id)
  VALUES ('Jane''s Third Book', 'sed do eiusmod tempor', 8, 2);
  INSERT INTO article(title, content, rating, author_id)
  VALUES ('John''s Second Book', 'incididunt ut labore', 9, 1);
  SELECT * FROM author ORDER BY id;
  SELECT * FROM article ORDER BY id;
  ```

## Running GraphQL queries

To run GraphQL queries, return to Hasura and click **GRAPHIQL**.

You can query the database using the object relationship. The following example shows how to obtain a list of articles and sort each article’s author in descending order and by rating:

```graphql
{
  article(order_by: {rating: desc}) {
    id
    title
    author {
      id
      name
    }
  }
}
```

![Relationships form](/images/develop/graphql/hasura/query-relationship-object.png "Relationships form")

You can also query the database using the array relationship. The following example shows how to obtain a list of authors and a nested list of each author’s articles where the authors are ordered by descending by the average ratings of their articles, and their article lists are ordered by title:

```graphql
{
  author(order_by: {articles_aggregate: {avg: {rating: desc}}}) {
    name
    articles(order_by: {title: asc}) {
      title
      content
      rating
    }
  }
}
```

![query array relationship](/images/develop/graphql/hasura/query-relationship-array.png "query array relationship")

## Clean-up

Optionally, you can stop YugabyteDB and Hasura, as follows:

- Stop the YugabyteDB cluster by executing the following command:
  
  ```sh
  ./bin/yugabyted stop
  ```
- Stop the Hasura container by executing the following command:
  
  ```sh
  docker stop <container-id>
  ```

To list running containers, execute the following command:

```sh
docker ps
```