Apollo 通过其 API 暴露了两种错误：GraphQL 错误，它们作为响应的一部分返回errors，与 一起返回data，以及当请求失败时发生的网络错误。当无法访问服务器或响应状态不是 200 时，将发生网络错误——errors响应中的查询仍然可以具有 200 状态。但例如，无效查询将导致Apollo 客户端中出现 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设置为ignoreor all，Promise只会拒绝网络错误。在这种情况下，GraphQL 错误仍可通过响应对象访问，但 Promise 将解决。

2.) 当您提供onError函数时，会发生上述唯一的例外。在这种情况下，Promise 将始终解决而不是拒绝，但如果发生错误，onError则会调用并产生错误。在errorPolicy这里也设置适用-onError将永远被称为网络错误，但只用GraphQL错误使用默认时被调用errorPolicy的none。UsingonError相当于捕获被拒绝的 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)

注：虽然您可以使用暴露错误状态更新你的UI，这样做是不是对真正的替代处理错误。您必须提供onError回调或catch错误以避免有关未处理的 Promise 拒绝的警告。

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

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

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

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