Gatsby迁移指南:v4 To v5 - Jim的独立博客

391 字

2 分钟

Gatsby迁移指南:v4 To v5

2023-09-15

前端

/

gatsby

NOTE
官方迁移指南

NOTE
书接上回 Gatsby 迁移指南: v2 To v3
书接上回 Gatsby 迁移指南: v3 To v4

提升 Node 版本上限#

1
image: node:16.19.1-rsync
2
image: node:18.17.0-rsync

1
{
2
  "name": "root",
3
  "version": "0.1.0",
4
  "engines": {
5
   "node": ">= 16"
6
   "node": ">= 18"
7
  }
8
  // ...
9
}

升级 React v18#

1
yarn add -W react@^18.2.0 react-dom@^18.2.0

可选的类型安装：

1
yarn add -W -D @types/react@^18.2.18 @types/react-dom@^18.2.7

若使用了render与unmountComponentAtNode创建与销毁组件，可迁移至createRoot API：

1
 import { render, unmountComponentAtNode } from 'react-dom'
2
 import { createRoot } from 'react-dom/client'
3

4
const ele = document.getElementById('xxx')
5

6
 render(<XxxComp />, ele)
7
 unmountComponentAtNode(ele)
8

9
 const root = createRoot(ele)
10
 root.render(<XxxComp />)
11
 root.unmount()

升级 Gatsby 及其相关插件#

1
yarn add -W \
2
gatsby@^5.11.0 \
3
gatsby-plugin-image@^3.11.0 \
4
gatsby-plugin-sharp@^5.11.0 \
5
gatsby-plugin-sitemap@^6.11.0 \
6
gatsby-plugin-page-creator@^5.11.0 \
7
gatsby-plugin-styled-components@^6.11.0 \
8
gatsby-source-filesystem@^5.11.0 \
9
gatsby-source-contentful@^8.11.0 \
10
gatsby-transformer-sharp@^5.11.0

问题处置#

迁移 GraphQL 字段语法#

排序（sort）与聚合（distinct）字段的参数已由枚举传递变更为嵌套对象输入。

在 Gatsby v5 版本中会对其进行自动转换并输出警告信息，如图所示：

graphql-nested

根据警告信息对相应的代码进行调整即可：

1
graphql`
2
  query {
3
   data: allContentfulNews(sort: { fields: createdAt, order: DESC }) {
4
   data: allContentfulNews(sort: { createdAt: DESC }) {
5
      # ...
6
    }
7
  }
8
`

1
graphql`
2
  query {
3
   data: allContentfulNews(sort: { fields: [rank, date] }) {
4
   data: allContentfulNews(sort: { rank: ASC, date: ASC }) {
5
      # ...
6
    }
7
  }
8
`