当サイトは、アフィリエイト広告を利用しています

【Gatsby】ブログのGatsbyのversionをv5系にあげた話

作成日：2023月10月29日

更新日：2023年11月30日

Gatsbyのバージョンをv4からv5にアップデートした

ちょっと前にGatsbyのv4にあげたが、そろそろv5にしようかということで
あげてみた。
毎回、いろいろ動かなくなったりエラーが出たりするので
今回はバージョンアップ作業を忘備録として残す。

Gatsby_v5の変更点

v5での主な変更点は下記のようだ

Slices API

Slices APIはコンテンツの変更に対するビルド時間を最大90%削減できるらしい

Slices APIを使えばサイト全体で共有されるコンポーネントを指定でき、
共有コンポーネント（ヘッダー、フッター、共通レイアウトなど）への変更が
全ページの再ビルドをしなくてもいい

部分的なハイドレーション（Partial Hydration）

必要なJavaScriptのみをブラウザに送信することで、サイトのパフォーマンスを向上させる

Node.jsとReactのバージョンアップ

Gatsby v5では

Node.jsのバージョン18以上
Reactのバージョン18以上

となるようだ。

< StaticQuery />コンポーネントの削除

< StaticQuery />は削除されｍ代わりにuseStaticQueryを使うようになる

GraphiQLのバージョン2系へのアップデート

GraphiQLの画面「http://localhost:8000/___graphql」で
開く画面がアップデートされる

全然、調べられてないのでまた調べたらまとめようと思う。

パッケージのアップデート

v5からはReact18にする必要があるので

Gatsby
React

をアップデートした

パッケージのアップデートは「yarn upgrade-interactive --latest」コマンド
で実施した。

詳しくは下記記事でまとめています

GitBash


$ yarn upgrade-interactive --latest
yarn upgrade-interactive v1.22.10
info Color legend :
 "<red>"    : Major Update backward-incompatible updates
 "<yellow>" : Minor Update backward-compatible features
 "<green>"  : Patch Update backward-compatible bug fixes
? Choose which packages to update. (Press <space> to select, <a> to toggle all, <i> to invert selection)
 dependencies
   name                               range   from        to       url
