やろうとしていること

Gatsby×MicroCMSでLP制作
GraphQLでデータを取得して動的に静的ページを生成
Netlifyで自動ビルド＆デプロイ

問題

CMS側で任意入力としているフィールドが空の時、ビルドで失敗する

例）CMSで以下のようなフィールドがあります

メイン画像(mainImage)
タイトル（title）
サブ画像(subImage)

サブ画像が未入力の時、以下のコードだとGatsbyのビルドが失敗します。

export const query = graphql`{
  microcmsHoge {
    title
    mainImage {
      url
    }
    subImage { //ここでビルド失敗
      url
    }
  }
}`

Cannot query field "subImage" on type "microcmsHoge"

分からないこと

データが存在しないフィールドから情報取得しようとするとコケるということだと思うのですが、
CMS運用のユースケースとして、フィールドを空（未入力）にすることを許容したいことは多々あるかと思います。

そのような場合、フロントの実装はどのようにすれば良いのでしょうか？
GraphQLを使うのが初めてのため、初歩的な質問でしたらすみません。よろしくお願いします。

行動規範の内容に同意します

回答1件

自己解決

Gatsbyがnullのフィールドを無いものとして取り扱ってしまうらしい。
https://github.com/gatsbyjs/gatsby/issues/2392

V2系はAPIにスキーマを設定できる。
https://www.gatsbyjs.org/docs/schema-customization/

空の可能性があるフィールドにスキーマを設定しておくことで問題を回避できる。

js
1// gatsby-node.js
2
3exports.createSchemaCustomization = ({ actions }) => {
4  const { createTypes } = actions
5
6 //type名はパスカルケースで宣言すること
7  const typeDefs = `
8  type MicrocmsHoge implements Node {
9    subImage: Image
10  }
11  type Image {
12    url: String
13  }
14  `
15  createTypes(typeDefs)
16}