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
1 — Setup your Hasura account with Hasura Cloud
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:
- It has a simple and minimal dashboard to manage your instance, not comparable to the complexity of AWS or other hosting providers UI.
- You get 1 GB/month of data pass through for free.
- Finally up to 60 requests/minute to power your side/hobby project.
2 — Make Hasura endpoint available to “public_user” role!
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
3 — Create the users_wishlist table
Now we just need to go to the “ DATA ” section and create the “ users_wishlist ” table directly from the Hasura with these fields:
- email, Text
- plant and suggestion fields as Text
- id as UUID and gen_random_uuid() as default value
The primary key will be the “id” field!
4— Set the permission for the “public_user” role
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.
5 —Configure the React app to connect to Hasura!
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 tutorial: https://hasura.io/learn/graphql/react/apollo-client/
We configured it as it follows: https://github.com/riccardogiorato/hasura-shopping-reminder/blob/main/src/ApolloApp.js
6— Launch the Mutation and save the user Preferences!
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
<!--kg-card-begin: html--><!--kg-card-end: html-->
7 —Here it comes the Hasura Events!
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.
8 —Triggering Serverless functions via Hasura Events!
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)
9— In summary
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 !
About the Author
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.
Top comments (0)