Nodachisoft Nodachi Sword Icon
  
@あまじ✎ 2021年1月21日に更新

gatsby を2.20以降にバージョンアップした時のバグ対応記録

当サイトでも使っているReact ベースの静的サイトジェネレータである Gatsby ですが、バージョンを 2.19.x から 2.20.x 以降にアップデートしたとき、「Loading (StaticQuery)」という文字列が本番ビルドした画面上に出力されてしまうバグに遭遇したので対応した内容を記録しておきます。

ニッチすぎるかもですが、誰かの役に立つかもしれないし!と思い。笑

事象

下の画像は、本番にデプロイしてアクセスしたら出てきたバグの文字列です。 赤字矢印の先に想定外の「Loading (StaticQuery)」が出力されてしまってます。

bug_at_production_mode

下のように開発環境だとでないのでした。ウムムー。

nobug_at_dev_mode

環境

エラー発生したと時の環境はこんな感じ。

項目 バージョン
OS Windows10 Home 64bit ビルド.18363
node.js 14.5.0
npm 6.14.5
gatsby 2.24.9
babel-plugin-remove-graphql-queries 2.9.15
react 16.13.0
react-dom 16.13.0
@babel/core ^7.2.2

解決方法まとめ

結論から書くと、明確な解決まで辿り着けておらず。PageQuery を使う用に変更して、対応しました。 ただ、自分以外の人はこれで解決した!という情報はいろいろと調べたのでまとめておきます。

その1.Gatsby が使うプラグイン関連とのバージョン組合せ

