Netlify Forms with FaunaDB

It's nice to see the form data to be stored in netlify.

Jamstack Registration Form

Vishang ・ Apr 8 '20

#javascript #jamstack #serverless #webdev

Now, what's next. I am going to store my form data to FaunaDB.

Create a db-schema

• Create a Db-schema folder with registration.gql

  	type Registration {
  	name: String!
  	email: String!
  	}
  	type Query {
  	allRegistration: [Registration!]!
  	}

  view raw registration.gql hosted with ❤ by GitHub

Create DB with FaunaDB

• Login to FaunaDB Console
• Create new DB with FaunaDB
• Import schema (DB Console -> GraphQL -> Import Schema)
• Create a new FUANA_DB_SECRET with security tab in console

Create Environment Variable

• In netlify console.
  • Go to Deploy Settings -> Environment -> Edit variable Add FAUNA_DB_SECRET -> Copy paste your secret here. This is used for authentication purpose.

Create Nelify Functions

Create netlify functions manually

• create a functions folder at root level
• within functions folder create your netlify functions i.e for the form submission create submission-created.js under the functions folder. The functions name also needs to match the specific event name with netlify events. The available event triggers available here on netlify docs

	const fetch = require('node-fetch');
	exports.handler = async (event) => {
	console.log(event);
	const body = JSON.parse(event.body);
	const { firstname, lastname, email} = body.payload.data;
	const response = await fetch(
	'https://graphql.fauna.com/graphql',
	{
	method:'POST',
	headers:{
	Authorization: `Bearer ${process.env.FAUNA_API_SECRET}`,
	},
	body: JSON.stringify({
	query: `
	mutation($name: String!, $email: String!) {
	createRegistration(data: { name: $name, email: $email }) {
	_id
	}
	}
	`,
	variables: { name: `${firstname} ${lastname}`, email },
	}),
	})
	.then(res => res.json())
	.catch(err => console.log(err));
	return {
	statusCode: 200,
	body: 'Success',
	};
	};

view raw submission-created.js hosted with ❤ by GitHub

Folder structure will look something like this.

Create netlify functions with netlify-cli

$ netlify functions:create submission-created

$ To deploy netlify function via netlify-cli

$ netlify deploy --prod

Now, in netlify console in functions tab all available netlify functions will be listed. Click on function for debug purposes.

Netlify Config

Functions to run in netlify we need a netlify.toml (configuration) file

	[build]
	command = "#"
	publish = "src"
	functions = "functions"

view raw netlify.toml hosted with ❤ by GitHub

Now the data which is pushed on netlify forms will also be available in FuanaDB for use.