时间戳

首页 > 解决方案 > Apollo 错误处理 - 为什么反应应用程序崩溃？

reactjs - Apollo 错误处理 - 为什么反应应用程序崩溃？

问题描述

有人能解释一下，当我尝试使用返回错误的突变时，为什么我的 react app + apollo 会这样？

在此处输入图像描述

GraphQL 突变返回此（响应代码为 200）：{"errors":[{"error":{"result":"identity.not-found","error":"authentication-failed","statusCode":401}}],"data":{"login":null}}

我的突变看起来像这样：

export const LOGIN_MUTATION = gql`
    mutation($input: LoginInput!) {
        login(input: $input) {
            token
        }
    }
`;

称为：

const handleSignIn = () => {
        loginMutation({
            variables: {
                input: {
                    clientId: config.clientId,
                    username: userName,
                    password: password,
                    clientSecret: config.clientSecret
                }
            }
        });
    };

它的行为有一段时间像预期的那样（我自己的自定义错误组件被渲染 - {error && <div>error</div>}），但随后它抛出了这个未处理的拒绝。

如果我将 catch 回调添加到突变调用，它会按预期工作。

但是，我在 apollo 文档中没有找到任何关于需要始终以这种方式捕获 GraphQL 错误的内容。如果我理解正确，这应该足够了： const[loginMutation, {data, loading, error}] = useMutation(LOGIN_MUTATION);

这种行为是正确的还是我错过了什么？

版本：

"@apollo/react-hooks": "^3.1.3"
"apollo-boost": "^0.4.7"
"graphql": "^14.5.8"

标签： reactjsgraphqlapollo

解决方案

该mutate函数返回一个 Promise，默认情况下，如果您的响应包含errors对象或发生网络错误，该 Promise 将被拒绝。如果您将 更改errorPolicy为ignore或all，则errors响应中的 不会导致 Promise 拒绝，但网络错误仍然会。

onError避免这种行为的唯一方法是通过参数提供错误处理程序。如果onError提供，则返回的 Promisemutate将始终解决，并且任何相关错误（取决于您的errorPolicy）将被传递给onError。

有关 Apollo 中错误处理的更多详细信息，请参见此处。可以在此处找到有关未处理的 Promise 拒绝的更多详细信息。

推荐阅读