Build an e-commerce shopping cart reminder with Hasura Events
Tags: events, serverless
Published: 2021-02-02 12:53:10

---
title: Build an e-commerce shopping cart reminder with Hasura Events
published: true
date: 2021-01-29 13:19:43 UTC
tags: Events,Serverless
canonical_url: https://hasura.io/blog/build-ecommerce-shopping-cart-reminder-with-hasura-events/
---

 ![Build an e-commerce shopping cart reminder with Hasura Events](https://hasura.io/blog/content/images/2021/01/ecommerce_reminder_event_trigger-1.png)

**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_](https://twitter.com/riccardogiorato) _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](https://hasura.io/blog/the-hasura-technical-writer-program/?utm_campaign=blog&utm_medium=blog&utm_source=blog)._

In this tutorial we will discover how to use [**Hasura Events**](https://hasura.io/learn/graphql/hasura/custom-business-logic/5-create-event-trigger/) 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/**](https://hasura-shopping-reminder.vercel.app/)

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

![Build an e-commerce shopping cart reminder with Hasura Events](https://hasura.io/blog/content/images/2021/01/1st-Image.png)<figcaption>https://hasura-shopping-reminder.vercel.app/</figcaption>

## 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](https://cloud.hasura.io/) or any other cloud hosting provider like Heroku or AWS. I usually prefer to use [Hasura Cloud](https://cloud.hasura.io/) 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.

## 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**

![Build an e-commerce shopping cart reminder with Hasura Events](https://hasura.io/blog/content/images/2021/01/image-2.png)

## 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:

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!

![Build an e-commerce shopping cart reminder with Hasura Events](https://hasura.io/blog/content/images/2021/01/image-3.png)

## 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.

![Build an e-commerce shopping cart reminder with Hasura Events](https://hasura.io/blog/content/images/2021/01/img4.png)

## 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](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/](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](https://github.com/riccardogiorato/hasura-shopping-reminder/blob/main/src/ApolloApp.js)

![Build an e-commerce shopping cart reminder with Hasura Events](https://hasura.io/blog/content/images/2021/01/img5.png)

## 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](https://github.com/riccardogiorato/hasura-shopping-reminder/blob/main/src/App.js)

<!--kg-card-begin: html--><script src="https://gist.github.com/riccardogiorato/6e82d214716a21d214059ce997c93561.js"></script><!--kg-card-end: html-->
## 7 —Here it comes the Hasura Events!

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

![Build an e-commerce shopping cart reminder with Hasura Events](https://hasura.io/blog/content/images/2021/01/img7.png)

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.

![Build an e-commerce shopping cart reminder with Hasura Events](https://hasura.io/blog/content/images/2021/01/img8.png)

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](https://github.com/hasura/graphql-engine/tree/master/community/boilerplates/event-triggers).

## 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.

![Build an e-commerce shopping cart reminder with Hasura Events](https://hasura.io/blog/content/images/2021/01/img9.png)

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](https://github.com/riccardogiorato/hasura-shopping-reminder/blob/main/api/sendemail.js)

The main line we are interested in is the [line 10](https://github.com/riccardogiorato/hasura-shopping-reminder/blob/main/api/sendemail.js#L10),  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.

![Build an e-commerce shopping cart reminder with Hasura Events](https://hasura.io/blog/content/images/2021/01/img10.png)

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:

![Build an e-commerce shopping cart reminder with Hasura Events](https://hasura.io/blog/content/images/2021/01/img11.png)<figcaption>the email you will get with your wish-listed plant</figcaption>

You can get a similar email too here: [https://hasura-shopping-reminder.vercel.app/](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**](https://hasura.io/learn/graphql/hasura/custom-business-logic/5-create-event-trigger/) **!**

* * *

## About the Author

[Riccardo Giorato](https://twitter.com/riccardogiorato) is a React/JAMStack Developer. In his free time he is a Maker and a Content creator. You can read more about Riccardo [here](https://riccardogiorato.com/).