Connect Fauna database to a Gatsby serverless application

Apr 25, 2019

Here I’m going to build upon the application built in the last tutorial. I have a Gatsby site that can trigger AWS Lambda functions via Netlify. Now it’s time to create a Fauna database, connect to, read from and write to it.

Create an application with Gatsby, Netlify and Fauna

In the previous tutorial I started building an application excitingly named “sales-commission”. It’s open source and you can view the source code for the application on GitHub. The application is meant to add salespeople and deals, then calculate their commissions. In the first tutorial I got the UI setup and added the ability to run serverless functions. In this tutorial I’ll add a database. Then I’ll be able to store records for salespeople.

So far I have a React.js form that POSTs to a serverless function. The serverless function is hosted on Netlify, which uses AWS Lambda under the hood. I didn’t need to setup an AWS account or anything though. I’m running the application locally so really didn’t even need to login or configure my Netlify account to get the function to trigger when I submitted the form

Aside: When I say serverless function I mean that I didn’t setup and deploy my own server. On Netlify these types of services are called Functions. In AWS land they’re called AWS Lambda functions. In Google Cloud land they’re called Cloud Functions. The idea is that the infrastructure provider (Google, AWS, Netlify, Microsoft..) spins up a server, runs your function and then shuts down the server. You don’t have to worry about hosting or maintaining the server. Serverless doesn’t mean your application doesn’t use servers.

There are a lot of choices for choosing a database. MongoDB has been popular for the last decade or so. Relational databases like MySQL have been around in various forms since the beginning of the internet. There are even options where you don’t have to code much, like Airtable. I outlined my trauma in deciding on a persistence layer in a previous post.

Fauna caught my eye because of posts on Netlify’s blog about databases. It’s really simple as that. Links to the post below.

Building Serverless CRUD apps with Netlify Functions & FaunaDB (external link) How to run Express.js apps with Netlify Functions # Connecting to databases (external link)

Now I’ll create the Fauna database and connect to it.

Create and connect to a Fauna database

To use a Fauna database we need to create a free account. Included below is their pricing table as of this writing. This is a sample application; the free plan will more than cover my needs. It doesn’t require a credit card to get started. I know credit card registration can be an issue for independent developers outside the United States.

Create FaunaDB database

I have my FaunaDB Serverless Cloud account now. Next step is to go to the Keys page and create a new key. Your secret admin key appears once on the screen. If you refresh or navigate away from the page it will disappear. ✨

Install the faunadb npm package:

$ npm install --save faunadb

These are some helpful docs that I referenced.

Next I copied the scripts folder from fauna/netlify-faunadb-todomvc. My bootstrap-fauna-database.js file looks like whoa:

This created a salesperson class in a database I created through the Fauna UI.

Create Class through the Fauna user interface

Learn more about the FaunaDB terminology in this reference glossary.

Add record from the serverless function

The next step I need to do is add a record to FaunaDB once someone on the website submits the form. The form already triggers my addSalesperson.js function.

I updated my function to be:

Something isn’t quite right. I’m getting an error when I serve my functions locally, I believe related to this issue.

 

WARNING in ../node_modules/formidable/lib/incoming_form.js 1:43-50
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ../node_modules/formidable/lib/index.js
 @ ../node_modules/superagent/lib/node/index.js
 @ ../node_modules/faunadb/src/Client.js
 @ ../node_modules/faunadb/index.js
 @ ./addSalesperson.js
Lambda server is listening on 9000
Request from ::ffff:127.0.0.1: POST /addSalesperson
Response with status 500 in 22 ms.
Error during invocation:  TypeError: n is not a function
    at Object.<anonymous> (/Users/connorleech/Projects/sales-commission/functions-build/addSalesperson.js:19:17219)

After some time messing with webpack config I’m going to take a break and ask for help...

💀 ⚰️

Conclusion

These are definitely promising technologies, but it takes configuration and understanding to get them to work well. This is my first dive into building a serverless application. I look forward to playing with the technologies more!

Let Bay Area companies find you

Join candidate network