Integrating Hasura GraphQL with DronaHQ building Admin Dashboard

In this article, we will see how to integrate the Hasura GraphQL service with DronaHQ (A low code platform to build internal tools). We will use the GraphQL query language to work with APIs for executing queries and work with the database.
By the end of this article, we will create an Admin Dashboard microapp with employee details and perform different functionalities like viewing data, updating data, deleting data, and inserting new data, with the help of Hasura to create, manage, and customize GraphQL APIs and then operate it in DronaHQ Studio.

Prerequisite

  • You should have an account on DronaHQ Studio and be comfortable working with controls to build tools.
  • Grasp on GraphQL query language would be helpful to understand queries.
  • An account on Hasura Cloud with a database connected to a project will be in use to work with the data.

Configuring Hasura GraphQL connector

Go to your Hasura Cloud and select the project with which you have a database connection. You will find the GraphQL API endpoint and the Admin Secret there.

Copy the endpoint and admin secret, then go to the DronaHQ studio and click on add connector > GraphQL.

Provide the name for your connector and select the Authentication type as API Key Authentication.

Add API key under API Key Authentication of:

  • Key: x-hasura-admin-secret
  • Value: < YOUR_ADMIN_SECRET_KEY >
  • Location: In Header

Next, add the GraphQL API endpoint copied earlier.
After a Test Connection, save the configured connector.

You will find your configured GraphQL connector under the connectors list.

Let’s have a look at the table we have in our Hasura Console. We have connected the Postgres database to the Hasura Console with table name employeeDetails

Now, let’s dive into building the app.

Create an App on Studio

Go to your studio account and click on Blank App to create a new app, under the Apps section.

Drop the controls needed for the dashboard. We will be using tablegrid control in our app.

View list of employees

We will now add a query to our GraphQL connector to fetch all the data from our database using the GraphQL query.
From the sidebar select Connectors > GraphQL Connector > Add API.

A query builder will open. Give a name for your query and write your query to fetch all the details.

Query Used:

query MyQuery { 
  employeeDetails { 
    id 
    Name 
    Address 
    Phone 
    Email 
    doj 
    Department 
    Position 
    onsitework 
  } 
} 

Explanation:
In the above GraphQL query we have selected all the columns from our employeeDetails table.

Do a Test Query and save it.

Go to the Data Bind section of the tablegrid control in your app and select connector and choose the configured GraphQL connector and select the query to fetch the details.
Select the keys for the columns you want to bind to the table grid connector and then save it.

You will view the data saved in the tablegrid control in the builder view.

Delete details of an employee

To delete details of an employee we have to create another query for our connector. Add a query for our GraphQL connector. Provide a name for the query and write a query to delete the details of a selected employee.

Query Used:

mutation MyMutation($id: Int = {{id}}) { 
  delete_employeeDetails_by_pk(id: $id){ 
  id 
  } 
} 

Explanation:
In the above, we have written a GraphQL mutation query with id as a variable. This will help us to provide dynamic value for the ID as per the selected employee, whose details we want to delete from the data.

Do a Test Query and save it.

We will now add this query in our action of tablegrid control by selecting delete_action and adding a server-side action of configured GraphQL connector with delete query.

action trigger

Next, you need to bind the ID from tablegrid to the id variable using tablegrid keyword {{tablegrid.data.employeeDetails.id}}

.

Click Continue and Finish.
You can try this in your app preview. Select the row and click the delete button. The selected employee details will be deleted from the database.

Updating details of employees

To update the details of employees we will use the edit columns property of tablegrid.

Create a GraphQL query for our connector to edit the data in our database.

Add a query for our GraphQL connector. Provide a name for the query and write a query to update the details of selected employees.

Query Used:

