Gatsby FuncJam '21 Byte-size

Byte-size Gatsby Functions examples.

Learn more about the FuncJam challenge on the Gatsby Blog

👀 Live demo

Example functions within this repo can be seen here: gatsby-funcjam-21-byte-size

⚙️ The Functions

There are a number of functions within this repo and all have a corresponding page. Some functions require user input and will POST data captured in the UI via inputs and send them to the Function whilst others are GET request and can be run from either the page or by visiting the url in your browsers address bar.

🕺 What's the time?

A simple GET request that returns a 200 and message. This endpoint can visited from the browsers address bar or via the UI.

GET | /api/whats-the-time

function src: /src/api/whats-the-time.js

page src: /src/pages/whats-the-time.js

🔗: whats-the-time

req.body params

Name	Type	Required	Summary
n/a	n/a	n/a	n/a

🛡️ TypeScript Function

A simple GET request that returns a 200 and message. This endpoint can visited from the browsers address bar or via the UI and has been written in TypesScript

GET | /api/typescript-function

function src: /src/api/typescript-function.ts

page src: /src/pages/typescript-function.js

🔗: typescript-function

req.body params

Name	Type	Required	Summary
n/a	n/a	n/a	n/a

📊 POST body parameters

A simple POST request that sends an emoji and returns a 200 and message.

POST

function src: /src/api/post-body-params-with-fetch.js

page src: /src/pages/post-body-params-with-fetch.js

🔗: post-body-params-with-fetch

req.body params

Name	Type	Required	Summary
emoji	string	false	The emoji to send

💌 Validate email addresses server-side

A POST request that sends an email address to the server for validation using Yup

POST

function src: /src/api/validate-email.js

page src: /src/pages/validate-email.js

🔗: validate-email

req.body params

Name	Type	Required	Summary
email	string	true	email address

🚫 Restrict access using CORS middleware

A POST request with restricted access to a defined list of allowedOrigins using CORS middleware

POST

function src: /src/api/custom-middleware.js

page src: /src/pages/custom-middleware.js

🔗: custom-middleware

req.body params

Name	Type	Required	Summary
message	string	true	a simple message

🧳 Store data in Google Sheets

A POST request that sends data to a Google Spreadsheet and returns a status 200 and message

POST

function src: /src/api/post-to-google-sheets.js

page src: /src/pages/post-to-google-sheets.js

🔗: post-to-google-sheets

req.body params

Name	Type	Required	Summary
userAnswer	string	true	the value from an input

📮 Send emails using SendGrid

A POST request that sends a message to a user defined email address using SendGrid. Returns a status 200 and message

POST

function src: /src/api/post-to-send-grid.js

page src: /src/pages/post-to-send-grid.js

🔗: post-to-send-grid

req.body params

Name	Type	Required	Summary
email	string	true	valid email address
message	string	true	the message to include in the email

🎉 Collect user reactions in Fauna

A POST request that sends a reaction to a Fauna database. Returns a status 200 and message

POST

function src: /src/api/post-to-fauna.js

page src: /src/pages/post-to-fauna.js

🔗: post-to-fauna

req.body params

Name	Type	Required	Summary
userReaction	string	true	emoji associated with input value

☝️ Best Practices

For brevity we've tried to leave all but essential code in the example functions. There are however one or two best practices we encourage, these are as follows.

req.methods

To ensure your functions are used correctly it's sometimes helpful to catch incorrect req.methods and send a status code an advisory message back to the client.

E.g

export default function handler(req, res) {
  if (req.method !== 'GET') {
    res.status(405).json({ message: 'req.method should be GET' });
  }

  // rest of your function
}

export default function handler(req, res) {
  if (req.method !== 'POST') {
    res.status(405).json({ message: 'req.method should be POST' });
  }

  // rest of your function
}

req.body

It's sometimes helpful to catch absent parameters and send a status code an advisory message back to the client.

E.g

export default function handler(req, res) {
  const { email } = req.body;

  if (!email) {
    res.status(400).json({ message: 'No email found on req.body' });
  }

  // rest of your function
}