Question

Apollo GraphQL，获取 typeerror 时：未定义

2022-07-04

362

reactjs graphql apollo-client

我是 GraphQL 新手，我不明白为什么当我请求获取数据时，例如 data.category.products ，我得到了正确的输出，但是例如，如果我请求 data.category.products.prices ，我会收到此错误： TypeError：data。 category.products.prices 未定义

我的查询：

query AllCategory{
  category {
    products {
      id
      prices {
        currency {
          label
        }
        amount
      }
    }
  }
}

在 Playground 中没有给出错误

这是架构：

实际上我如何调用：（这是错误的）

export default function App() {

   const {data} = useQuery(QUERIES)

   return (
    
     <div className="App">
       {data.category.products.prices.map((shop) => (
         <p key={shop.currency.label}>{shop.amount}</p>
       ))}
     </div>
   );
}

这里没有错误：

{data.category.products.map((shop) => (
   <p key={shop.id}>{shop.id}</p>
))}

我正在使用 apollo 客户端

Answer 1

产品和价格都是数组，因此您需要先将其展平或映射至产品，然后再映射至价格。

我会拆分一个或两个组件。目前尚不清楚您是否要渲染产品级别的内容。但它应该是这样的：


const Product = (product) => (
  <>
    {product.prices.map((price) => (
      <p key={price.currency.label}>{price.amount}</p>
    ))}
  </>
);

class App extends React.Component {
  render() {
    return (
      <>
        {data.category.products.map((product) => (
          <Product product={product} />
        ))}
      </>
    );
  }
}

我还建议您生成类型安全的 graphql 模式，以便您可以在编译时发现类型问题。

您还需要通过在返回之前进行真实性检查来确保 data 不为空，因为它是一个异步调用 - 在做出 graphql 响应后会定义 data 。例如。 return !data?null:<>......</>

useQuery 还会从钩子中返回有用的 loading 和 error 值