mutation MyMutation($id: Int = {{id}}, $Name: String = "{{empName}}", $Address: String = "{{empAdd}}", $Email: String = "{{empEmail}}", $Department: String = "{{empDep}}", $Phone: bigint = "{{empPh}}", $Position: String = "{{empPos}}", $doj: date = "{{empDoj}}", $onsitework: Boolean = "{{empBool}}") { 
  update_employeeDetails_by_pk(pk_columns: {id: $id}, _set: {Name: $Name, Address: $Address, Email: $Email, Department: $Department, Phone: $Phone, Position: $Position, doj: $doj, onsitework: $onsitework}) { 
    id 
    onsitework 
    doj 
    Position 
    Phone 
    Name 
    Email 
    Department 
    Address 
  } 
} 

Explanation:
We have written a GraphQL mutation query. In this query we have variables for all the columns from the employeeDetails table having them updated except for the id column which will not get updated but it will be a variable too, to provide a dynamic value of the selected employee’s detail ID whose data we want to change or update.

Do a Test Query and save it.

We will now add this query in our action of tablegrid control by selecting save_changes and adding a server-side action of configured GraphQL connector with the update query.

To update multiple changes in our database from the tablegrid control we will use an on-screen action of ITERATE TASK on the tablegrid control. This will help to iterate through each of the edited columns of the tablegrid and save them in an object using a JS code editor.

Next, we have to save each of the properties in different output variables so that we can use it later to bind as keywords in our update query request of the connector.

Under the JS Code editor add the client-side action of the configured connector, selecting the update query.
Now, bind the query variables with their appropriate keywords saved in variables from the previous JS Code editor.

Click Continue then Finish.

NOTE: Make sure to add a refresh control action from the On-Screen Actions to view the updated data after saving the changes in the tablegrid.

You can try this in your app preview. Select the data you want to make changes to then click on save on top of the tablegrid.

Inserting details of a new employee

Finally, we will build a query to insert a new row with details of an employee. For this, I will be using a pop up, that you can add from the screens. I will use various controls such as text input, text area, dropdown, date picker, toggle button, and submit button. These controls will be used to take input for the details of a new employee.

Now, we have to add a query to the connector to insert a new row with all the details from our admin dashboard microapp. Provide a name for the query and write the insert query.

Query Used:

mutation MyMutation($Name: String = "{{newName}}", $Email: String = "{{newEmail}}", $Department: String = "{{newDep}}", $Address: String = "{{newAdd}}", $Phone: bigint = "{{newPh}}", $Position: String = "{{newPos}}", $doj: date = "{{newDate}}", $onsitework: Boolean = "{{newBool}}") { 
  insert_employeeDetails_one(object: {Name: $Name, Email: $Email, Department: $Department, Address: $Address, Phone: $Phone, Position: $Position, doj: $doj, onsitework: $onsitework}) { 
    onsitework 
    id 
    doj 
    Position 
    Phone 
    Name 
    Email 
    Department 
    Address 
  } 
} 

Explanation:
In the above query of GraphQL mutation, we have made variables of all the columns of the database except for the id , because it is set to autogenerated to maintain its distinctiveness. All the variables will be provided values from our app and then sent back to the database added as a new row.

Do a Test Query and save it.

We will now add this query to the action of our button control by selecting button_click and adding a server-side action of the connector with the insert query.
Before that, we have to do a transformation of the UNIX code of the date input from date control to a format of (YYYY-MM-DD). We will use a JS Code editor action from On-screen Actions.

Select the date control keyword and provide a variable to it.

Write the following code:

output = moment.unix(epDate).format("YYYY MM DD")

In the above code, we have used the moment.js library to transform the UNIX code of date to our required format of date as per the database. (Along with moment.js, there are various other supported libraries available in studio)

Test the script, click Continue.

Save the output in a variable and save it. This will help to select the transformed date format while passing through the insert query.

We can now add the server-side action of our connector with the insert query. Fill the dynamic values of the query with the keywords of the input controls and use the previously saved output of date in place of the date variable.

Click Continue and Finish.

You can try this out in your app preview and check that the details of the new employee have been added to the table grid as well as in your database.

App preview:

Your admin dashboard microapp with the integration of Hasura GraphQL in DronaHQ studio is ready along with a donut chart to keep track of the frequency of employees in the distinctive departments.