React + Apollo：GraphQL 错误数组未传递到组件中

Posted 2023-03-08

【中文标题】React + Apollo：GraphQL 错误数组未传递到组件中

【英文标题】：React + Apollo: GraphQL errors array not passed into component

【发布时间】：2018-05-19 21:51:29

【问题描述】：

根据这些 Apollo docs，设置 all 的 error-policy 应该使 GraphQL 响应的 errors 数组可用于我的 Apollo 包装的 React 组件“因此 [我的] UI 可以使用它们。”我的应用是通用的，所以我使用此策略很重要，这样错误不会阻止应用完全呈现。

问题是，即使我的浏览器开发工具在服务器响应中显示 errors 数组，我也无法在我的 React 组件的 props 中访问它。同样，props.data.error 始终未定义。这是为什么呢？

// Component
import React from 'react';
import  graphql  from 'react-apollo';
import gql from 'graphql-tag';

const Cart = (props) => 
  console.log(props.errors); // undefined
  console.log(props.data.error); // undefined
  console.log(props.data.cart); // null

  return <div>Foo.</div>;
;

export default graphql(gql`
  query CartQuery 
    cart 
      products 
        _id,
        name
      
    
  
`,  options:  errorPolicy: 'all'  )(Cart);


// Resolver
cart: (root, args, context) => 
  throw new Error('foo');



// Browser network tab response
"data":"cart":null,"errors":["message":"foo","locations":["line":2,"column":3],"path":["cart"]]

【参考方案1】：

undefined 表示没有错误，因此您成功获取了在屏幕上显示组件时遇到问题的数据，因为从 graphQL 服务器获取数据是异步操作。如果你

       console.log(props)

您将在控制台中看到 2 个数据对象。在第一个中， 数据加载：真

这意味着获取正在进行中并且还没有返回。所以当你渲染你的组件时，你的组件将没有任何东西可以显示。

如果您检查第二个数据对象，您将看到

data.loading:false

这意味着提取已解决，如果成功解决，您将看到

data.QueryCart: "response will be here"

如果 promise 被拒绝，您将在 data.error 中填充错误消息

所以你应该做的是实现条件渲染。而

if(props.data.loading)
        return (
            <div>Loading</div>
        )
    
return <div>Foo.</div>

一旦 props.data.loading 更改为 false 渲染 return <div>Foo.</div>