使用 react-apollo useMutation hook 处理错误
Handling errors with react-apollo useMutation hook
我一直在努力解决这个问题,但没有找到强有力的答案。我正在尝试使用 useMutation
挂钩执行登录突变。
TLDR;我想知道 options
传递的 onError
和 useMutation
[ 给我的 error
到底有什么区别=28=]
这是我的代码片段
const [login, { data, loading, error }] = useMutation(LOGIN_QUERY, {
variables: {
email,
password
},
onError(err) {
console.log(err);
},
});
在服务器端,我有一个用于登录的 preset/hardcoded 电子邮件,我没有使用 Apollo 或任何其他客户端。在此登录突变的解析器中,如果使用
的电子邮件不相同,我只是抛出一个错误
throw new Error('Invalid Email');
现在我想在客户端 (React) 处理这个错误。但我担心的是,如果我使用从 useMutation
挂钩返回的 'error' 并尝试以这种方式显示错误
render() {
...
{error && <div> Error occurred </div>}
...
}
错误在 UI 中更新,但 React 立即向我显示了一个屏幕:
Unhandled Rejection (Error): Graphql error: My-custom-error-message
但是,如果我使用 onError
将 options
传递给 useMutate
函数,那么它不会向我显示此屏幕,我可以随心所欲地处理错误。
我想知道 options
传入的 onError
和 useMutation
给我的 error
到底有什么区别,为什么 React 会显示给我onError
未 使用时的错误屏幕。
谢谢!
Apollo 通过其 API 暴露两种错误:GraphQL 错误,作为响应的一部分作为 errors
与 [=] 一起返回15=],以及请求失败时发生的 网络错误 。当无法访问服务器或响应状态不是 200 时,将发生网络错误——响应中具有 errors
的查询仍然可以具有 200 状态。但是无效查询,例如例如,将导致 Apollo 客户端出现 400 状态和网络错误。
Apollo Client 实际上提供了四种不同的方式来处理突变错误:
1.) 调用钩子 returns 返回的 mutate
函数一个 Promise。如果请求成功,Promise 将解析 到一个包含服务器返回的data
的响应对象。如果请求失败,Promise 将 reject 并返回错误。这就是您在控制台中看到“未处理的拒绝”消息的原因——您需要处理被拒绝的 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
将始终因网络错误而被调用,但只有在使用 none
的默认 errorPolicy
时才会调用 GraphQL 错误。使用 onError
等同于捕获被拒绝的 Promise——它只是将错误处理程序从 mutate
函数的调用站点移动到钩子的调用站点。
3.) 除了 mutate
函数之外,useMutation
挂钩还 returns 一个结果对象。该对象还公开了 运行 突变时遇到的任何错误。与我们上面编写的错误处理函数不同,这个 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 为您的请求添加 全局 错误处理。例如,这允许您显示一个错误对话框,而不管请求在您的应用程序中的哪个位置发出。
您在应用程序中使用哪些方法在很大程度上取决于您尝试做什么(全局与本地、状态与回调等)。大多数应用程序将使用不止一种错误处理方法。
const [mutationHandler, { data, loading }] = useMutation(YOUR_MUTATION, {
onError: (err) => {
setError(err);
}
});
有了这个,我们可以访问具有加载状态和正确错误处理的数据,以避免控制台中的任何错误/未处理的承诺拒绝。
我一直在努力解决这个问题,但没有找到强有力的答案。我正在尝试使用 useMutation
挂钩执行登录突变。
TLDR;我想知道 options
传递的 onError
和 useMutation
[ 给我的 error
到底有什么区别=28=]
这是我的代码片段
const [login, { data, loading, error }] = useMutation(LOGIN_QUERY, {
variables: {
email,
password
},
onError(err) {
console.log(err);
},
});
在服务器端,我有一个用于登录的 preset/hardcoded 电子邮件,我没有使用 Apollo 或任何其他客户端。在此登录突变的解析器中,如果使用
的电子邮件不相同,我只是抛出一个错误throw new Error('Invalid Email');
现在我想在客户端 (React) 处理这个错误。但我担心的是,如果我使用从 useMutation
挂钩返回的 'error' 并尝试以这种方式显示错误
render() {
...
{error && <div> Error occurred </div>}
...
}
错误在 UI 中更新,但 React 立即向我显示了一个屏幕:
Unhandled Rejection (Error): Graphql error: My-custom-error-message
但是,如果我使用 onError
将 options
传递给 useMutate
函数,那么它不会向我显示此屏幕,我可以随心所欲地处理错误。
我想知道 options
传入的 onError
和 useMutation
给我的 error
到底有什么区别,为什么 React 会显示给我onError
未 使用时的错误屏幕。
谢谢!
Apollo 通过其 API 暴露两种错误:GraphQL 错误,作为响应的一部分作为 errors
与 [=] 一起返回15=],以及请求失败时发生的 网络错误 。当无法访问服务器或响应状态不是 200 时,将发生网络错误——响应中具有 errors
的查询仍然可以具有 200 状态。但是无效查询,例如例如,将导致 Apollo 客户端出现 400 状态和网络错误。
Apollo Client 实际上提供了四种不同的方式来处理突变错误:
1.) 调用钩子 returns 返回的 mutate
函数一个 Promise。如果请求成功,Promise 将解析 到一个包含服务器返回的data
的响应对象。如果请求失败,Promise 将 reject 并返回错误。这就是您在控制台中看到“未处理的拒绝”消息的原因——您需要处理被拒绝的 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
将始终因网络错误而被调用,但只有在使用 none
的默认 errorPolicy
时才会调用 GraphQL 错误。使用 onError
等同于捕获被拒绝的 Promise——它只是将错误处理程序从 mutate
函数的调用站点移动到钩子的调用站点。
3.) 除了 mutate
函数之外,useMutation
挂钩还 returns 一个结果对象。该对象还公开了 运行 突变时遇到的任何错误。与我们上面编写的错误处理函数不同,这个 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 为您的请求添加 全局 错误处理。例如,这允许您显示一个错误对话框,而不管请求在您的应用程序中的哪个位置发出。
您在应用程序中使用哪些方法在很大程度上取决于您尝试做什么(全局与本地、状态与回调等)。大多数应用程序将使用不止一种错误处理方法。
const [mutationHandler, { data, loading }] = useMutation(YOUR_MUTATION, {
onError: (err) => {
setError(err);
}
});
有了这个,我们可以访问具有加载状态和正确错误处理的数据,以避免控制台中的任何错误/未处理的承诺拒绝。