React-Query：仅在没有错误时重新获取数据

Question

在我的根组件上，我使用了use query来获取用户详细信息。但问题是，在我注册或登录之前，它会重新刷新太多次。结果，我甚至无法顺畅地填写注册/登录表单。

有没有办法只在回调函数返回无错误时重新获取数据？

这是我尝试过的方法：

const FetchCurrentUser = async () => {
  setAuthToken(localStorage.token);
  const {
    data: { user },
  } = await axios.get(`${process.env.API_URL}/api/users/auth`);

  return user;
};

const RouterController = () => {
  const { data: updatedUser, isLoading, error: fetchError } = useQuery(
    "user",
    FetchCurrentUser,
   
  );
}

- Ashik

Answer 1

我不确定我是否正确理解了问题。我假设您正在尝试获取用户数据，但如果失败，您不想重试，对吗？

React Query 有一些默认设置可能对新用户来说有些棘手。从文档中可以看到：

查询失败会在捕获和向 UI 显示错误之前默默地重试 3 次，并进行指数退避延迟。

更多详情请参见重要的默认值

您也可以通过在 useQuery 钩子上设置 enabled 配置属性为 false 来停用自动请求，并使用 refetch 函数手动触发请求。

- Otacilio Lacerda

---

当调用“refetch”方法时，有没有一种方法可以防止获取数据？ - Mykyta

Answer 2

如果您想在API请求失败后停止重试，可以使用retry选项并将其设置为false。

useQuery('',fn,{
retry:false
})

https://react-query-v3.tanstack.com/reference/useQuery#_top

- Akshay Vijay Jain

Answer 3

有一种简单的方法可以在所需数据准备好之前停止此API调用。您只需要在查询选项中设置enabled: false，然后在数据准备好时将其设置为true即可。

const RouterController = () => {
  const { data: updatedUser, isLoading, error: fetchError } = useQuery(
    "user",
    FetchCurrentUser,
   {
     enabled: !!requiredData,
   },
  );
}

然而，你的代码结构并不是很清晰。因此，我认为你的代码结构可能存在其他问题。

- Sky

Answer 4

另一种处理此问题的方法是在查询选项中设置“enabled: false”，每当您想调用API时，请使用refetch。在您的情况下，应该像这样：

const RouterController = () => {
  const { data: updatedUser, isLoading, error: fetchError, refetch } = useQuery(
    "user",
    FetchCurrentUser,
    {
      enabled: false,
    },
  );

  const handleClick = () => {
    refetch();
}
}

- Sky