Apollo GraphQL访问嵌套字段报TypeError is undefined如何解决

你的GraphQL查询写法没有问题，报错是因为对返回的数据结构理解错了：

• data.category.products是商品对象构成的数组，不是单个商品对象，数组本身不存在prices属性，直接访问data.category.products.prices得到的就是undefined，再调用.map()自然会抛出类型错误。
• 你写的遍历data.category.products的代码能正常运行，刚好也能证明products是数组类型。

另外你当前的代码还有一个隐藏问题：useQuery在请求发出的初始阶段、还没拿到返回结果时，data的值是undefined，这时候直接访问data.category也会抛错，必须做加载状态判断或者防御性访问。

需要两层遍历：先遍历products数组拿到单个商品对象，再遍历单个商品下的prices数组，同时补上加载、错误状态处理：

export default function App() {
  const { data, loading, error } = useQuery(QUERIES)

  if (loading) return <div>加载中...</div>
  if (error) return <div>请求失败：{error.message}</div>

  return (
    <div className="App">
      {data.category.products.map((product) => (
        <div key={product.id}>
          <p>商品ID：{product.id}</p>
          {/* 遍历当前商品的价格列表 */}
          {product.prices.map((price, index) => (
            <p key={index}>
              {price.currency.label} {price.amount}
            </p>
          ))}
        </div>
      ))}
    </div>
  );
}

如果不想单独写加载判断，也可以用可选链操作符做防御性访问，避免请求未完成时的空指针报错：

{data?.category?.products?.map((product) => (
  // 内部遍历prices的逻辑不变
))}

你在GraphQL Playground中执行查询不报错，是因为Playground拿到的是请求完成后的完整响应，你可以展开返回结果看结构，就能直观看到products是数组、prices是每个数组项的子字段，和你写的查询逻辑无关。

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