为什么这个 graphql 显示 TypeError: (...) is undefined答案

【问题标题】：why this graphql is showing TypeError: (...) is undefined为什么这个 graphql 显示 TypeError: (...) is undefined
【发布时间】：2020-12-15 00:28:14
【问题描述】：

您好，我正在尝试使用 graphql 在博客上显示精选帖子，为什么它不起作用？我想展示具有不同风格的第一篇文章 - 像精选和像帖子列表一样休息，所以我尝试创建 2 个不同的 graphql，但我坚持下去。

export default function Featured() {
  return (
    <StaticQuery
      query={graphql`
              query HeadingQuery {
                allMarkdownRemark {
                  edges {
                    node {
                      frontmatter {
                        title
                      }
                    }
                  }
                }
              }
              
        
      `}
      render={data=> (
        <h1>{data.allMarkdownRemark.edges.node.frontmatter.title}</h1>
      )}
    />
  )
}

有 TypeError: (...) is undefined

【问题讨论】：

edges[0] ?究竟是什么？

标签： graphql gatsby

【解决方案1】：

您的查询是否在 GraphQL 游乐场 (localhost:8000/___graphql) 中工作？

另外，你的渲染方法有错误。 edges, 是一个数组，所以你应该遍历它们以显示你的内容或具体地按位置输入：

<h1>{data.allMarkdownRemark.edges[0].node.frontmatter.title}</h1>

【讨论】：

非常感谢我不知道我可以指定它的位置。你能告诉我如何循环通过它吗？或者如何显示从 1 到 5 个位置的帖子？
{data.allMarkdownRemark.edges.map(({node})=><h1>{node.frontmatter.title}</h1>)}