Use Hasura to setup event triggers to call webhooks whenever specific events occur in your DB in less than 2 minutes!
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
- 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.
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:
- 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!
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 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
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-->
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.
Less time spent building custom triggers or watchers!
More time spent on the core of our app or ideas thanks to Hasura Events !