并非所有graphql查询数据都呈现在GatsbyJS页面上

我正在使用Gatsby&Strapi headless CMS创建一个博客网站，我正在使用GraphQL查询要显示在索引页上的文章

    const IndexPage = ({ data }) => (
      <Layout>
        <ul>
          {data.allStrapiArticle.edges.map(document => (
            <li key={document.node.id}>
              <Link to={`/${document.node.id}`}>
                <Img fixed={document.node.image.childImageSharp.fixed}/>
                <p>
                  {document.node.categories.name}
                </p>
                <h2>
                  {document.node.title}
                </h2>
                <p>by {document.node.author.username}
                </p>
                <p>
                  {document.node.content}
                </p>
              </Link>
            </li>
          ))}
        </ul>
      </Layout>
    )

    export default IndexPage

    export const pageQuery = graphql`
      query IndexQuery {
        allStrapiArticle {
          edges {
            node {
              id
              image {
                childImageSharp {
                  fixed(width: 200, height: 125) {
                    ...GatsbyImageSharpFixed
                  }
                }
              }
              author {
                username
              }
              title
              content
              categories {
                name
              }
            }
          }
        }
      }
    `

每篇文章都与Strapi中的一个类别类型相关。 文章和类别在Strapi中都是独立的内容类型，通过关系字段链接

我可以在GraphiQL中查询所有需要的数据，并且返回的所有数据都没有错误

但是，在Gatsby中实现查询时，除了“category/name”字段外，其他所有字段都将返回。 下面是索引页中当前使用的代码

    const IndexPage = ({ data }) => (
      <Layout>
        <ul>
          {data.allStrapiArticle.edges.map(document => (
            <li key={document.node.id}>
              <Link to={`/${document.node.id}`}>
                <Img fixed={document.node.image.childImageSharp.fixed}/>
                <p>
                  {document.node.categories.name}
                </p>
                <h2>
                  {document.node.title}
                </h2>
                <p>by {document.node.author.username}
                </p>
                <p>
                  {document.node.content}
                </p>
              </Link>
            </li>
          ))}
        </ul>
      </Layout>
    )

    export default IndexPage

    export const pageQuery = graphql`
      query IndexQuery {
        allStrapiArticle {
          edges {
            node {
              id
              image {
                childImageSharp {
                  fixed(width: 200, height: 125) {
                    ...GatsbyImageSharpFixed
                  }
                }
              }
              author {
                username
              }
              title
              content
              categories {
                name
              }
            }
          }
        }
      }
    `

constindexpage=（{data}）=>(

{data.allStrapiArticle.edges.map（文档=>(


{document.node.categories.name}

{document.node.title}
通过{document.node.author.username}


{document.node.content}


))}

)
导出默认索引扩展
export const pageQuery=graphql`
查询索引查询{
全方位粒子{
边缘{
节点{
身份证件
形象{
childImageSharp{
固定（宽：200，高：125）{
…盖茨比
}
}
}
作者{
用户名
}
标题
内容
类别{
名称
}
}
}
}
}
`

编辑---为了清晰起见，我在GraphQL中添加了查询结果的屏幕截图

在浏览器中呈现页面后，控制台中不会显示任何错误，并且HTML元素被呈现，但仍为空

---

有人能看一下我从盖茨比那里得到的索引页代码，并告诉我这个特定的数据字段在哪里丢失了吗？

数据并没有丢失，你只是没有正确地访问它们。仅使用document访问数据，不使用document.node

 {data.allStrapiArticle.edges.map(document => (
                <li key={document.id}>
                  <Link to={`/${document.id}`}>
                    <Img fixed={document.image.childImageSharp.fixed}/>
                    <p>
                      {document.categories.name}
                    </p>
                    <h2>
                      {document.title}
                    </h2>
                    <p>by {document.author.username}
                    </p>
                    <p>
                      {document.content}
                    </p>
                  </Link>
                </li>
              ))}

{data.allStrapiArticle.edges.map（文档=>(


{document.categories.name}

{document.title}
通过{document.author.username}


{document.content}


))}

数据没有丢失，只是没有正确访问它们。仅使用document访问数据，不使用document.node

 {data.allStrapiArticle.edges.map(document => (
                <li key={document.id}>
                  <Link to={`/${document.id}`}>
                    <Img fixed={document.image.childImageSharp.fixed}/>
                    <p>
                      {document.categories.name}
                    </p>
                    <h2>
                      {document.title}
                    </h2>
                    <p>by {document.author.username}
                    </p>
                    <p>
                      {document.content}
                    </p>
                  </Link>
                </li>
              ))}

{data.allStrapiArticle.edges.map（文档=>(


{document.categories.name}

{document.title}
通过{document.author.username}


{document.content}


))}

谢谢你的提示！但这确实引发了一个错误，即“类别未定义”，我添加了GraphiQL查询的屏幕截图，以防有任何帮助。再次感谢。嘿@AnthonyNixon您的类别是一个数组，所以您不能通过document.categories.name访问它，所以您需要通过

document.categories[0].name访问第一个元素，或者如果有多个元素，您应该迭代这些元素，希望这可以解决问题，对于屏幕截图BTWThanks@nir99，这就成功了，我还没有意识到类别字段是一个数组。在本例中有效的代码是：document.node.categories[0]。name谢谢您的提示！但这确实引发了一个错误，即“类别未定义”，我添加了GraphiQL查询的屏幕截图，以防有任何帮助。再次感谢。嘿@AnthonyNixon您的类别是一个数组，所以您不能通过document.categories.name访问它，所以您需要通过
document.categories[0].name访问第一个元素，或者如果有多个元素，您应该迭代这些元素，希望这可以解决问题，对于屏幕截图BTWThanks@nir99，这就成功了，我还没有意识到类别字段是一个数组。在这种情况下有效的代码是：document.node.categories[0]。name