Node.js v18 にアップデートしたら gatsby-query-params が使えなくなったのでリプレイスした話

こんにちは、上條（mk-0A0）です。
先日プロジェクトで Node.js をアップデートする機会があったので、その時に遭遇したエラーのことを残しておこうと思います。

背景

今回アップデートをしたプロジェクトの Node.js は、使用していたバージョンが14でした。
v14 は4月末にサポートが終了したためこの機会に LTS である v18 へアップデートすることになったのですが、その際にプロジェクトで使用していた gatsby-query-params というライブラリがエラーを起こしてしまいました。

gatsby-query-params とは

Gatsby で使用できるプラグインの一つで、現在の URL の query を取得できます。
比較的マイナーなライブラリのようですが、もとからプロジェクトに入っていて、Node.js をアップデートするまでは特に問題なく使用していました。

https://github.com/akash-joshi/gatsby-query-params

エラー文

package.json の Node.js のバージョンを18に書き換え、npm i したところで以下のエラーが起こりました。

npm i
code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: ***@1.0.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0.0 || ^16.0.0" from gatsby-query-params@1.3.0
npm ERR! node_modules/gatsby-query-params
npm ERR!   gatsby-query-params@"^1.2.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

よく読んでいくとこのように書いてあります。

ERESOLVE unable to resolve dependency tree

この部分は依存関係のエラーが起こっていることを表しています。
さらに読み進めていくと、以下のように書いてあります。

peer react@”^15.0.0 || ^16.0.0″ from gatsby-query-params@1.3.0

これは gatsby-query-params の v1.3.0 は React v15.0.0 ~ v16.xx.xx までしか対応してないよ！と言われています。要は古い React にしか対応していないとのことでした。

gatsby-query-params のバージョンを上げればいいのでは？と思い GitHub を見に行くと、現在のバージョンである1.3.0が最新であり2年前を最後にメンテナンスされていないようでした。
そのため、代わりに使えるライブラリを検討することになりました。

代替のライブラリ

gatsby-query-params の代わりとして、もともとプロジェクトに入っていた query-string を使うことにしました。リプレイスは gatsby-query-params を使っていた部分のコードを差し替えるだけで済んだので、そこまで負担はありませんでした。

query-string を調べていくと、microCMS のチュートリアルで使用しているのを見つけたので、それを参考にサンプルコードとしてプレビュー画面の実装をしてみました。

gatsby-query-params を使った場合

import { useEffect, useState } from "react"
import { getSearchParams } from 'gatsby-query-params'

import Layout from "../../../components/layout"

const NewsPage = () => {
  const queryParams = getSearchParams()
  const [pageContext, setPageContext] = useState<GatsbyTypes.NewsQuery | null>(null)

  useEffect(() => {
    if (!process.env.GATSBY_MICROCMS_API_KEY) return
    if (!Object.keys(queryParams).length) return

    fetch(`https://your-service-id.microcms.io/api/v1/news/${queryParams.contentId}?draftKey=${queryParams.draftKey}`, {
      headers: {
        'X-MICROCMS-API-KEY': process.env.GATSBY_MICROCMS_API_KEY,
      },
    })
      .then((response) => response.json())
      .then((responseEntity) => {
        setPageContext(responseEntity)
      })
  }, [queryParams])

  return (
    <Layout>
      <NewsDetailTemplate pageContext={pageContext} />
    </Layout>
  )
}

export default NewsPage

query-string を使った場合

import { useEffect, useState } from "react"
import queryString from 'query-string'
import { PageProps } from 'gatsby'

import Layout from "../../../components/layout"

const NewsPage = ({ location }: PageProps) => {
  const queryParse = queryString.parse(location.search)
  const { contentId, draftKey } = queryParse
  const [pageContext, setPageContext] = useState<GatsbyTypes.NewsQuery | null>(null)

  useEffect(() => {
    if (!process.env.GATSBY_MICROCMS_API_KEY) return
    if (!queryParse.length) return

    fetch(`https://your-service-id.microcms.io/api/v1/news/${contentId}?draftKey=${draftKey}`, {
      headers: {
        'X-MICROCMS-API-KEY': process.env.GATSBY_MICROCMS_API_KEY,
      },
    })
      .then((response) => response.json())
      .then((responseEntity) => {
        setPageContext(responseEntity)
      })
  }, [])

  return (
    <Layout>
      <NewsDetailTemplate pageContext={pageContext} />
    </Layout>
  )
}

export default NewsPage

まとめ

よく言われていることですが、定期的にライブラリをアップデートすることが大事だなと身をもって感じました。ですが、エラー文の意味を調べまくったおかげで、エラー文の読み方が少し分かるようになったと思います。もっと知見が貯まったらエラー文をまとめた記事を書きたいです。