Refactor: Upgrade to Gatsby V5 and React 18

gatsby-browser.js

@@ -1,7 +1,8 @@
-/**
- * Implement Gatsby's Browser APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/browser-apis/
- */
+import React from "react"
+import { Layout } from "./src/components"
 
-// You can delete this file if you're not using it
+const wrapPageElement = ({ element, props }) => {
+  return <Layout {...props}>{element}</Layout>
+}
+
+export { wrapPageElement }

gatsby-config.js

@@ -7,7 +7,7 @@ module.exports = {
     author: `@reactcebu`,
   },
   plugins: [
-    `gatsby-plugin-react-helmet`,
+    "gatsby-plugin-image",
     {
       resolve: `gatsby-source-filesystem`,
       options: {
@@ -16,7 +16,16 @@ module.exports = {
       },
     },
     `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
+    {
+      resolve: `gatsby-plugin-sharp`,
+      options: {
+        defaults: {
+          placeholder: "blurred",
+          quality: 100,
+        },
+      },
+    },
+    "gatsby-transformer-sharp",
     {
       resolve: `gatsby-plugin-manifest`,
       options: {
@@ -39,9 +48,6 @@ module.exports = {
         },
       },
     },
-    // this (optional) plugin enables Progressive Web App + Offline functionality
-    // To learn more, visit: https://gatsby.dev/offline
-    // `gatsby-plugin-offline`,
   ],
 
   // for avoiding CORS while developing Netlify Functions locally

package.json

@@ -8,23 +8,20 @@
     "@types/body-scroll-lock": "^2.6.1",
     "@types/styled-components": "^5.1.1",
     "axios": "^0.19.2",
-    "babel-plugin-styled-components": "^1.10.7",
+    "babel-plugin-styled-components": "^2.1.4",
     "body-scroll-lock": "^3.1.5",
-    "gatsby": "^2.23.12",
-    "gatsby-image": "^2.4.9",
-    "gatsby-plugin-manifest": "^2.4.14",
-    "gatsby-plugin-offline": "^3.2.13",
-    "gatsby-plugin-react-helmet": "^3.3.6",
-    "gatsby-plugin-sharp": "^2.6.14",
-    "gatsby-plugin-styled-components": "^3.3.10",
+    "gatsby": "^5.8.0",
+    "gatsby-plugin-image": "^3.4.0",
+    "gatsby-plugin-manifest": "^5.8.0",
+    "gatsby-plugin-sharp": "^5.8.0",
+    "gatsby-plugin-styled-components": "^6.12.0",
     "gatsby-plugin-web-font-loader": "^1.0.4",
-    "gatsby-source-filesystem": "^2.3.14",
-    "gatsby-transformer-sharp": "^2.5.7",
+    "gatsby-source-filesystem": "^5.12.1",
+    "gatsby-transformer-sharp": "^5.8.0",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-helmet": "^6.1.0",
-    "styled-components": "^5.1.1"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.0"
   },
   "devDependencies": {
     "@types/aws-lambda": "^8.10.61",
@@ -46,7 +43,7 @@
     "start:lambda": "netlify-lambda serve src/lambda",
     "develop": "gatsby clean && gatsby develop",
     "build:app": "npm run clean && gatsby build",
-    "build:lambda": "netlify-lambda build src/lambda",
+    "build:lambda": "NODE_OPTIONS='--openssl-legacy-provider' netlify-lambda build src/lambda",
     "build": "run-p build:**",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
     "serve": "gatsby serve",

src/components/Footer/Footer.tsx

@@ -2,15 +2,12 @@ import {
   Container,
   FooterContainer,
   MainFooter,
-  Top,
-  Center,
   Link,
   List,
   ListItem,
 } from "./Footer.styles"
 
 import React from "react"
-import { graphql, useStaticQuery } from "gatsby"
 
 interface ComponentProps {
   siteTitle?: string
@@ -68,17 +65,6 @@ const icons = [
 export const Footer: React.FC<ComponentProps> = ({
   siteTitle,
 }: ComponentProps) => {
-  const data = useStaticQuery(graphql`
-    query {
-      logo: file(relativePath: { eq: "logo.png" }) {
-        childImageSharp {
-          fluid(maxWidth: 300) {
-            ...GatsbyImageSharpFluid
-          }
-        }
-      }
-    }
-  `)
   return (
     <MainFooter>
       <FooterContainer>

src/components/Header/Header.tsx

@@ -5,9 +5,9 @@ import {
   StyledBurger,
   StyledButton,
 } from "./Header.styles"
-import { Link, graphql, useStaticQuery } from "gatsby"
+import { Link } from "gatsby"
 
-import Img from "gatsby-image"
+import { StaticImage } from "gatsby-plugin-image"
 import React, { useEffect, useRef, useState } from "react"
 import {
   disableBodyScroll,
@@ -22,18 +22,6 @@ interface ComponentProps {
 export const Header: React.FC<ComponentProps> = ({
   siteTitle,
 }: ComponentProps) => {
-  const data = useStaticQuery(graphql`
-    query {
-      logo: file(relativePath: { eq: "logo.png" }) {
-        childImageSharp {
-          fluid(maxWidth: 300) {
-            ...GatsbyImageSharpFluid
-          }
-        }
-      }
-    }
-  `)
-
   const navRef = useRef(null)
 
   const [showMenu, setShowMenu] = useState<boolean>(false)
@@ -53,7 +41,7 @@ export const Header: React.FC<ComponentProps> = ({
   return (
     <HeaderStyled>
       <LinkStyled to="/">
-        <Img fluid={data.logo.childImageSharp.fluid} alt={siteTitle} />
+        <StaticImage src="../../assets/images/logo.png" alt={siteTitle} />
       </LinkStyled>
 
       <StyledBurger

src/components/Layout/Layout.tsx

@@ -5,7 +5,7 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import { Footer, GlobalStyles, Header, SEO } from "../index"
+import { Footer, GlobalStyles, Header } from "../index"
 import { graphql, useStaticQuery } from "gatsby"
 
 import PropTypes from "prop-types"
@@ -27,10 +27,6 @@ export const Layout = ({ children }) => {
   return (
     <LayoutContainer>
       <GlobalStyles />
-      <SEO
-        title="Reactors Homepage"
-        description="A community for developers by developers"
-      />
       <Header siteTitle={data.site.siteMetadata.title} />
       <LayoutContainerMain>{children}</LayoutContainerMain>
       <Footer />

src/components/index.ts

@@ -2,6 +2,5 @@ export { Header } from "./Header"
 export { Footer } from "./Footer"
 export { Layout } from "./Layout"
 export { GlobalStyles } from "./GlobalStyles"
-export { SEO } from "./SEO"
 export { Newsletter } from "./Newsletter"
 export { Button } from "./Button"

src/pages/404.tsx

@@ -1,12 +1,20 @@
 import React from "react"
 
-import { Layout } from "../components/Layout"
-
 const NotFoundPage = () => (
-  <Layout>
+  <>
     <h1>NOT FOUND</h1>
     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-  </Layout>
+  </>
+)
+
+export const Head = () => (
+  <>
+    <title>Reactors Homepage</title>
+    <meta
+      name="description"
+      content="A community for developers by developers"
+    />
+  </>
 )
 
 export default NotFoundPage

src/pages/about.tsx

@@ -1,17 +1,19 @@
 import React from "react"
-import { Layout } from "../components"
-import FirstMeetup from "../assets/images/react-cebu-first-meetup.jpg"
 import styled from "styled-components"
+import { StaticImage } from "gatsby-plugin-image"
 
 const AboutPage = () => {
   return (
-    <Layout>
+    <>
       <Section>
         <h2>React Cebu — a community for developers by developers</h2>
         <br />
         <br />
 
-        <img src={FirstMeetup} alt="React Cebu First Meetup" />
+        <StaticImage
+          alt="First meetup"
+          src="../assets/images/react-cebu-first-meetup.jpg"
+        />
 
         <br />
         <br />
@@ -43,10 +45,20 @@ const AboutPage = () => {
           <a href={"mailto: [email protected]"}>[email protected]</a>
         </p>
       </Section>
-    </Layout>
+    </>
   )
 }
 
+export const Head = () => (
+  <>
+    <title>Reactors Homepage</title>
+    <meta
+      name="description"
+      content="A community for developers by developers"
+    />
+  </>
+)
+
 const Section = styled.section`
   display: block;
   max-width: 1440px;