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

Question

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

问题是，即使我的浏览器开发工具在服务器响应中显示errors数组，我也无法在我的React组件的道具中访问它。 同样， 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"]}]}

Answer 1

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

       console.log(props)

您将在控制台中看到2个数据对象。 在第一个中，data.loading：true

这意味着正在进行提取并且还没有返回。 因此，在渲染组件时，组件将无法显示任何内容。

如果你检查第二个数据对象，你会看到

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>