The Distributed SQL Blog

Thoughts on distributed databases, open source, and cloud native

Deploy a Real-Time Polling App with Hasura Cloud and Yugabyte Cloud

Ecosystem Software Engineer

Hasura is a leading vendor in the GraphQL ecosystem, offering a powerful alternative to REST for building microservices and mobile applications. Hasura’s open source GraphQL Engine connects to your database and instantly auto-generates a production-ready GraphQL API backend. YugabyteDB, the open source distributed SQL database, is a perfect complement to GraphQL giving you horizontal scalability, fault tolerance, and global data distribution in a single system. YugabyteDB eliminates many of the scaling and resilience limitations of a traditional monolithic RDBMS.

YugabyteDB offers a validated integration with Hasura, allowing developers to build applications that are highly available, scalable and geo-distributed – without the need to write backend code to handle data requests. In fact, YugabyteDB is the only distributed SQL database to provide integration and support for  GraphQL applications. Since both the Hasura GraphQL Engine and YugabyteDB are 100% open-source under Apache 2.0 license, developers can get started at no cost and benefit from the innovation velocity of vibrant open-source communities. They can deploy the software at scale on any public or private cloud, or use the fully managed public cloud services from the two companies. The technology integration between Hasura Cloud and Yugabyte Cloud provides a seamless experience in connecting the two services.

The best way to understand the simplicity of the integration is to see it in action by deploying one of Hasura’s sample applications, the real-time polling app, on Hasura Cloud and Yugabyte Cloud.

The “realtime-poll” app is built using React and is powered by Hasura GraphQL Engine backed by a Yugabyte Cloud YugabyteDB cluster. It has an interface for users to cast a vote on a poll and the results are updated in the on-screen bar chart, in real-time.

In this blog post, we will walk through the following steps to deploy the application:

1. Create free accounts on Husura Cloud and Yugabyte Cloud

2. Download the application code

3. Create a Hasura project and connect to the YugabyteDB database within the project

4. Install the Hasura console

5. Configure the Hasura project and apply the application’s database schemas modifying SQL
statements using Hasura migrations

6. Configure the application and run it

Let’s start.

1. Create free accounts on Hasura Cloud and Yugabyte Cloud

Visit https://hasura.io/cloud/ and click on the “Start Free” button. You will be taken to the cloud console, where you can sign up for a free Hasura Cloud account using your GitHub profile, Google account, or via email.

Hasura Real-time Polling App Blog Image 1

Next, visit https://cloud.yugabyte.com/register and sign up for a free Yugabyte Cloud account. Yugabyte Cloud offers a perpetual free-tier option that allows you to create a database cluster in a container environment in Google Cloud.

Once you verify your email and login to the Yugabyte Cloud console, go ahead and create a free tier cluster.

Hasura Real-time Polling App Blog Image 2

Once the cluster is created, click on “Go to Cluster” and click on the “Connect” button on the top right. Note down the database password, IP address, and port. This database cluster has a default database called yugabyte that we will use in our connection with our Hasura project later.

Hasura Real-time Polling App Blog Image 3

2. Download the sample application code

The Real Time Poll application is built using React and is powered by Hasura GraphQL Engine backed by a Yugabyte Cloud YugabyteDB cluster. It has an interface for users to cast a vote on a poll and the results are updated in the on-screen bar chart, in real-time using GraphQL Subscriptions.

In the command line, type:

git clone https

://github.com/yugabyte/yugabyte-graphql-apps

cd yugabyte-graphql-apps/realtime-poll

3. Create a Hasura project and connect to YugabyteDB

Switch back to the Hasura cloud dashboard and click on “New Project”. Select Free Tier, leave the default region, and give the project a name, e.g., “yb-realtime-poll”. Click the “Create Project” button.

Hasura Real-time Polling App Blog Image 4

Once the project is created, copy the admin secret to a clipboard. We will use it later when we configure the project in step 5.

Hasura Real-time Polling App Blog Image 5

Click Launch Console to launch the Hasura project console. In the console, select the Data tab in the top menu to manage database connections. In this blog post, we will connect to the database we created in the first step.

To do this, select “Connect Existing Database”.

Database Display Name: yb-realtime-polldb

Data Source Driver: PostgreSQL

Connect Database Via: Database URL

