reactjs - 使用react-apollo useMutation hook 处理错误

Question

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

TLDR；我想知道 options 中传递的 onError 和 useMutation 给我的 error 之间到底有什么区别>

这是我的代码片段

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

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

throw new Error('Invalid Email');

现在我想在客户端(React)处理这个错误。但我担心的是，如果我使用从 useMutation Hook 返回的“错误”并尝试以这种方式显示错误

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

错误在 UI 中更新，但随后 React 立即向我显示一个屏幕:

Unhandled Rejection (Error): Graphql error: My-custom-error-message

但是，如果我使用将 options 传递给 useMutate 函数的 onError ，那么它不会向我显示此屏幕，我可以这样做无论我想要什么错误。

我想知道options中传递的onError和useMutation给我的error之间到底有什么区别 以及为什么当onError未使用时 React 会向我显示错误屏幕。

谢谢!

Answer 1

Apollo 通过其 API 公开两种错误:GraphQL 错误，它们作为响应的一部分作为 错误 与 数据 一起返回，以及请求失败时发生的网络错误。当无法访问服务器或响应状态不是 200 时，就会发生网络错误 - 响应中存在 错误 的查询仍可能具有 200 状态。例如，查询将导致 Apollo 客户端出现 400 状态和网络错误。

Apollo Client 实际上提供了四种不同的方式来处理变异错误:

1.) 调用钩子(Hook)返回的 mutate 函数会返回一个 Promise。如果请求成功，Promise 将解析为包含服务器返回的数据的响应对象。如果请求失败，Promise 将拒绝并返回错误。这就是为什么您在控制台中看到“未处理的拒绝”消息的原因——您需要处理被拒绝的 Promise。

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

或使用异步/等待语法:

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

默认情况下，Promise 将拒绝 GraphQL 错误或网络错误。通过设置errorPolicy但是，对于忽略或全部，Promise将仅拒绝网络错误。在这种情况下，仍然可以通过响应对象访问 GraphQL 错误，但 Promise 将会解析。

2.) 当您提供 onError 函数时，会出现上述情况的唯一异常(exception)。在这种情况下，Promise 将始终解析而不是拒绝，但如果发生错误，将调用 onError 并返回结果错误。您设置的 errorPolicy 也适用于此处 - onError 将始终在出现网络错误时调用，但仅在使用默认 errorPolicy 时出现 GraphQL 错误时调用> 无。使用 onError 相当于捕获被拒绝的 Promise —— 它只是将错误处理程序从 mutate 函数的调用站点移动到钩子(Hook)的调用站点。

3.) 除了 mutate 函数之外，useMutation Hook 还返回一个结果对象。该对象还公开运行突变时遇到的任何错误。与我们上面编写的错误处理函数不同，此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 反射(reflect)存在错误的事实时，具有这样的错误状态会很有用。例如，您可以更改元素的颜色，直到突变运行没有错误为止。您无需自己编写上述样板，只需使用提供的结果对象即可。

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

注意:虽然您可以使用公开的错误状态来更新 UI，但这样做不能替代实际处理错误。您必须提供onError回调或捕获错误，以避免出现有关未处理的Promise拒绝的警告。

4.)最后，您还可以使用 apollo-link-error为您的请求添加全局错误处理。例如，这允许您显示错误对话框，无论请求源自应用程序中的哪个位置。

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