このブログはgatsby.jsで作っているのですが、useStaticQueryでたびたびエラーになり、それもなぜかproduction環境だけで起き困っていました。

その原因を調査した結果、いろんな方が同様の症状にあたっていたみたいで、原因調査が難航しているようです。
Uncaught Error: The result of this StaticQuery could not be fetched. · Issue #26563 · gatsbyjs/gatsby · GitHub

原因?はキャッシュ管理が濃厚とのことです。

対処としては、

1. コンポーネント名とファイル名を合わせる

たとえば、

home.js
export const Home = () => {
...
}

のような場合はファイル名をHome.js に合わせる、
とすると解決する可能性があるらしいです。

2. Cache-controlを適切に行う

.htaccessなどを使ってHTTPのヘッダCache-controlを設定するとうまくいったり。
Caching Static Sites | Gatsby

3. 実装のバグ

そして、私の場合はただのコーディングバグでしたw

undefinedの対処をやっていない部分が多々あり、そのせいでうまくいってなかったようです。
typescriptを導入し、型で判明しました。

もし同じような問題が起きてて、上記1,2で解決しない場合、自分のソースバグを疑うと良いかと思います。

Copyright 2020 shimu.dev