Database URL: postgresql://admin:<password>@<IP address>:<port>/yugabyte

Replace the password, IP address, and port with what you noted down in step 1.

Here’s an example URL: postgresql://admin:[email protected]:21301/yugabyte

Click Connect Database and wait for confirmation on the top right that the database has been connected.

Hasura Real-time Polling App Blog Image 6

Click on View Database. The schema should be currently empty.

Hasura Real-time Polling App Blog Image 7

4. Install the Hasura console

We will apply database migrations to our Hasura project using the Hasura CLI. To do this, let us first install the Hasura command line tool by following the instructions in Hasura documentation.

In Mac/Linux, you can use the following command:

curl -L https://github.com/hasura/graphql-engine/raw/stable/cli/get.sh
| bash

On a Mac, you can use Homebrew to do this:

brew install hasura-cli

Update the CLI to the latest version by using this command:

hasura update-cli--version v2.0.0-beta.2

5. Configure the Hasura project and apply migrations

In the terminal (command line), navigate to the hasura directory within the application directory.

cd hasura

Open config.yaml and change the value of two parameters, the “endpoint” and “admin_secret”.

endpoint:  https://yb-realtime-poll.hasura.app
admin_secret: <admin secret from Hasura dashboard>

The endpoint is of the form “https://<Hasura project name>.hasura.app”.  You can get the Hasura project name from the cloud console. This is the project you named in step 3. The admin_secret is the string you saved in step 3. Save the file and exit.

Next, go to the migrations directory and rename the default directory to the database display name in step three:

cd migrations
mv default yb-realtime-polldb

Return to the hasura directory and apply the migration.

cd ..
hasura migrate apply --database-name yb-realtime-polldb

This step creates the tables and views required for the polling application in the database.

Return to the Data tab in the Hasura project console. You should see a list of untracked tables or views. Click on Track All to allow the tables and views to be exposed over the GraphQL API.

Hasura Real-time Polling App Blog Image 8

Once the console refreshes, you will see a list of untracked foreign-key relationships. Track them as well so they are exposed via the GraphQL API.

Hasura Real-time Polling App Blog Image 9

Add a new Array relationship for poll_results table called “option” by clicking on the poll_results table:

poll_results . poll_id  → option . poll_id

Hasura Real-time Polling App Blog Image 10

Save the change.

6. Configure the app

Navigate to the realtime-poll/src directory and open apollo.js.

Edit  the constant HASURA_GRAPHQL_ENGINE_HOSTNAME and variable hasura_secret in apollo.js file,

HASURA_GRAPHQL_ENGINE_HOSTNAME with Hasura cloud GraphQL engine hostname,
yb-realtime-poll.hasura.app
     hasura_secret with the admin_secret string you saved in
step 3

Save and exit the file.

7. Run the app

Run the app (go the root of repo):

npm install
npm start

Realtime-poll will start on http://localhost:3000.

Hasura Real-time Polling App Blog Image 11

Start another tab and navigate to http://localhost:3000. Cast a vote to React and you’ll see the polls chart automatically get updated using GraphQL Subscriptions.

Hasura Real-time Polling App Blog Image 12

One can verify the data being committed to the Yugabyte cloud instance, by running the following GraphQL queries from Hasura Console.

Step 1. Run the below GraphQL Query to retrieve the Poll ID

query {
  poll (limit: 10) {
    id
    question
    options (order_by: {id:desc}){
      id
      text
    }
  }
}

Make a note of the Poll ID

Hasura Real-Time Polling App Blog Image 14

Step 2. Run the below subscription query using the poll id from the previous step

subscription getResult($pollId: uuid!) {
  poll_results (
    order_by: {option_id:desc},
    where: { poll_id: {_eq: $pollId} }
  ) {
    option_id
    option { id text }
    votes
  }
}
 
{ "pollId" : "98277113-a7a2-428c-9c8b-0fe7a91bf42c"}

Hasura Real-time Polling App Blog Image 13

Next Steps

We are hosting a webinar and Q&A session on July 13, 2021 for folks interested in learning more about our integrated solution. A special thanks to Suda Srinivasan for his collaboration with the creation of this post. As always we are here to help and answer any questions you may have. Join us on our community Slack channel, and star us on GitHub.

Related Posts

Ecosystem Software Engineer