feat: upgrade to gatsby v5 (#1293)

Author: wardpeet

.github/workflows/CI.yml

@@ -9,7 +9,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: '16.13.0'
+          node-version: "18.12.1"
 
       - run: yarn install
 

.node-version

@@ -1 +1 @@
-16.13.0
+18.12.1

gatsby-config.js

@@ -87,26 +87,24 @@ module.exports = {
                   author: byline,
                 })
               ),
-            query: `
-              {
-                allMarkdownRemark(
-                  filter: {frontmatter: {layout: {eq: "blog"}}},
-                  sort: { order: DESC, fields: [frontmatter___date] }
-                ) {
-                  edges {
-                    node {
-                      excerpt
-                      frontmatter {
-                        title
-                        date
-                        permalink
-                        byline
-                      }
-                    }
-                  }
-                }
-              }
-            `,
+            query: `{
+  allMarkdownRemark(
+    filter: {frontmatter: {layout: {eq: "blog"}}}
+    sort: {frontmatter: {date: DESC}}
+  ) {
+    edges {
+      node {
+        excerpt
+        frontmatter {
+          title
+          date
+          permalink
+          byline
+        }
+      }
+    }
+  }
+}`,
             output: "/blog/rss.xml",
             title: "Blog | GraphQL",
             feed_url: "http://graphql.org/blog/rss.xml",

gatsby-node.js

@@ -204,8 +204,8 @@ exports.onCreatePage = async ({ page, actions }) => {
 exports.createPages = async ({ graphql, actions }) => {
   const { createPage } = actions
 
-  const result = await graphql(/* GraphQL */ `
-    query {
+  const result = await graphql(`
+    {
       allMarkdownRemark {
         edges {
           node {
@@ -231,7 +231,7 @@ exports.createPages = async ({ graphql, actions }) => {
         }
       }
       allBlogPost {
-        group(field: tags) {
+        group(field: { tags: SELECT }) {
           fieldValue
         }
       }

package.json

@@ -4,15 +4,15 @@
   "version": "0.0.0",
   "scripts": {
     "build": "gatsby build",
-    "develop": "GATSBY_GRAPHQL_IDE=playground gatsby develop",
+    "develop": "gatsby develop",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "resolutions": {
-    "graphql": "15.6.0"
+    "graphql": "16.6.0"
   },
   "dependencies": {
     "@graphql-tools/schema": "8.3.1",
@@ -21,29 +21,28 @@
     "assert": "2.0.0",
     "codemirror": "5.65.1",
     "codemirror-graphql": "1.2.11",
-    "gatsby": "4.24.8",
+    "gatsby": "5.0.1",
     "gatsby-plugin-anchor-links": "1.2.1",
-    "gatsby-plugin-feed": "4.7.0",
-    "gatsby-plugin-google-analytics": "4.7.0",
-    "gatsby-plugin-less": "6.7.0",
-    "gatsby-plugin-typegen": "2.2.4",
-    "gatsby-plugin-webfonts": "2.2.1",
-    "gatsby-source-filesystem": "4.7.0",
-    "gatsby-transformer-remark": "5.7.0",
+    "gatsby-plugin-feed": "5.0.0",
+    "gatsby-plugin-google-analytics": "5.0.0",
+    "gatsby-plugin-less": "7.0.0",
+    "gatsby-plugin-webfonts": "2.2.2",
+    "gatsby-source-filesystem": "5.0.0",
+    "gatsby-transformer-remark": "6.0.0",
     "globby": "11.0.4",
-    "graphql": "15.6.0",
-    "marked": "4.0.10",
-    "numbro": "2.3.5",
+    "graphql": "16.6.0",
+    "marked": "4.2.2",
+    "numbro": "2.3.6",
     "parser-front-matter": "1.6.4",
-    "prism-react-renderer": "1.2.1",
-    "prismjs": "1.25.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "prism-react-renderer": "1.3.5",
+    "prismjs": "1.29.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "timeago.js": "4.0.2"
   },
   "devDependencies": {
     "@types/codemirror": "5.60.5",
-    "@types/prismjs": "1.16.6",
-    "prettier": "2.4.1"
+    "@types/prismjs": "1.26.0",
+    "prettier": "2.7.1"
   }
 }

src/components/BlogSidebar/index.tsx

@@ -6,14 +6,11 @@ const BlogSidebar: React.FC = () => {
   const data = useStaticQuery<Queries.AllTagsStaticQuery>(graphql`
     query AllTagsStatic {
       allBlogPost {
-        group(field: tags) {
+        group(field: { tags: SELECT }) {
           fieldValue
         }
       }
-      allRecentBlogPost: allBlogPost(
-        limit: 30
-        sort: { fields: [date], order: DESC }
-      ) {
+      allRecentBlogPost: allBlogPost(limit: 30, sort: { date: DESC }) {
         nodes {
           title
           postId

src/pages/blog.tsx

@@ -8,7 +8,7 @@ import Seo from "../components/Seo"
 
 export const query = graphql`
   query BlogPostListPage {
-    allBlogPost(sort: { fields: [date], order: DESC }) {
+    allBlogPost(sort: { date: DESC }) {
       nodes {
         id
         ...BlogPostPreview_post