Gatsby.js V3以降で WebpackError: The result of this StaticQuery could not be fetched.が出る時の対処法

このサイトをGastsby.jsを使用して作成したが、その中で v2 => v3 を諦めたので、まとめる。

WebpackError: The result of this StaticQuery could not be fetched

経緯

v2からv3にしてからこのエラーが発生した。 v2までは page外でGraphiQLを実行する場合は useStaticQuery や StaticQueryコンポーネントを使うのがセオリーでだった。 v3にしてからuseStaticQueryがこのエラーで動かない。

https://github.com/gatsbyjs/gatsby/issues/24902

こちらのissueにあるように

• node_modules/ の削除
• gatsby clean の実行
• .cache/ の手動削除

いずれを試しても対処できなかった。

https://github.com/gatsbyjs/gatsby/issues/24902#issuecomment-860122334

こちらにあるように、 useStaticQueryを削除し、StaticQueryコンポーネントに置き換えれば動くらしいが、このサイトでは React hook API を使用しており、useStaticQueryコンポーネントスタイルでは使い勝手が悪く、結果v2のままで行くことにした。

結果

v2のまま様子見で。