Gatsby FuncJam '21

Groovy Analytics is both a classic Gatsby static site requesting location data from the Google Analytics API at build time using gatsby-node AND a dynamic application that uses Gatsby Functions to GET and POST the following:

• Get all Reactions stored in Fauna Database
• Get all Comments stored in Fauna Database
• Post a Reaction to Fauna Database
• Post a Comment to Fauna Database (with server-side Authentication)
• Post to Convertkit for Newsletter signup

👀 Live Demo

🕺 Groovy Analytics: https://gatsbygroovyanalytics.gatsbyjs.io

⚙️ The Functions

There are two types of functions in this site: public and private. All GET requests are public, but one POST request is private.

🧑‍🤝‍🧑 Public Functions

These can be hit from the browser address bar and will return a JSON object.

😲 Get all reactions

GET | /api/get-all-reactions

src: /src/api/get-all-reactions.ts

Example axios GET request

const getAllReactions = async () => {
  try {
    const response = await axios('/api/get-all-reactions')
    console.log(response.data.reactions)
  } catch (error) {
    console.warn(error.message)
  }
}

💬 Get all comments

GET | /api/get-all-comments

src: /src/api/get-all-comments.ts

Example axios GET request

const getAllComments = async () => {
  try {
    const response = await axios('/api/get-all-comments')
    console.log(response.data.reactions)
  } catch (error) {
    console.warn(error.message)
  }
}

📥 Signup to Newsletter

POST |/api/signup-newsletter

req.body params

Name	Type	Required	Summary
email	string	true	The users email address

src: /src/api/signup-newsletter.ts

Example axios POST request with req.body

const handleSubmit = async (email) => {
  try {
    const response = await axios.post('/api/signup-newsletter', {
      email: email,
    })
    console.log(response.data.message)
  } catch (error) {
    console.warn(error.message)
  }
}

🏖️ Summer Functions

We covered Newsletters on Week 1 of #GatsbySummerFunctions

🔴 Collect email addresses (and more) from visitors · #GatsbySummerFunctions · Week 1

😲 Submit a reaction

POST | /api/add-reaction

req.body params

Name	Type	Required	Summary
reaction	string	true	The Reaction type
date	date	true	The Date the reaction was submitted

src: /src/api/add-reaction.ts

Example axios POST request with req.body

const handleSubmit = async (reaction) => {
  setIsSubmitting(true)
  try {
    await axios.post('/api/add-reaction', {
      reaction: reaction,
      date: new Date(),
    })
    console.log(respose.data.message)
  } catch (error) {
    console.warn(error.message)
  }
}

🏖️ Summer Functions

We covered Reactions on Week 2 of #GatsbySummerFunctions

🔴 Gather reactions (claps, hearts or votes) from visitors · #GatsbySummerFunctions · Week 2

🔐 Private Functions

Private functions require Twitter login and a Bearer token provided by Auth0

💬 Submit a comment

POST | /api/add-comment

req.body params

Name	Type	Required	Summary
user	string	true	The users name
comment	string	true	The users comment
date	date	true	The Date the comment was submitted

req.headers params

Name	Type	Required	Summary
Authorization	string	true	The Auth0 access token

src: /src/api/add-comment.ts

Example axios POST request with req.body / req.headers

const handleSubmit = async (user, comment) => {
  try {
    const response = await axios.post(
      '/api/add-comment',
      {
        user: user.name,
        comment: comment,
        date: new Date(),
      },
      {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      }
    )
    console.log(response.data.message)
  } catch (error) {
    console.warn(error.message)
  }
}

🏖️ Summer Functions

We covered Auth0 Authentication on Week 3 of #GatsbySummerFunctions

🔴 Limit usage to visitors who have logged in with Auth0 · #GatsbySummerFunctions · Week 3

We covered Comments on Week 4 of #GatsbySummerFunctions

🔴 Poll and display live data on your site · #GatsbySummerFunctions · Week 4

Everything I do goes into everything I do.

Groovy Analytics was the result of 26hrs work however, there are a number of areas where I borrowed code from previous projects, blog post demos or work I'd completed in preparation for the Nattermob Friday night streams.

• Three.js Globe -- This came from a tutorial I wrote for Smashing Magazine : Gatsby Serverless Functions And The International Space Station

• Google Analytics Build Time Data -- Whilst this will probably make a blog post all on it's own the fundamental methods for fetching data from a remote source and pumping it into Gatsby's Data Layer can been seen in this post: Add data to Gatsby's GraphQL layer using sourceNodes

• Auth0 Authentication and Fauna Data Storage for comments -- This can be seen on the following episodes of #GatsbySummerFunctions

  • Limit usage to visitors who have logged in with auth · #GatsbySummerFunctions · Week 3
  • Poll and display live data on your site · #GatsbySummerFunctions · Week 4

• Fauna Data Storage for reactions -- This can be seen on this episode of #GatsbySummerFunctions : Gather reactions (claps, hearts or votes) from visitors · #GatsbySummerFunctions · Week 2

• Signup Newsletters with ConvertKit -- This was covered on this episode of #GatsbySummerFunctions : Collect email addresses (and more) from visitors · #GatsbySummerFunctions · Week 1

... and if you're looking for a more gentle introduction to Gatsby Functions have a watch of Week 0 of #GatsbySummerFunctions where we built a Slot Machine : Build an emojii slot machine with a #GatsbyJS Serverless Function · #GatsbySummerFunctions

References

Here are the references I used to create Groovy Analytics

• The Reaction icons came form my Open Source project React Svg Bubble Slider

• The pattern for the section background came from: https://www.heropatterns.com/

• The Google Analytics Core Reporting API can be seen here: Core Reporting API - Reference Guide

• There's also this handy Google Analytics Metric Explorer: UA Dimensions & Metrics Explorer

-- And the groovy font I used is:

• Gv. time

Me

• I can be found on Twitter: @PaulieScanlon
• My blog where you'll find all manner of Gatsby related posts is here: https://paulie.dev/