Migrate to Gatsby v2.29

.eslintrc.js

@@ -1,19 +1,6 @@
 module.exports = {
-  "env": {
-    "browser": true,
-    "es6": true,
+  globals: {
+    __PATH_PREFIX__: true,
   },
-  "plugins": [
-    "react",
-  ],
-  "globals": {
-    "graphql": false,
-  },
-  "parserOptions": {
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "experimentalObjectRestSpread": true,
-      "jsx": true,
-    },
-  }
+  extends: `react-app`,
 }

.prettierignore

@@ -0,0 +1,4 @@
+.cache
+package.json
+package-lock.json
+public

.prettierrc

@@ -1,5 +1,6 @@
 {
   "trailingComma": "es5",
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "arrowParens": "avoid"
 }

bin/cleanup.js

@@ -1,5 +1,3 @@
-'use strict'
-
 const fs = require('fs')
 const path = require('path')
 let packageJSON = require(path.resolve(__dirname, '../package.json'))

gatsby-node.js

@@ -1,42 +1,41 @@
-const Promise = require('bluebird')
 const path = require('path')
 
-exports.createPages = ({ graphql, actions }) => {
+exports.createPages = async ({ graphql, actions, reporter }) => {
   const { createPage } = actions
-
-  return new Promise((resolve, reject) => {
-    const blogPost = path.resolve('./src/templates/blog-post.js')
-    resolve(
-      graphql(
-        `
-          {
-            allContentfulBlogPost {
-              edges {
-                node {
-                  title
-                  slug
-                }
-              }
+  // Query for Contentful blog post nodes to use in creating pages.
+  const result = await graphql(
+    `
+      {
+        allContentfulBlogPost {
+          edges {
+            node {
+              title
+              slug
             }
           }
-          `
-      ).then(result => {
-        if (result.errors) {
-          console.log(result.errors)
-          reject(result.errors)
         }
+      }
+    `
+  )
+
+  // Handle errors
+  if (result.errors) {
+    reporter.panicOnBuild(`Error while running GraphQL query.`)
+    return
+  }
 
-        const posts = result.data.allContentfulBlogPost.edges
-        posts.forEach((post, index) => {
-          createPage({
-            path: `/blog/${post.node.slug}/`,
-            component: blogPost,
-            context: {
-              slug: post.node.slug
-            },
-          })
-        })
-      })
-    )
+  // Create pages for each Contentful blog post entry.
+  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
+  result.data.allContentfulBlogPost.edges.forEach(({ node }) => {
+    const { slug } = node
+    const path = `/blog/${slug}/`
+    createPage({
+      path,
+      component: blogPostTemplate,
+      context: {
+        pagePath: path,
+        slug
+      },
+    })
   })
 }

package.json

@@ -7,31 +7,37 @@
     "url": "https://github.com/contentful-userland/gatsby-contentful-starter/issues"
   },
   "dependencies": {
-    "gatsby-image": "^2.3.4",
-    "gatsby-plugin-react-helmet": "^3.2.4",
-    "gatsby-plugin-sharp": "^2.5.6",
-    "gatsby-source-contentful": "^2.2.9",
-    "gatsby-transformer-remark": "^2.7.3",
-    "gatsby-transformer-sharp": "^2.4.6",
-    "lodash": "^4.17.15",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-helmet": "^6.0.0",
-    "sharp": "^0.25.2"
+    "core-js": "2",
+    "gatsby": "^2.29.0",
+    "gatsby-image": "^2.8.0",
+    "gatsby-plugin-react-helmet": "^3.7.0",
+    "gatsby-plugin-sharp": "^2.11.0",
+    "gatsby-source-contentful": "^4.3.0",
+    "gatsby-transformer-remark": "^2.13.0",
+    "gatsby-transformer-sharp": "^2.9.0",
+    "lodash": "^4.17.20",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-helmet": "^6.1.0",
+    "sharp": "^0.26.3"
   },
   "devDependencies": {
     "babel-eslint": "^10.1.0",
-    "chalk": "^4.0.0",
-    "contentful-import": "^7.7.8",
+    "chalk": "^4.1.0",
+    "contentful-import": "^7.9.28",
     "dotenv": "^8.2.0",
-    "eslint": "^6.8.0",
-    "eslint-plugin-react": "^7.19.0",
-    "gatsby": "^2.20.25",
-    "gh-pages": "^2.2.0",
-    "inquirer": "^7.1.0",
-    "prettier": "^2.0.4",
+    "eslint": "^7.15.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "gh-pages": "^3.1.0",
+    "inquirer": "^7.3.3",
+    "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
-    "yargs-parser": "^18.1.3"
+    "yargs-parser": "^20.2.4"
   },
   "engines": {
     "node": ">=10.13.0"
@@ -52,7 +58,7 @@
     "develop": "gatsby develop",
     "lint": "eslint --ext .js,.jsx --ignore-pattern public .",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js' 'src/**/*.md' 'bin/*.js'",
+    "format": "prettier --write 'src/**/*.js' 'bin/*.js'",
     "build": "gatsby build",
     "deploy": "gatsby build --prefix-paths && gh-pages -d public",
     "fix-semi": "eslint --quiet --ignore-pattern node_modules --ignore-pattern public --parser babel-eslint --no-eslintrc --rule '{\"semi\": [2, \"never\"], \"no-extra-semi\": [2]}' --fix *.js bin/*.js",

src/components/article-preview.js

@@ -4,7 +4,7 @@ import Img from 'gatsby-image'
 
 import styles from './article-preview.module.css'
 
-export default ({ article }) => (
+const Article = ({ article }) => (
   <div className={styles.preview}>
     <Img alt="" fluid={article.heroImage.fluid} />
     <h3 className={styles.previewTitle}>
@@ -24,3 +24,5 @@ export default ({ article }) => (
       ))}
   </div>
 )
+
+export default Article

src/components/container.js

@@ -1,5 +1,7 @@
 import React from 'react'
 
-export default ({ children }) => (
+const Container = ({ children }) => (
   <div style={{ maxWidth: 1180, margin: '0 auto' }}>{children}</div>
 )
+
+export default Container

src/components/hero.js

@@ -3,7 +3,7 @@ import Img from 'gatsby-image'
 
 import styles from './hero.module.css'
 
-export default ({ data }) => (
+const Hero = ({ data }) => (
   <div className={styles.hero}>
     <Img
       className={styles.heroImage}
@@ -17,3 +17,5 @@ export default ({ data }) => (
     </div>
   </div>
 )
+
+export default Hero

src/components/layout.js

@@ -1,26 +1,14 @@
 import React from 'react'
-import { Link } from 'gatsby'
-import base from './base.css'
 import Container from './container'
 import Navigation from './navigation'
 
-class Template extends React.Component {
-  render() {
-    const { location, children } = this.props
-    let header
+import './base.css'
 
-    let rootPath = `/`
-    if (typeof __PREFIX_PATHS__ !== `undefined` && __PREFIX_PATHS__) {
-      rootPath = __PATH_PREFIX__ + `/`
-    }
-
-    return (
-      <Container>
-        <Navigation />
-        {children}
-      </Container>
-    )
-  }
-}
+const Template = ({ children }) => (
+  <Container>
+    <Navigation />
+    {children}
+  </Container>
+)
 
 export default Template

src/components/navigation.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Link } from 'gatsby'
 import styles from './navigation.module.css'
 
-export default () => (
+const Navigation = () => (
   <nav role="navigation">
     <ul className={styles.navigation}>
       <li className={styles.navigationItem}>
@@ -14,3 +14,5 @@ export default () => (
     </ul>
   </nav>
 )
+
+export default Navigation

src/pages/blog.js

@@ -1,37 +1,35 @@
 import React from 'react'
-import { Link, graphql } from 'gatsby'
-import get from 'lodash/get'
+import { graphql } from 'gatsby'
 import { Helmet } from 'react-helmet'
+
 import styles from './blog.module.css'
 import Layout from '../components/layout'
 import ArticlePreview from '../components/article-preview'
 
-class BlogIndex extends React.Component {
-  render() {
-    const siteTitle = get(this, 'props.data.site.siteMetadata.title')
-    const posts = get(this, 'props.data.allContentfulBlogPost.edges')
+const BlogIndex = ({ data }) => {
+  const siteTitle = data?.site?.siteMetadata.title
+  const posts = data?.allContentfulBlogPost?.edges
 
-    return (
-      <Layout location={this.props.location}>
-        <div style={{ background: '#fff' }}>
-          <Helmet title={siteTitle} />
-          <div className={styles.hero}>Blog</div>
-          <div className="wrapper">
-            <h2 className="section-headline">Recent articles</h2>
-            <ul className="article-list">
-              {posts.map(({ node }) => {
-                return (
-                  <li key={node.slug}>
-                    <ArticlePreview article={node} />
-                  </li>
-                )
-              })}
-            </ul>
-          </div>
+  return (
+    <Layout>
+      <div style={{ background: '#fff' }}>
+        <Helmet title={siteTitle} />
+        <div className={styles.hero}>Blog</div>
+        <div className="wrapper">
+          <h2 className="section-headline">Recent articles</h2>
+          <ul className="article-list">
+            {posts.map(({ node }) => {
+              return (
+                <li key={node.slug}>
+                  <ArticlePreview article={node} />
+                </li>
+              )
+            })}
+          </ul>
         </div>
-      </Layout>
-    )
-  }
+      </div>
+    </Layout>
+  )
 }
 
 export default BlogIndex

src/pages/index.js

@@ -1,38 +1,35 @@
 import React from 'react'
 import { graphql } from 'gatsby'
-import get from 'lodash/get'
 import { Helmet } from 'react-helmet'
 import Hero from '../components/hero'
 import Layout from '../components/layout'
 import ArticlePreview from '../components/article-preview'
 
-class RootIndex extends React.Component {
-  render() {
-    const siteTitle = get(this, 'props.data.site.siteMetadata.title')
-    const posts = get(this, 'props.data.allContentfulBlogPost.edges')
-    const [author] = get(this, 'props.data.allContentfulPerson.edges')
+const RootIndex = ({ data }) => {
+  const siteTitle = data?.site?.siteMetadata?.title
+  const posts = data?.allContentfulBlogPost?.edges
+  const [author] = data?.allContentfulPerson?.edges
 
-    return (
-      <Layout location={this.props.location}>
-        <div style={{ background: '#fff' }}>
-          <Helmet title={siteTitle} />
-          <Hero data={author.node} />
-          <div className="wrapper">
-            <h2 className="section-headline">Recent articles</h2>
-            <ul className="article-list">
-              {posts.map(({ node }) => {
-                return (
-                  <li key={node.slug}>
-                    <ArticlePreview article={node} />
-                  </li>
-                )
-              })}
-            </ul>
-          </div>
+  return (
+    <Layout>
+      <div style={{ background: '#fff' }}>
+        <Helmet title={siteTitle} />
+        <Hero data={author.node} />
+        <div className="wrapper">
+          <h2 className="section-headline">Recent articles</h2>
+          <ul className="article-list">
+            {posts.map(({ node }) => {
+              return (
+                <li key={node.slug}>
+                  <ArticlePreview article={node} />
+                </li>
+              )
+            })}
+          </ul>
         </div>
-      </Layout>
-    )
-  }
+      </div>
+    </Layout>
+  )
 }
 
 export default RootIndex