Not all graphql query data being rendered on GatsbyJS page

Question

I'm putting together a blog site using Gatsby & Strapi headless CMS and I'm using GraphQL to query articles to display on the index page.

Each article is related to a category type in Strapi. Articles and categories are both separate content types in Strapi and are linked via a relation field.

I can query all the needed data in GraphiQL and all data is returned without errors.

However, when implementing the query in Gatsby all but the "category/name" field is being returned. Below is the code currently being used in the index page.

    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 EDIT--- I've added a screenshot of the query results in GraphQL for clarity.

No errors are shown in the console after rendering the page in the browser and the HTML element is rendered but remains empty.

Could someone take a look at my index page code from Gatsby and give me a tip as to where this particular data filed is being lost?

nir99 nir99 · Accepted Answer · 2019-10-22T05:27:50

the data aren't lost you just dose not access them correctly . access data using just document , dont use 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>
              ))}

Not all graphql query data being rendered on GatsbyJS page

1 Answers