概要

Gatsby + graphql はデータが空の状態だと、default では error を吐いてしまうのでその対応

解決できること

gatsby dummy content

このあたりが関連してくるerrorは解決できます。

version

"gatsby": "^2.24.0"

原因

default では型推論が働き、null を許容しないため error を吐きます。

error全文(hoge, fuga はご自身のものに置き換えて下さい)

対応方法

上記errorが見やす過ぎて感謝…(ありがとうGatsbyの中の人)

1. typoしてない?
2. ほんとにそんなクエリ存在してる?
3. データがないのであればdummy data作ればいいよ
4. スキーマ定義したらdummy dataも要らないよ

と書かれてます。

公式

公式がわかりにくい人は コチラ

詳細の対応方法

①②に関しては再度ご自身でご確認ください。

③はdummy作ってフロントで参照しないkeyを作っておいて、 filterかけてdummy dataは表示しない。
みたいな処理書けそうと思いましたがイケてない(内容次第ではこれでも良さそうだけどなんか嫌)

ということで④が無難すね。

スキーマの定義の方法

gatsby-node.jsに下記内容を追加して下さい。
(なければrootに作成して下さい)

実際にクエリを発行してるコード(抜粋)↓

補足

ネストしてる部分の記述で少し詰まりましたが、

Cannot query field "name" on type "Users".

と書かれているのであれば、素直にerrorに従って

と書けば問題ないです。

あとは

name: String!
これで必須 parm (nullを許容しない)

name: [String]
これで string が入った配列

type Users implements Node
を
type Users implements Node @dontInfer
こうすることで、未記載のものは型推論が働くという実装に変わります。

type の書き方は ts と違うので直感と反している部分もありますが、これは慣れるしかないすね〜

お気持ち

https://zenn.dev/take77/articles/a266a75bf12c23

→Gatsbyの記事が少ないはわかりみが深いw

あとはそろそろGatsby3も触っていきたいな…(と思ったら4の話がそこまで来てたので見ないふりをした)
[cv:issue_marketplace_engineer]