Gatsby + graphql でクエリのnullを許容する

概要

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

解決できること

gatsby dummy content

There was an error in your GraphQL query:
Cannot query field "hoge" on type "fuga".

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

version

"gatsby": "^2.24.0"

原因

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

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

There was an error in your GraphQL query:

Cannot query field "hoge" on type "fuga".

If you don't expect "hoge" to exist on the type "fuga" it is most likely a typo.
However, if you expect "hoge" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query
and what shape they have
- You want to optionally use your field "hoge" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the
GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy
content". Visit our docs to learn how you can define the schema for "fuga":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

対応方法

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

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

と書かれてます。

公式

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

詳細の対応方法

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

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

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

スキーマの定義の方法

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

gatsby-node.js

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
    type Users implements Node {
      name: String
      id: Number
      image: URL
    }
    type URL {
      url: String
    }
  `
  createTypes(typeDefs)
}

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

User.js

export const query = graphql`
  {
    allUser {
      nodes {
        id,
        name,
        image {
          url
        }
      }
    }
  }
`

補足

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

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

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

gatsby-node.js

    type Users implements Node {
      name: String
    }

と書けば問題ないです。

あとは

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

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

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

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

お気持ち

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

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