>( ) @emotion/react                     latest  11.10.4  ❯  11.11.1  https://github.com/emotion-js/emotion/tree/main#readme
 ( ) @emotion/styled                    latest  11.10.4  ❯  11.11.0  https://github.com/emotion-js/emotion/tree/main#readme
 ( ) @fontsource/noto-sans-jp           latest  4.5.11   ❯  5.0.16   https://fontsource.org/fonts/noto-sans-jp
 ( ) @fortawesome/fontawesome-svg-core  latest  1.3.0    ❯  6.4.2    https://fontawesome.com
 ( ) @fortawesome/free-solid-svg-icons  latest  6.2.0    ❯  6.4.2    https://fontawesome.com
 ( ) @fortawesome/react-fontawesome     latest  0.1.19   ❯  0.2.0    https://github.com/FortAwesome/react-fontawesome
 ( ) @hookform/error-message            latest  2.0.0    ❯  2.0.1    https://react-hook-form.com
 ( ) @loadable/component                latest  5.15.2   ❯  5.15.3   https://github.com/gregberge/loadable-components#readme
 ( ) @mdx-js/mdx                        latest  1.6.22   ❯  3.0.0    https://mdxjs.com
 ( ) @mdx-js/react                      latest  1.6.22   ❯  3.0.0    https://mdxjs.com
 ( ) classnames                         latest  2.3.1    ❯  2.3.2    https://github.com/JedWatson/classnames#readme
 ( ) disqus-react                       latest  1.1.3    ❯  1.1.5    https://github.com/disqus/disqus-react#readme
 ( ) dotenv                             latest  10.0.0   ❯  16.3.1   https://github.com/motdotla/dotenv#readme
 ( ) dotenv-webpack                     latest  7.1.1    ❯  8.0.1    https://github.com/mrsteele/dotenv-webpack#readme
 ( ) gatsby                             latest  4.22.1   ❯  5.12.9   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby#readme
 ( ) gatsby-image                       latest  2.11.0   ❯  3.11.0   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image#readme
 ( ) gatsby-plugin-algolia              latest  0.26.0   ❯  1.0.3    https://github.com/algolia/gatsby-plugin-algolia#readme
 ( ) gatsby-plugin-canonical-urls       latest  4.22.0   ❯  5.12.0   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-canonical-urls#readme
 ( ) gatsby-plugin-catch-links          latest  4.24.0   ❯  5.12.0   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-catch-links#readme
 ( ) gatsby-plugin-create-client-paths  latest  2.1.17   ❯  4.9.0    https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-create-client-paths#readme
 ( ) gatsby-plugin-emotion              latest  7.22.0   ❯  8.12.0   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-emotion#readme
 ( ) gatsby-plugin-google-gtag          latest  4.22.0   ❯  5.12.3   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-gtag#readme
 ( ) gatsby-plugin-image                latest  2.22.0   ❯  3.12.3   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-image#readme
 ( ) gatsby-plugin-manifest             latest  4.22.0   ❯  5.12.3   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-manifest#readme
 ( ) gatsby-plugin-mdx                  latest  2.14.0   ❯  5.12.3   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-mdx#readme
 ( ) gatsby-plugin-nprogress            latest  4.22.0   ❯  5.12.0   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-nprogress#readme
 ( ) gatsby-plugin-preact               latest  7.3.0    ❯  7.12.0   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-preact#readme
 ( ) gatsby-plugin-react-helmet         latest  3.10.0   ❯  6.12.0   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-react-helmet#readme
 ( ) gatsby-plugin-robots-txt           latest  1.7.1    ❯  1.8.0    https://github.com/mdreizin/gatsby-plugin-robots-txt
 ( ) gatsby-plugin-sass                 latest  2.8.0    ❯  6.12.3   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sass#readme
 ( ) gatsby-plugin-sharp                latest  4.22.0   ❯  5.12.3   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sharp#readme
 ( ) gatsby-plugin-sitemap              latest  5.22.0   ❯  6.12.3   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-sitemap#readme
 ( ) gatsby-remark-autolink-headers     latest  5.22.0   ❯  6.12.3   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-autolink-headers#readme
 ( ) gatsby-remark-custom-blocks        latest  2.10.0   ❯  5.12.0   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-custom-blocks#readme
 ( ) gatsby-remark-images               latest  3.11.1   ❯  7.12.3   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-images#readme
 ( ) gatsby-remark-images-contentful    latest  5.22.0   ❯  6.12.1   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-images-contentful#readme
 ( ) gatsby-remark-prismjs              latest  3.13.0   ❯  7.12.0   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-prismjs#readme
 ( ) gatsby-remark-relative-images      latest  0.2.3    ❯  2.0.5    https://github.com/danielmahon/gatsby-remark-relative-images#readme
 ( ) gatsby-source-contentful           latest  7.20.0   ❯  8.12.4   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful#readme
 ( ) gatsby-source-filesystem           latest  2.11.1   ❯  5.12.1   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem#readme
 ( ) gatsby-transformer-remark          latest  2.16.1   ❯  6.12.3   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-remark#readme
 ( ) gatsby-transformer-sharp           latest  4.22.0   ❯  5.12.3   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sharp#readme
 ( ) gatsby-transformer-sqip            latest  4.22.0   ❯  5.12.3   https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sqip#readme
 ( ) preact                             latest  10.11.3  ❯  10.18.1  https://preactjs.com
 ( ) preact-render-to-string            latest  5.2.6    ❯  6.2.2    https://github.com/developit/preact-render-to-string
 ( ) prism-react-renderer               latest  1.3.5    ❯  2.1.0    https://github.com/FormidableLabs/prism-react-renderer#readme
 ( ) prop-types                         latest  15.7.2   ❯  15.8.1   https://facebook.github.io/react/
 ( ) react                              latest  16.14.0  ❯  18.2.0   https://reactjs.org/
 ( ) react-device-detect                latest  2.2.2    ❯  2.2.3    https://github.com/duskload/react-device-detect#readme
 ( ) react-dom                          latest  16.14.0  ❯  18.2.0   https://reactjs.org/
 ( ) react-helmet                       latest  5.2.1    ❯  6.1.0    https://github.com/nfl/react-helmet#readme
 ( ) react-hook-form                    latest  7.34.2   ❯  7.47.0   https://www.react-hook-form.com
 ( ) react-router-dom                   latest  5.3.3    ❯  6.17.0   https://github.com/remix-run/react-router#readme
 ( ) react-scroll                       latest  1.8.7    ❯  1.9.0    https://github.com/fisshy/react-scroll
 ( ) twin.macro                         latest  2.8.2    ❯  3.4.0    https://github.com/ben-rogerson/twin.macro#readme

spaceで選んで、enterを押すとメジャーアップデートされて
package.jsonが下記変わる。

ここでReactとGatsbyを選択した。

nodeのversionをあげる

v5からはnode.jsのversionも18以上が必要になるので
あげておく。

nvmでnodeのversionをあげる

当ブログではnode.jsはnvmで使っているのでnvmを使って
versionをあげた

インストール

version18以上のnodeをインストールする

GitBash


nvm install v18.9.0

versionの切り替え

インストールしたversionに切り替える

GitBash


nvm use v18.9.0
Now using node v18.9.0 (npm v8.19.1)

確認

