Use Hasura to setup event triggers to call webhooks whenever specific events occur in your DB in less than 2 minutes!

This article was written by Riccardo Giorato as part of the Hasura Technical Writer Program. If you would like to publish an article about Hasura or GraphQL on our blog, apply here.

In this tutorial we will discover how to use Hasura Events to store a user preference/wish-list and to send a triggered email from this event.

We will also cover the creation of the React app connecting to an Hasura Cloud instance to make it work fully!

You can try the application on your own here: https://hasura-shopping-reminder.vercel.app/

Link to complete application on Github: https://github.com/riccardogiorato/hasura-shopping-reminder

The first step will be to configure your Hasura server, my preferred choice is using Hasura Cloud or any other cloud hosting provider like Heroku or AWS. I usually prefer to use Hasura Cloud because:

1. It  has a simple and minimal dashboard to manage your instance, not  comparable to the complexity of AWS or other hosting providers UI.
2. You get 1 GB/month of data pass through for free.
3. Finally up to 60 requests/minute to power your side/hobby project.

We want  our wish-list function to work easily without asking any other info to  the user other than their email. To do so we just need to add a  environment variable to our Hasura server:

• add HASURA_GRAPHQL_UNAUTHORIZED_ROLE key value public_user

Now we just need to go to the “DATA” section and create the “users_wishlist” table directly from the Hasura with these fields:

1. email, Text
2. plant and suggestion fields as Text
3. id as UUID and gen_random_uuid() as default value

The primary key will be the “id” field!

Switch to the “Permissions” tab and add a new role row:

• Insert,  without any checks, Insert permissions for “email,plant,suggestion” but  not the “id” field, which will be automatically generated.

If you want you can directly download or clone the sample react project from here: https://github.com/riccardogiorato/hasura-shopping-reminder

The main requirement is adding Apollo Client or any other GraphQL client on your client side.

To install Apollo Client and configure with Hasura you can follow this React Apollo Tutorial

We configured it as it follows: https://github.com/riccardogiorato/hasura-shopping-reminder/blob/main/src/ApolloApp.js

Inside our main application code we then add the mutation query and configure the Apollo Mutation hook: https://github.com/riccardogiorato/hasura-shopping-reminder/blob/main/src/App.js

Now we can jump back to our Hasura instance to the “EVENTS” tab.

We  will want to add a new trigger called “send_wishlists” linked to the  shcema “public” and the table “users_wishlist” on the “Insert” trigger.

We will need to pass a Webhook URL that will be invoked from our Hasura server when this event happens.

Here we passed our custom webook of a Serverless function running on  Vercel cloud hosting provider but you could choose any server  environment you prefer. If you want you could pick some examples of  other providers supported from the Hasura team from the “serverless  functions example” here.

The last step for our tutorial will be to create this serverless function to send the “email reminder” to the user.

But first we need to understand what the request from Hasura will look like.

As  we can see in the body of the request, Hasura will pass various fields  like the event, user role, type of operation, data, all contained in the  “payload”.

From the payload we will use only the “event” object containing both the previous and current values from the modified row.
The  “old/previous” and “new/current” won’t always present, considering the  type of the operation, in this case we are getting a newly created row  so we won’t have the “old” values that are null but oonly the “new” values.

To send the email we choose an external provider in this case Emailjet but you could pick any other provider of choice.

The entire function can be found here: https://github.com/riccardogiorato/hasura-shopping-reminder/blob/main/api/sendemail.js

The main line we are interested in is the line 10,  we unwrap the data from the request body and we pick all the object  with all the fields from the Hasura table row. Any other field on this  newly inserted record would be found here.

And voilà! Our application is done! If we go back in our React app and  complete the insert process we will receive an email that will look like  this:

You can get a similar email too here: https://hasura-shopping-reminder.vercel.app/

(if  you don’t see any email after you complete the process you might find  it in the spam folder cause we are using the free tier of Emailjet)

Using  Hasura events we didn’t need to develop any custom listener to events  or build our own trigger detector connected to our PostgreSQL database.

Hasura  can simply hide all this complexity for us to let us create our  functions and logical features without worrying about the basic things  to make our infrastructure work.

10 — TLDR

Less time spent building custom triggers or watchers!

More time spent on the core of our app or ideas thanks to Hasura Events.

Riccardo Giorato is a React/JAMStack Developer. In his free time he is a Maker and a Content creator. You can read more about Riccardo here.