根据这些 Apollo docs ,设置 all
的 error-policy
应该使 GraphQL 响应的 errors
数组可用于我的 Apollo 包装的 React 组件“所以 [my ] 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"]}]}
最佳答案
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 render return <div>Foo.</div>
关于javascript - react + Apollo : GraphQL errors array not passed into component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47667114/