Question

我一直在努力解决这个问题，但没有找到一个强有力的答案。我正在尝试使用useMutation挂钩执行登录突变。

TLDR；我想知道传入的onError选项与useMutation

给我的错误之间到底有什么区别？

这是我的代码段

const [login, { data, loading, error }] = useMutation(LOGIN_QUERY, {
        variables: {
            email,
            password
        },
        onError(err) {
            console.log(err);
        },
});

在服务器端，我有一个用于登录的预设/硬编码电子邮件，并且我没有使用Apollo或任何其他客户端。在此登录突变的解析器中，如果使用

发送的电子邮件不相同，我只会抛出一个错误

throw new Error('Invalid Email');

现在，我想在客户端上处理此错误（反应）。但我担心的是，如果我使用useMutation钩子返回的“错误”并尝试以这种方式显示错误

render() {
...
{error && <div> Error occured </div>}
...
}

该错误已在用户界面中更新，但随后React迅速向我显示了一个屏幕，显示未处理拒绝（错误）：Graphql错误：My-custom-error-message

但是，如果我使用onError传递给useMutate函数的选项，那么它不会向我显示此屏幕，并且我可以对错误进行任何处理。

我想知道传递给onError的onError和useMutation给我的错误之间到底有什么区别，为什么当不使用时，React为何向我显示该错误屏幕。

谢谢！

Answer 1

Apollo通过其API暴露两种错误： GraphQL错误，它们作为响应的一部分作为errors，data和 network返回错误，发生在请求失败时。当无法访问服务器或响应状态不是200时，将发生网络错误-响应中带有errors的查询的状态仍为200。但是对于例如，将导致Apollo Client中的状态为400，并出现网络错误。

Apollo Client实际上提供了四种处理突变错误的方法：

1。）调用该挂钩返回的mutate函数将返回一个Promise。如果请求成功，则Promise将解决到包含服务器返回的data的响应对象。如果请求失败，则Promise将拒绝并显示错误。这就是为什么您在控制台中看到“未处理的拒绝”消息的原因-您需要处理被拒绝的Promise。

login()
  .then(({ data }) => {
    // you can do something with the response here
  })
  .catch(e => {
    // you can do something with the error here
  })

或使用async / await语法：

try {
  const { data } = await login()
} catch (e) {
  // do something with the error here
}

默认情况下，Promise将拒绝 GraphQL错误或网络错误。通过将errorPolicy设置为ignore或all，Promise将仅拒绝网络错误。在这种情况下，仍然可以通过响应对象访问GraphQL错误，但是Promise可以解决。

2。）提供onError函数时，上述情况唯一发生。在这种情况下，Promise始终会解决而不是拒绝，但是如果发生错误，将调用onError并生成错误。您设置的errorPolicy在这里也适用-onError总是会因网络错误而被调用，但仅在使用errorPolicy的默认none时才会被GraphQL错误调用。使用onError等效于捕获被拒绝的Promise，它只是将错误处理程序从mutate函数的调用位置移到了挂钩的调用位置。

3。）除了mutate函数之外，useMutation钩子还返回结果对象。该对象还公开了运行突变时遇到的任何错误。与我们上面编写的错误处理程序函数不同，此error对象表示应用程序状态。以此方式公开的error和data对象都是为了方便而存在。它们等效于：

const [mutate] = useMutation(YOUR_MUTATION)
const [data, setData] = useState()
const [error, setError] = useState()
const handleClick = async () => {
  try {
    const { data } = await mutate()
    setData(data)
  catch (e) {
    setError(e)
  }
}

当您希望UI反映出存在错误的事实时，具有这样的错误状态会很有用。例如，您可以更改元素的颜色，直到突变运行没有错误为止。不必自己编写上面的样板，只需使用提供的结果对象即可。

const [mutate, { data, error }] = useMutation(YOUR_MUTATION)

4。）最后，您还可以使用apollo-link-error为请求添加 global 错误处理。例如，这使您无论在应用程序中的哪个位置发出请求都可以显示错误对话框。

您在应用程序中使用的哪些方法在很大程度上取决于您要尝试执行的操作（全局与本地，状态与回调等）。大多数应用程序将使用不止一种错误处理方法。

Answer 2

const [mutationHandler, { data, loading }] = useMutation(YOUR_MUTATION, {
  onError: (err) => {
      setError(err);
  }
});

有了这个，我们可以访问具有加载状态和正确错误处理的数据，以避免控制台中的任何错误/未处理的承诺拒绝。

使用React-Apollo Use处理错误

2 个答案: