Apollo客户端突变错误和更新组件

Question

我有以下代码，我正在尝试决定如何处理错误：

const gqlWrapper = graphql(registerMutation, {
    props: ({ mutate, ownProps }) => ({
        registerUser: userDetails => {
            mutate({
                variables: { ...userDetails },
                update: (proxy, resp) => {
                    // perform update to local state based on success
                }
            }).catch(err => {
                console.log(err);
                // how to update components from here?
            });
        }
    })
});

export default gqlWrapper(Register);

服务器发回一个GraphQL错误对象，并将其发回，使其出现在突变的catch()块中。如果变异成功，组件的数据将使用proxy参数更新，但我看不到处理错误的等价方法。

理想情况下，我希望更新catch块中的Apollo缓存，但在这一点上，我甚至不能向组件或状态注入道具。

最终的结果是在Register组件上设置一个prop/state，它显示了一个带有条件呈现的错误消息组件。一种方法可以是处理registerUser突变产生的错误：

// Where the registerUser mutation get's initiated - on form submit
onSubmit={() => {
    this.props.registerUser(values);
    // the error could be caught here but I don't want this in the UI - I'd rather keep all this outside
}}

但我觉得这增加了UI的体积，我宁愿在页面底部，旁边的突变函数。有什么办法来解决这个问题，还是我错过了一些明显的东西？

谢谢！

Answer 1

您最好在Apollo客户机中使用https://www.npmjs.com/package/apollo-link-error。这将允许您处理错误，并根据这些错误应用所需的任何自定义逻辑。它还允许您将.catch排除在组件之外。实际上，Apollo的文档中推荐了这个模块