如何在JS中正确定义GraphQL内联片段的返回类型？

正确的SAMPLE_DATA写法 #

你使用的jsonToGraphQLQuery库有特定语法规则生成内联片段，不能直接在JS对象中写GraphQL原生的... on语法，需要用库规定的__on字段定义：

const SAMPLE_DATA = {
  edges: {
    node: {
      __on: [
        {
          ImageSample: {
            id: true,
            sample: true
          }
        },
        {
          PointCloudSample: {
            id: true
          }
        }
      ]
    }
  }
};

关键说明 #

1. __on字段的作用：这是json-to-graphql-query库专门用来定义内联片段的属性，接收一个数组，数组中每个对象对应一个... on片段。
2. 片段结构：每个数组元素是一个对象，键为要匹配的GraphQL类型名（如ImageSample），值为该类型需要查询的字段（字段值设为true表示要查询该字段）。
3. 错误原因解析：
   • 直接在JS对象中写... on ImageSample属于JS语法错误，JS对象不支持这种写法。
   • 写node: {id}报错是因为SampleItem父类型本身没有id字段，id仅存在于它的子类型中，必须通过内联片段指定具体子类型才能查询该字段。

生成的查询效果 #

使用上述SAMPLE_DATA，通过jsonToGraphQLQuery生成的GraphQL查询会和你需要的完全一致：

query MyQuery {
  samples(dataset: "", view: "") {
    edges {
      node {
        ... on ImageSample {
          id
          sample
        }
        ... on PointCloudSample {
          id
        }
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者prabin badyakar