ここ(GitHub - New gatsby version 2.23.3 every page = Loading (StaticQuery) #24890) いわく、Gatsby v.2.22.15 や Gatsby v2.23.3 と、「babel-plugin-remove-graphql-queries」プラグインの v2.9.5 の組合せで「Loading (StaticQuery) 」が表示されるみたい。「babel-plugin-remove-graphql-queries」は v2.9.4 なら問題ないとのことなので、確認して dependencies にピンポイントでバージョン指定すれば解消するかも。

下のように確認すると、gatsby の依存先として v2.9.15 が入ってました。

確認コマンド
> npm list babel-plugin-remove-graphql-queries
nodachisoft_www@1.0.1 C:\nodachisoft_www
`-- gatsby@2.24.8
  +-- babel-plugin-remove-graphql-queries@2.9.15
  `-- gatsby-plugin-typescript@2.4.16
    `-- babel-plugin-remove-graphql-queries@2.9.15  deduped

ということで大丈夫といわれている組合せをnpm shrinkwrap で入れなおしてみましたが、解消せず。うむむ。

その2

とりあえず書き方を StaticQuery から useStaticQuery に変更してみます。 結果としてgatsby build は成功し画面に「Loading (StaticQuery)」は出力さませんでしたが、代わりにコンソールにエラーが。

ブラウザのコンソールエラー
Error: The result of this StaticQuery could not be fetched.

This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues
    at m (gatsby-browser-entry.js:77)
    at s (SEO.jsx:8)
    at Ki (react-dom.production.min.js:153)
    at vo (react-dom.production.min.js:261)
    at cu (react-dom.production.min.js:246)
    at ou (react-dom.production.min.js:246)
    at Zo (react-dom.production.min.js:239)
    at qo (react-dom.production.min.js:230)
    at Du (react-dom.production.min.js:281)
    at react-dom.production.min.js:284
Za @ framework-dbf3ec7f9a5308aa508c.js:1

SEO.jsx の中で StaticQuery を利用しており、graphql 結果を利用しようとしたところでエラーとなっています。ブラウザ上でデバッグすると StaticQuery タグや useStaticQuery の定義が gatsby-browser-entry.js で定義されており、別途ビルド時に生成されている StaticQuery の結果ファイル(JSON)を参照しようとして、うまく取れなかったということが分かります。

StaticQuery_could_not_be_fetched.png

どうも Gatsby がビルド時に GraphQL 解析後、graphql 関連のコードを削除して綺麗に整えるのですが(babel-plugin-remove-graphql-queries パッケージ)、やっぱそのあたりに問題がありそうな感じ。

その他の疑い

まずは Gatsby の規約にそった GraphQL の書き方をしていなかったからエラーが表面化したのでは?という点を疑いました。

GraphQL の書き方(PageQuery)

Gatsby で GraphQL を扱うとき、大きく PageQuery、StaticQueryタグ利用、useStaticQuery 関数の利用の 3 種類があります。

使い方にそれぞれ気をつける点があります。見直してみて、誤った使い方をしていないことを確認しました。

さらなる詳細は公式ドキュメントをご参照ください。

公式 Gatsby - Docs - graphql

PageQuery

  • /src/pages 配下の PageComponent 内で使えるよ。
  • export const xxxx = graphqlクエリ内容 で定義しておくと、gatsby 側がビルド時に中身を読み取って、PageComponent に data という名前で結果を渡してくれるよ。本番環境実行時は export const xxxx = graphqlクエリ内容部分は削除されるよ。
  • 変数が GraphQL 内で使えるよ。使い方は Gatsby の createPages API を経由して渡すよ。

StaticQuery

  • Gatsby v2 以降なら使えるよ。
  • PageQuery と違って、どんな Component でも使えるよ。
  • 変数は使えないよ。名前の通りビルド時に静的にコンパイルされるよ。

useStaticQuery

  • Gatsby v2.1.0 以降なら使えるよ。
  • PageQuery と違って、どんな Component でも使えるよ。
  • 変数は使えないよ。名前の通りビルド時に静的にコンパイルされるよ。
  • StaticQuery利用に比べて、 React hook 機能を使ってクエリの使いまわしとかしやすいよ。

GitHub 上で言われている幾つかの解決方法

GitHub - Error: The result of this StaticQuery could not be fetched. #24902Error: The result of this StaticQuery could not be fetched のエラーは Gatsby version を 2.23.1 にするとなおるよ、という情報あり。

GitHub - Error running yarn install + gatsby build. ERROR #11321 PLUGIN. Error while running the createPages lifecycle: Reducers may not dispatch actions. #25478 に別のパッケージ問題があり、fix された 2.23.18 を入れなおすことを指定

package.jsonの書き換え
- 元: "gatsby": "^2.24.9", ← 元
+ 後: "gatsby": "2.23.18", ← 後

一度 node_modules を綺麗にしてバージョン直接指定で npm install。バージョンは直接指定

Gatsbyいれなおし
> rm -r node_modules
> rm package-lock.json
> npm uninstall gatsby ;
> npm cache clean --force
> npm install  --save-exact gatsby@2.23.18;
> npm install

Gatsby の 2.23.1 をクリーンインストールしなおしたのですが、解消せず。

結局

StaticQuery や useStaticQuery を使っている箇所が少なかったので、PageQuery で書き換えて使うことに。

本当は useStaticQuery を使いたいところだけど、結構なんども開発環境を入れなおして試行錯誤するのも時間がかかるので、残念ながら一時的にこの方法で代用。

解決方法としては微妙なので、いつか根本的に解決したいです。時間かかったけど得るものがなかったときはつらいですね。

PageQuery での書き方(例)

例ですが、サイトのタイトルを表示するようなコンポーネントの JSX であれば、 例として、 StaticQuery では下のように書いているかと思います。

 
StaticQuery例
import React from "react"
import { StaticQuery, graphql } from "gatsby"
export default function SiteTitle(props) {
  return (
    <StaticQuery
      query={graphql`
        query {
          site {
            siteMetadata {
              title
            }
          }
        }
      `}
      render={data => <h1>{data.site.siteMetadata.title}</h1>}
    />
  )
}

これだと、私の環境ではエラー文言の「Loading (StaticQuery)」が本番環境上のページ上で出力されてしまうので、 Page Query 方式を使うように下のように書き換えました。

 
QueryPageへの書き換え例
import React from "react"
import { graphql } from "gatsby"
export default function SiteTitle( data ) {
  return <h1>{data.site.siteMetadata.title}</h1>
}
export const query = graphql`
  query SiteTitleQuery {
    site {
      siteMetadata {
        title
      }
    }
  }
`

ただ、Page Query は gatsby-node.js からの CreatePage 関数経由で呼び出したりするときに有効となる、という 縛りがありますので、ページ配下の React コンポーネントへ GraphQL の結果を渡してあげるように、 配下のコンポーネントに渡したい、欲しいデータは、この pageQuery 内で取得しておく必要がある、 というのが少し気を付けないとならない点です。

(そう考えると、StaticQuery や useStaticQuery はコンポーネント内に GraphQL でとってきた外部データを埋め込みできるので、ありがたみが分かりますねー。)

参考

変更履歴

更新日 更新内容
2020/07/23 初版公開
2021/01/20 記事の誤り修正。「PageQuery」ではなく「GraphQL Fragment」での解消である旨訂正しました。

コメント

カワジ 2020年11月01日 18:54 PM

私も現在全く同じ問題に直面しています。 もしよろしければ、解決できたならばその方法か、GraphQL Fragmentを用いた方法を教えていただけると嬉しいです。
何より、同じ悩みを抱えているかたがいて安心しました。記事を執筆していただき、ありがとうございました。

あまじ 2021年01月20日 21:56 PM

カワジ 様
メッセージありがとうございます。とても嬉しいです。それと、メッセージご返信遅くなってしまい申し訳ございません。
記事中で、仮の解消法で「GraphQL Fragment を用いた解消」と記載しておりましたが、「PageQuery」の誤りです。混乱させてしまいましたら、大変申しわけございません。
「PageQuery での書き方(例)」を最後の項目に追記いたしました。ご参考になれば幸いです。

 
 
送信しました!

コメント、ありがとうございます。

なんかエラーでした

ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。

Twitter:@NodachiSoft_jp
お名前:
 
連絡先:
 
メッセージ:
 
戻る
内容の確認!

以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください

お名前:
 
連絡先:
 
メッセージ:
 
Roboto からの操作ではないという確認のため確認キーを入れてください。
確認キー=95
戻る
 / 
送信確認へ
コメント欄
コメント送信確認へ

関連ありそうな記事(5件)です!

Gatsby でマークダウンの文章を手軽に装飾する(下線とかマーカーを引く、太字にするなど)

#Gatsby✎ 2021-01-30
Gatsby のマークダウンで手軽に装飾する方法を記載。下線を引く、マーカーを引く、太字にする、点線を引くなどを html タグを省略して文章の一部に適用する。
広告領域
追従 広告領域
目次
gatsby を2.20以降にバージョンアップした時のバグ対応記録
gatsby を2.20以降にバージョンアップした時のバグ対応記録
事象
事象
環境
環境
解決方法まとめ
解決方法まとめ
その1.Gatsby が使うプラグイン関連とのバージョン組合せ
その1.Gatsby が使うプラグイン関連とのバージョン組合せ
その2
その2
その他の疑い
その他の疑い
GraphQL の書き方(PageQuery)
GraphQL の書き方(PageQuery)
PageQuery
PageQuery
StaticQuery
StaticQuery
useStaticQuery
useStaticQuery
GitHub 上で言われている幾つかの解決方法
GitHub 上で言われている幾つかの解決方法
結局
結局
PageQuery での書き方(例)
PageQuery での書き方(例)
参考
参考
変更履歴
変更履歴
コメント
コメント
Nodachisoft © 2020