4

Netlify CMS で Gatsby を使用しており、ファイル コレクションにオプションのフィールドがいくつかあります。これに関する問題は、GraphQL を使用してこれらのフィールドを取得できないことです。空白のままにするとフィールドが存在しないためです。

たとえば、次のコレクション ファイルがあるとします。

label: "Primary Color",
name: "primary",
file: "data/palette.yaml",
widget: "object",
fields: [
  {
    label: "Light",
    name: "light",
    required: false,
    widget: "string"
  },
  {
    label: "Main",
    name: "main",
    required: false,
    widget: "string"
  },
  {
    label: "Dark",
    name: "dark",
    required: false,
    widget: "string"
  },
  {
    label: "Contrast Text",
    name: "contrastText",
    required: false,
    widget: "string"
  }
]

すべてのフィールドはオプションです。ユーザーが の値のみを入力するとしますmain。これにより、データが次のように保存されます。

primary:
  main: '#ff0000'

lightdarkおよびcontrastTextまったく保存されません-それらは単に完全に除外されます。

GraphQL でデータをクエリするときは、ユーザーが入力したオプション フィールドと空白のままになっているフィールドがわからないため、明らかにすべてのフィールドを確認する必要があります。これは、クエリが次のようになることを意味します。

query MyQuery {
  paletteYaml {
    primary {
      light
      main
      dark
      contrastText
    }
  }
}

ユーザーがmainフィールドにのみ入力した上記の例を使用すると、上記のクエリは としてエラーをスローし、lightフィールドは存在しません。darkcontrastText

これには (フォルダー コレクション タイプではなく) ファイル コレクション タイプを使用しているため、既定値を設定できません。とにかくデフォルト値を設定できたとしても、GraphQL と Yaml は値として受け入れないため、問題ありません。最良の代替手段として、または空の文字列 ( )undefinedのみを受け入れることができます。null""

nullすべてのフィールド値をまたはに設定して yaml ファイルを手動で保存しても""、クエリ結果を別の JavaScript オブジェクトと深くマージしているため、追加の問題が発生するため、これは機能しません。

undefinedエラーをスローする代わりに、空白の (欠落している) フィールドごとに GraphQL が返されるようにするか、空白/欠落しているフィールドをまったく返さないようにする必要があります。

これは一般的な問題 (Netlify CMS でのオプション フィールドの処理) のように見えますが、それに関するドキュメントには何もありません。人々はこの問題をどのように処理しますか?

4

0 に答える 0