切り替わっていることを確認

GitBash


nvm current
v18.9.0

version変更維持のためエイリアスをつける

GitBash


nvm alias default v18.9.0
default -> v18.9.0

こうしないと入るたびに切り変える必要がある。

nvmの詳しい使い方に関しては下記記事でまとめています

デプロイする時の指定

当ブログはホスティングはnetlifyを使っているので
デプロイする時のnodeのversionを指定しておく

.nvmrc


v18.9.0

プロジェクト直下に.nvmrcを作り、versionを記載しておく

詳しくは下記記事で書いてます

起動確認

Gatsbyをv5にアップデートする準備はできたので
起動確認する

何件かエラーが出たので対応をメモ。

ERROR #11329 API.NODE.VALIDATION

「gatsby develop」で下記のようなエラーが発生した

error


ERROR #11329  API.NODE.VALIDATION

Your plugins must export known APIs from their gatsby-node.

See https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/ for the list of Gatsby node APIs.

- The plugin gatsby-plugin-mdx@2.14.0 is using the API "unstable_shouldOnCreateNode" which is not a known API.

Some of the following may help fix the error(s):

- Rename "unstable_shouldOnCreateNode" -> "shouldOnCreateNode"

調べてみると、
Gatsbyのプラグイン「gatsby-plugin-mdx」が「unstable_shouldOnCreateNode」を使っているのが
原因のようだ。

「gatsby-plugin-mdx」は記事をmdxでcontentfulから記事を取得するため
version更新をとめている。
※詳しくは下記記事の「gatsby-plugin-mdx」項目を参照

そしてv5から「shouldOnCreateNode」APIが安定版となり
「unstable_shouldOnCreateNode」は非推奨となったためエラーとなったようだ。

対応

gatsby-plugin-mdxのversionはあげられないので
Gatsbyのプラグインのソースコードを開き、unstable_shouldOnCreateNodeという名前が使われている箇所を探して
shouldOnCreateNodeに変更したらエラーは消えたのでとりあえず良しとした。
※VScodeでプロジェクトを検索置換しただけ

警告

一旦、エラーは解決したが、下記のような警告が
たくさん出ていたので対応する

GitBash


warn Deprecated syntax of sort and/or aggregation field arguments were found in your query (see https://gatsby.dev/graphql-nested-sort-and-aggregate). Query was automatically converted to a new syntax. You
should update query in your code.

Current query:

query tagQuery {
  allContentfulBlogPost {
    group(field: tags___title) {
      totalCount
      fieldValue
    }
  }
}

Converted query:

query tagQuery {
  allContentfulBlogPost {
    group(field: {tags: {title: SELECT}}) {
      totalCount
      fieldValue
    }
  }
}

これはGraphQLクエリで非推奨となったソートや集約フィールドの引数の構文が使用されていることで
でている警告

一応、勝手に置き換えて実行していくれているので
ほっとていも問題はなさそうだが、修正した。

build確認

「gatsby develop」で動作するを確認し
「gatsby build」でbuildが通ったら
netlifyにdeployしてちゃんとできたのでv5への移行は完了

まとめ

gatsbyをv5にあげた。
今回はReactやnodeのversionもあわせて
あげる必要があったので少し手間だった。

v5で追加された新機能については全然試せていないので
おいおい調べていきたい

v5ではないがv4から追加された

FileSystemRouteAPI
遅延静的生成 (DSG)

については下記記事で紹介しています。
両方ともbuild時間が短縮されるので対応した方が
いいと思います

【Gatsby】ブログのGatsbyのversionをv5系にあげた話

Gatsby_v5の変更点

Slices API

部分的なハイドレーション（Partial Hydration）

Node.jsとReactのバージョンアップ

< StaticQuery />コンポーネントの削除

GraphiQLのバージョン2系へのアップデート

パッケージのアップデート

package.json内のpackageをアップデートする方法

nodeのversionをあげる

nvmでnodeのversionをあげる

インストール

versionの切り替え

確認

version変更維持のためエイリアスをつける

nvmをWindowsでinstallして使う方法

デプロイする時の指定

netlifyデプロイ時にnodeのversionを指定する

起動確認

ERROR #11329 API.NODE.VALIDATION

【Gatsby × contentful】MDX形式でcontentful記事を表示する

対応

警告

build確認

まとめ

【Gatsby × contentful】page生成にFileSystemRouteAPIを使う

【Gatsby × contentful】遅延静的生成 (DSG)の使い方

参考

新着記事

【FastAPI】Query, Path, Bodyは何のための関数か？

【Python】if inとif notinの使いかた

【Python】PythonでのNoneの正しい判定方法~ifとif notの使い分け~

【Python】VSCodeでのPYTHONPATH設定ガイド

【Python】PYTHONPATHって何？