Не все данные запроса graphql отображаются на странице GatsbyJS - PullRequest
Новая
       64

Не все данные запроса graphql отображаются на странице GatsbyJS

0 голосов
/ 21 октября 2019

Я собираю сайт блога, используя безголовую CMS Gatsby & Strapi, и использую GraphQL для запроса статей для отображения на странице индекса.

Каждая статья связана с типом категории в Strapi. Статьи и категории являются отдельными типами контента в Strapi и связаны через поле отношения.

Я могу запросить все необходимые данные в GraphiQL, и все данные возвращаются без ошибок.

Однако, когдаРеализация запроса в Гэтсби все, кроме поля «категория / имя» возвращается. Ниже приведен код, используемый в настоящее время на странице индекса. 

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

Это результат GraphQL из запроса EDIT --- Я добавил скриншот результатов запроса вGraphQL для наглядности.

В консоли не отображаются ошибки после рендеринга страницы в браузере, а элемент HTML отображается, но остается пустым.

Может кто-нибудь взглянуть на мой код страницы индексаот Гэтсби и дайте мне подсказку о том, где именно теряются эти данные?

1 Ответ

2 голосов
/ 22 октября 2019

данные не потеряны, вы просто не можете получить к ним правильный доступ. доступ к данным с использованием только документа, не используйте 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>
              ))}
...