Gatsby 自定义嵌套类型场景下 GraphQL group 功能异常问题

问题根因 #

你遇到的拼接问题是 Gatsby 聚合逻辑的正常表现：当你在 allTrack 根查询下对两层嵌套数组字段（chapters 是数组、每个 Chapter 下的 videos 又是数组）做分组时，Gatsby 会将单个 Track 节点下所有匹配到的视频标题序列化拼接为逗号分隔的字符串，作为分组的唯一键，不会自动递归展开嵌套数组的元素做独立分组。只有对根节点的一级单值字段、或者一级数组字段分组时才会按单个值拆分统计。

解决方案 #

方案1：从 Video 节点层级做分组（最推荐） #

你要分组的核心维度是视频标题，直接从最底层的 Video 节点发起查询即可，还可以通过反向关联获取对应的 Track 信息。

1. 先修改 Schema 定义，给 Video 新增反向关联 Track 的字段：

type Track implements Node {
  title: String!
  chapters: [Chapter] @link
}

type Chapter implements Node {
  title: String!
  videos: [Video] @link
}

type Video implements Node {
  title: String!
  # 新增反向关联字段，自动匹配所属的 Track
  belongingTrack: Track @link(by: "chapters.videos.id")
}

2. 直接查询 allVideo 做分组：

query {
  allVideo {
    group(field: title) {
      fieldValue
      totalCount
      # 可以按需获取对应 Track 信息
      nodes {
        belongingTrack {
          title
        }
      }
    }
  }
}

方案2：Track 节点预存扁平标题数组 #

如果你必须从 Track 层级发起分组查询，可以提前把嵌套的视频标题拉平存储为 Track 的一级字段：

1. 在 Schema 中给 Track 新增预计算字段：

type Track implements Node {
  title: String!
  chapters: [Chapter] @link
  # 新增扁平化的所有视频标题数组
  allVideoTitles: [String!]!
}

2. 在 gatsby-node.js 的 onCreateNode 钩子中，给每个 Track 节点的 allVideoTitles 赋值，拉平所有嵌套章节下的视频标题存入该数组。
3. 直接用该字段做分组查询：

query {
  allTrack {
    group(field: allVideoTitles) {
      fieldValue
      totalCount
    }
  }
}

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