提升 Node 版本上限#

- image: node:16.19.1-rsync
+ image: node:18.17.0-rsync

{
  "name": "root",
  "version": "0.1.0",
  "engines": {
-   "node": ">= 16"
+   "node": ">= 18"
  }
  // ...
}

升级 React v18#

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

可选的类型安装：

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

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

- import { render, unmountComponentAtNode } from 'react-dom'
+ import { createRoot } from 'react-dom/client'

const ele = document.getElementById('xxx')

- render(<XxxComp />, ele)
- unmountComponentAtNode(ele)

+ const root = createRoot(ele)
+ root.render(<XxxComp />)
+ root.unmount()

升级 Gatsby 及其相关插件#

yarn add -W \
gatsby@^5.11.0 \
gatsby-plugin-image@^3.11.0 \
gatsby-plugin-sharp@^5.11.0 \
gatsby-plugin-sitemap@^6.11.0 \
gatsby-plugin-page-creator@^5.11.0 \
gatsby-plugin-styled-components@^6.11.0 \
gatsby-source-filesystem@^5.11.0 \
gatsby-source-contentful@^8.11.0 \
gatsby-transformer-sharp@^5.11.0

问题处置#

graphql`
  query {
-   data: allContentfulNews(sort: { fields: createdAt, order: DESC }) {
+   data: allContentfulNews(sort: { createdAt: DESC }) {
      # ...
    }
  }
`

graphql`
  query {
-   data: allContentfulNews(sort: { fields: [rank, date] }) {
+   data: allContentfulNews(sort: { rank: ASC, date: ASC }) {
      # ...
    }
  }
`