3factorapp using Next.js and Hasura

Aswin VB
Aswin VB
Apr 30 · 6 min read

Before you start to read this blog make sure you know about Next.js and Hasura.

We will be implementing the 3factorapp using Next.js and Hasura microservices so i hope you have all the basic setup ready as given in the platform docs, i will be implementing the sample app given in the 3factor-example provided by hasura as a microservice. I suggest you to go through the Readme file present in the 3factor-example repo for having a clear idea about what we are going to implement.

Please Note that i will not be writing all the code since most part is similar to the one given in the 3factor-example repo which is in react. I will be showing only the important part which will be needed for Next.js and also for things which are different when you are using microservices.

Now that you are ready let’s get started!

Create a new microservice for our Next.js, It will be easier to change the hello-react microservice that is available in the hasura-hub and we can change it accordingly. So what you have to do is to clone the hello-react microservice to your project using the below command.

cloning a microservice

once you have cloned the microservice, you will have a new directory called ui under the microservices folder and this microservice will be deployed at ui.<your_cluster_name>.hasura-app.io

we will be having a node server which will handle the backend part of the 3factorapp. So first thing to be changed is the package.json file so that we can have the node server up. We will have to change it as given in the below picture

package.json

so basically when the microservice is up the npm start command will be used so that command should fire up the node server.

Next step is to create a server.js file in the app folder and add the code as given the below picture which will setup the basic node server in the port 8080 and points all the route coming to the server to next.js.

server.js

Now open the hasura console using hasura api-console and head over to /data/sql and then copy paste the below code in the SQL command area run it.

Tracking tables and views

This will create all the needed tables and views for the app.

Now when you go under the data section in the api-console you will have untracked tables and views, so click on the add all button and also click on track all relations to track all the relationships (like foreign keys)

We need to setup a development environment for our backend. We need to write backend logic for the following steps:

  1. Validate order: Source code: validate-order
  2. Payment: Source code: payment
  3. Restaurant approval: Source code: restaurant-approval
  4. Agent assignment: Source code: agent-assignment

since we are already running on a node server, all we have to do is add route for each of these functions and link it to the source code Download all these 4 source code and place it in a folder named backend and add these 4 routes in server.js file and the header files for these 4 functions.

Header files
Backend Routes

if you go to any of the four source codes and open index.js file you will see a line in the top const POSTGRES_CONNECTION_STRING=process.env.POSTGRES_CONNECTION_STRING||"postgres://postgres:password@localhost:6432/postgres but we do not have any url available to connect to postgres present in the cluster. There again comes hasura docs to the rescue. If you go through this page you will see how to add POSTGRES environment variables to a microservice.

once that is done we will have 4 environment variable Hasura will make the following environment variables available for the microservice to use: POSTGRES_HOSTNAME ,POSTGRES_PORT ,POSTGRES_USERNAMEandPOSTGRES_PASSWORD

Now we can change the url based on these environment variables, change the POSTGRES_CONNECTION_STRING variable present in all 4 source code to :

POSTGRES_CONNECTION_STRING

Now that we have the backend functions ready we have to setup event system, if you have gone through the readme of the example repo you must have encountered this :

In the backend, we will use Hasura Event Triggers to invoke webhooks when events are emitted. The backend requires the following Event Triggers:

1. validate-order: On insert of an order.

2. restaurant-approval: On update of an order after successful payment.

3. agent-assignment: On update of an order after restaurant approval.

we have the inbuild data microservice deployed at data.<your_cluster_name>.hasura-app.io, so to setup these event triggers via Hasura API run the following command.

curl -d @event-triggers.json -H 'Content-Type:application/json' data.<your_cluster_name>.hasura-app.io/v1/query

Go back to the Hasura console and in the Events tab you will see the newly created Event Triggers:

Events

Now our base setup is ready, all we have to do is to add the frontend code.

In this section i will be showing how to connect Next.js and hasura using a single example and the rest can be similarly done with the help of the react code.

So create a folder called pages in the app folder and add an index.js file in it. This will be your homepage where you will have to replicate this.

To connect Next.js and Hasura we need a config file which should have the following details:

this withData will be used as a wrapper for all pages which are related to some graphql functions, suppose you have an Order page(Order.js will be a page at /Order) which is a having some graphql operations like Query,Mutation or Subscription. So this component should be exported after wrapping using withData from the config file.

export default withData(Order);

for all backend url’s in the example repo it should be replaced with https://ui.<cluster_name>.hasura-app.io/<endpoint>.

Another point to note is that in Order.js the route will be of the form /Order/<order_id> to retrieve details of an order. But in next.js we have to pass the id as a parameter of the form /Order?id=<order_id> in order to do this we have to do some configuration in the server.js file by adding a new route which will take url’s of the form /Order/<order_id> and convert it into /Order?id=<order_id> form and thus not changing the url. This can be done using the following route.

To get the id from the url parameter in the page follow the code below:

https://gist.github.com/aswinzz/95a399b4b8a382a83282a22c1d1dd00a https://gist.github.com/aswinzz/b6f5be687bd3a91462f135c6a85361a0 https://gist.github.com/aswinzz/84d6d5236534b1fbed38ac35acb52198

these are the gist codes containing index.js,PlaceOrder.js and Order.js. It is similar to the code present in the example repo which can be easily implemented.

Now commit and push all these changes and go to ui.<cluster_name>.hasura-app.io to view the app.

And that’s it, we have implemented the 3factorapp using Next.js and Hasura microservices🙌 . You can try to implement the Analytics app in a similar way.

About Me

My name is Aswin VB. I am an undergraduate student at the Indian Institute of Information Technology, Allahabad, pursuing my B.Tech degree in Information Technology.

I love creating and learning new things which i always do when i have free time. I love to code in JavaScript and Python.

You can follow me on Twitter and GitHub.

Aswin VB

Written by

Aswin VB

I am a student pursuing Btech IT from Indian Institute Of Information Technology Allahabad. I am an opensource enthusiast.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade