skip to content
私的歌詞倉庫

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

/ 4 min read

Updated:
View more blogs with the tag gatsby , View more blogs with the tag graphql , View more blogs with the tag javascript , View more blogs with the tag npm
Table of Contents

はじめに

久しぶりにブログを書いていたら、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 ($skip: Int!, $limit: Int!, $draft: [Boolean]!) {
query hoge($skip: Int!, $limit: Int!, $draft: [Boolean]!) {
  }

fields の名前を変更

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

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

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

最後に

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

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

参考サイト