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

【问题标题】：Apollo error handling - why react app crashes?Apollo 错误处理 - 为什么反应应用程序崩溃？
【发布时间】：2020-05-08 21:28:12
【问题描述】：

有人能解释一下，当我尝试使用返回错误的突变时，为什么我的 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"

【问题讨论】：

标签： reactjs graphql apollo

【解决方案1】：

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

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

有关 Apollo 中错误处理的更多详细信息，请参见 here。有关未处理的 Promise 拒绝的更多详细信息，请参阅 here。

【讨论】：

如果我理解正确，像这样修改钩子：const [loginMutation, {data, loading, error}] = useMutation(LOGIN_MUTATION, {errorPolicy: 'all'}); 应该可以解决我的问题并且不应该出现错误屏幕。但确实如此。防止这种情况的唯一方法是使用 catch
是的，老实说，Apollo（或 apollo-boost，如果行为改变，则为 idk）非常烦人。同样的事情发生在我身上，忽略“所有”错误返回但承诺是它被拒绝。这更棘手，因为文档令人困惑，而且答案似乎与我所经历的不同。