如何在 React GraphQL 中显示嵌套查询？

Question

我正在使用 React，试图将我的嵌套 GraphQL 查询变成一个列表。

到目前为止，在 GraphiQL 中，以下查询正在生成我正在寻找的内容的顺序和一般结构。基本上，对于每个tag，我希望显示fieldValue，然后在每个tag 下，我想为每个具有tag 的项目列出node.fields.slug。

query MyQuery {
  allMarkdownRemark {
    group(field: frontmatter___tags) {
      tag: fieldValue
      totalCount
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
          }
        }
      }
    }
  }
}

到目前为止，我唯一能正常工作的部分是列出每个 tag ：

{data.articles.group.map(({ tag }) => (
    <ul>
        <li>{ tag }</li>
    </ul>
))}

如何将每个标签的项目列在各自的标签名称下方？

Answer 1

我真的想通了。终于写完了

{data.articles.group.map(({ tag, edges }) => (
    <ul>
        <h3>{ tag }</h3>
        { edges.map(({ node }) => (
            <li>{node.frontmatter.title}</li>
        ))}
    </ul>
))}