时间戳

首页 > 解决方案 > 尽管 'enabled' 设置为 false，React Query 仍会继续重试

javascript - 尽管 'enabled' 设置为 false，React Query 仍会继续重试

问题描述

我想设置我的查询，使其无限重试，除非它收到特定类型的错误，例如 404 或 401。我找不到使用 React Query API 的方法，但我想我可以提供一个回调设置enabled为 false 到我的 fetch 包装器，如下所示：

async function fetchItems(onError) {
  return fetch("https://pokeapi.co/api/v2/404").then(async (response) => {
    if (response.ok) {
      return await response.json();
    } else {
      if (response.status === 404) onError();
      throw new Error(response.statusText);
    }
  });
}

export default function App() {
  const [isEnabled, setIsEnabled] = useState(true);
  const { data } = useQuery(
    "data",
    () => fetchItems(() => setIsEnabled(false)),
    {
      enabled: isEnabled,
      retry: true
    }
  );

  return <div>{data}</div>;
}

沙盒

但是，这不起作用，尽管enabled在第一次调用后立即设置为 false，它仍会继续重试。我做错了什么，它是否按设计工作或者我应该提交错误报告？

标签： javascriptreactjsreact-hooksreact-query

解决方案

retry 也有一个带有count,error参数的函数。如果函数 onretry返回真值，查询将重新运行。这样，您需要在 fetch 函数中抛出状态并实现一个布尔逻辑，例如：

if (response.status === 404) onError();
throw new Error(response.status);
...
retry: (count, {message: status}) => (status !== '404' && status !== '401')

推荐阅读