Gatsby如何获取所有节点列表并修复读取edges为undefined的报错

报错原因 #

报错有两个核心问题：

• Gatsby 页面级 GraphQL 查询的返回结果统一挂载在 props.data 属性下，你直接取 props.item 自然是 undefined，导致访问 edges 时报错。
• 查询返回的 edges 是数组类型，每个数组元素才包含 node 属性，不能直接通过 edges.node 取值。

修复后代码 #

import { graphql } from "gatsby"
import React from "react"
import Layout from "../layouts/Layout"
const _ = require("lodash")

export default props => {
    // 先从data下取查询结果，再遍历edges数组拿所有node
    const majorNodes = props.data.item.edges
    const majors = _.uniq(majorNodes.map(item => item.node.major))
 
  return (
    <Layout>
      {/* 遍历数组渲染为独立元素，避免直接拼接字符串 */}
      <div>
        {majors.map((major, index) => (
          <p key={index}>{major}</p>
        ))}
      </div>
    </Layout>
  )
}

export const query = graphql`
  query majors {
    item: allContentfulPortfolio {
      edges {
          node {
              major
          }
      }
    }
  }
`

渲染方式说明 #

你原来直接写{majors}的写法语法上不会报错，但React会把数组的所有元素直接拼接成纯字符串输出，没有分隔符也没有结构，实际使用时建议遍历数组渲染为独立的列表项或者段落元素，展示效果更符合预期。

内容的提问来源于stack exchange，提问作者Aman