React Query 处理响应状态代码

Question

这与这个问题有关：

我理解 React-Query 不关心响应代码这一点，因为没有错误。因此，例如，如果服务器响应 400“错误请求”，我是否必须检查 muate 函数返回的数据？

 const handleFormSubmit = async (credentials) => {
    const data = await mutateLogin(credentials);
    //  Do i have to check this data if for example i wanna show an error message 
    // "Invalid Credentials"?
 };

我需要将用户保存在缓存中。

const useMutateLogin = () => {
  return useMutation(doLogin, {
  throwOnError: true,
  onSuccess: data => // Do i have to check here again if i receive the user or 400 code
  })
 }

谢谢。

Answer 1

react-query 不处理请求，它完全不知道你用什么来制作它们，只要你有 Promise. From the documentation 我们有以下查询函数规范：

Must return a promise that will either resolves data or throws an error.

因此，如果您需要在特定状态代码上失败，您应该在查询函数中进行处理。

之所以会产生混淆，是因为流行的图书馆通常会为您解决这个问题。例如，axios and jQuery.ajax() will throw an error/reject if the HTTP status code falls out of the range of 2xx. If you use the Fetch API（就像您发布的 link 中的讨论），API 不会拒绝 HTTP 错误状态。

您的第一个代码片段：

const handleFormSubmit = async (credentials) => {
    const data = await mutateLogin(credentials);
 };

data的内容取决于mutateLogin函数的实现。如果您使用 axios, the promise will reject to any HTTP status code that falls out of the range of 2xx. If you use the Fetch API，您需要检查状态并抛出错误，否则 react-query 将缓存收到的整个响应。

你的第二个代码片段：

const useMutateLogin = () => {
  return useMutation(doLogin, {
  throwOnError: true,
  onSuccess: data => // Do i have to check here again if i receive the user or 400 code
  })
 }

这里我们有和以前一样的情况。这取决于 doLogin 实施。

React Query 处理响应状态代码

React Query handling response status codes

reactjs

react-query