Gatsbyのバージョンをv4からv5に上げた

2022-12-04

はじめに
ライブラリのアップデート
query の修正
fields の名前を変更
最後に
参考サイト

はじめに

久しぶりにブログを書いていたら、Gatsby の v5 が出ていることに気づいたのでアップデートしました。色々試行錯誤してやっとアップデートできたのでやったことを紹介していきます。といっても大体、公式サイトのマイグレーションガイドに沿っていけば動くはずです。ただ、自分の場合はもともとのバージョンが古すぎたのか変なところでエラーが出ていました…

npmを使ってやっていますが、yarn でもいい感じに置き換えれば動きそうな気はしています。

アップデート作業をPRでやっているので結果だけを見たい方はそちらを見ると良いかもしれません。

ライブラリのアップデート

最初にとりあえずライブラリのアップデートをしました。npm outdatedして古いライブラリを以下のコマンドを使ってアップデートしました。

アップデートのコマンド

npm install アップデートしたいライブラリ名@latest --legacy-peer-deps

自分の場合は、npmのバージョンが9.1.3で7以降だったため、--legacy-peer-depsをつけました。このオプションは、npm4から6の挙動にするオプションみたいです。理解があっているか怪しい…

query の修正

ライブラリをアップデートした段階で、gatsby developでビルドするとエラーが出てきたのですが、パーセントエンコードされており、かなり見づらかったです。gatsby buildすると見やすいエラー表示になりました。エラー内容は、以下のような内容でした。

エラー内容

GraphQL Document Validation  This anonymous operation must be the only defined operation.
（省略）
Error: GraphQL Document Validation failed with 1 errors;
Error 0: This anonymous operation must be the only defined operation.

こちらのサイトを読んで解決しました。 query に対して明示的に名前をつけないといけないみたいです。

queryの名前を明示的にする

- query ($skip: Int!, $limit: Int!, $draft: [Boolean]!) {
+ query hoge($skip: Int!, $limit: Int!, $draft: [Boolean]!) {
    }

fields の名前を変更

gatsby buildすると query の警告と修正案がコンソールに出ていたのでコピペして修正しました。

fieldsを変更

{
    allMarkdownRemark(
-       sort: { order: DESC, fields: [frontmatter___date] },
+       sort: { frontmatter: { date: DESC } },
    )

Gatsby の公式サイトにも解説があります。

最後に

Gatsby のバージョンを v4 から v5 に上げました。GraphQL 周りの修正が全く分からず手こずりましたがなんとか修正できました。

アドベントカレンダーの記事を書いている時に何気なくバージョンを上げたらビルド自体通らなくなり焦りましたが、なんとか修正しきったので一安心です。GraphQL ももっと勉強せねばー。

はじめに

ライブラリのアップデート

query の修正

fields の名前を変更

最後に

参考サイト