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

Question

我正在使用 Gatsby 和 Strapi 无头 CMS 构建一个博客网站，并且我正在使用 GraphQL 查询文章以显示在索引页面上。

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

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

但是，在 Gatsby 中实现查询时，除了“类别/名称”字段之外的所有字段都将被返回。 下面是当前在索引页中使用的代码。

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

This is the GraphQL result from the query 编辑---为了清楚起见，我在 GraphQL 中添加了查询结果的屏幕截图。

在浏览器中渲染页面后，控制台中未显示任何错误，并且 HTML 元素已渲染但仍为空。

有人可以看看我来自 Gatsby 的索引页代码，并告诉我这个特定数据文件丢失的位置吗？

Answer 1

数据不会丢失，您只是没有正确访问它们。仅使用 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>
              ))}