使用React-Apollo Use处理错误


10

我一直在努力解决这个问题,但没有找到一个强有力的答案。我正在尝试使用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>}
...
}

该错误已在UI中更新,但随后React迅速向我显示了一个屏幕,显示未处理的拒绝(错误):Graphql错误:My-custom-error-message

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

我想知道究竟是由useMutation给我?为什么做出反应告诉我,错误画面时onError的选项和错误通过的onError之间的差异使用。

谢谢!

Answers:


32

Apollo通过其API公开了两种错误:GraphQL errors,作为响应的一部分errors与一起返回data,以及在请求失败时发生的网络错误。当无法访问服务器或响应状态不是200时,将发生网络错误- errors响应中的查询仍可以具有200状态。但是,例如,无效查询将导致400状态和Apollo Client中的网络错误。

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
}

默认情况下,承诺将拒绝对任何 GraphQL错误或网络错误。通过将errorPolicy设置为ignoreall,Promise将拒绝出现网络错误。在这种情况下,仍然可以通过响应对象访问GraphQL错误,但是Promise可以解决。

2)以上唯一的例外是在您提供onError功能时发生的。在这种情况下,Promise始终会解决而不是拒绝,但是如果发生错误,onError则会调用该错误并产生错误。在errorPolicy这里也设置适用- onError将永远被称为网络错误,但只用GraphQL错误使用默认时被调用errorPolicynone。使用onError等效于捕获被拒绝的Promise-它只是将错误处理程序从mutate函数的调用位置移到挂钩的调用位置。

3.)除mutate函数外,useMutation钩子还返回结果对象。该对象还公开了运行突变时遇到的任何错误。与上面编写的错误处理程序函数不同,该error对象表示应用程序状态。以这种方式公开的errordata对象都为方便起见而存在。它们等效于执行此操作:

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为您的请求添加全局错误处理。例如,这使您可以显示错误对话框,无论请求在应用程序中的何处发出。

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


感谢您的解释 !已投票!
HyphæneOhmen
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.