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

Question

我正在React中工作，试图将嵌套的GraphQL查询转换为列表。

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

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>
))}