Ошибка 'TypeError :dge.node не определена' в Gatsby js. Запрос не возвращается

Question

У меня есть этот код для главной страницы блога, и он показывает TypeError: data.destaquePost.edges.node не определен в браузере. Не уверен, что происходит, но кажется, что запрос ничего не возвращает в консоли. Модуль ReactDev Tools для firefox также не распознает страницу как реагирующую.

Вот эта страница:

import React from 'react'
import { Link, graphql } from 'gatsby'

// Utilities
import Img from 'gatsby-image'
import kebabCase from 'lodash/kebabCase'

// Components
import Alert from '../svg/icons/alert'
import BlogLayout from '../components/layout/BlogLayout'


// BlogIndex Start
const BlogIndex = ({ data }) => {

  return (
  <BlogLayout kind="index" >
    <div className="container mx-auto">

      <div className="flex flex-wrap w-full h-auto"> 
        <div className="w-3/5 h-full pl-1 pr-6" id="destaque">
          <h3 className="text-3xl mb-3 -mt-4">Em Destaque</h3>
          <Link to={`/blog/${kebabCase(data.destaquePost.edges.node.frontmatter.slug)}`} id="post">
            <div className="w-full h-auto relative object-cover">
              <div className="absolute top-0 left-0 z-50 bg-white w-16 h-16 ml-4 rounded-b-lg shadow-md">
                <Alert />
              </div>
              <Img fluid={data.destaquePost.edges.node.frontmatter.featuredImage.childImageSharp.fluid} className="absolute top-0 left-0 w-full h-auto" />
              <div className="absolute bottom-0 left-0">

                <ul className="" id="meta"> 
                  {data.destaquePost.edges.group.map(category => {

                    return (
                      <li 
                        className="pt-1 px-2 bg-white inline-block " >
                          <Link className="font-display uppercase text-criptoOrange-500 hover:text-black" to={`/categorias/${kebabCase(category.fieldValue)}/`}>
                            {category.fieldValue}
                          </Link>
                        </li>
                    )
                  })}

                </ul>
              <h2 className="bg-white text-4xl py-1 px-2 text-criptoBlue-500 hover:text-black">{data.destaquePost.edges.node.frontmatter.title}</h2>
              </div>

            </div>
            <div id="excerpt" className="mt-2 font-light" dangerouslySetInnerHTML={{ __html: data.destaquePost.edges.node.excerpt }} />
            <button className="mt-3 w-36 mx-auto bg-criptoBlue-200 hover:bg-criptoBlue-400 text-black font-light uppercase tracking-wider py-2 px-3 rounded border-criptoBlue-300 hover:border-criptoBlue-500 border-b-2 border-r-2">
              Leia Mais
            </button>
          </Link>
        </div>
        <div className="w-2/5 bg-gray-200 mt-10 pl-6 pr-1">
          <div className="w-full bg-gray-400 mb-12">

          </div>
          <div className="w-full h-64 bg-gray-400"></div>
        </div>

      </div>

    </div>
  </BlogLayout>
  )
}

export default BlogIndex

export const query = graphql`
  query {
    destaquePost: allMarkdownRemark(sort: {order: DESC, fields: [frontmatter___date]}, limit: 1) {
      ##totalCount
      group(field: frontmatter___categories) {
        fieldValue
      }
      edges {
        node {
          id
          excerpt(pruneLength: 270, format: HTML)
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            slug
            title
            categories
            featuredImage {
              childImageSharp {
                fluid(maxWidth: 500) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    }
  }
`

Обычно запрос возвращается на площадке:

Я использую псевдоним для allMarkdownRemark, чтобы получить следующий фильтрованный запрос для следующих сообщений. Понятия не имею, что не так.

Answer 1

В GraphiQL мы видим, что destaque.edges возвращает массив ребер. Если мы хотим отобразить все в этом массиве, нам нужно отобразить поверх него.

Если мы знаем индекс единственного destaque, который мы хотим, мы можем получить к нему прямой доступ с помощью скобка .