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

Question

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

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

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

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

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