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

Question

有人能解释一下，为什么当我尝试使用返回错误的突变时，为什么我的 react 应用程序 + 阿波罗的行为是这样的？



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"

Answer 1

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

避免这种行为的唯一方法是通过 onError 提供一个错误处理程序。范围。如 onError提供，由 mutate 返回的 Promise将始终解决，任何相关错误(取决于您的 errorPolicy)将传递给 onError反而。

有关 Apollo 中错误处理的其他详细信息，请参见 here .有关未处理的 Promise 拒绝的更多详细信息，请访问 here .