react-query：当且仅当没有错误时重新获取

Question

在我的根组件上，我使用 use 查询来获取用户详细信息。但问题是在我注册或登录之前，它重新刷新了太多次。结果我什至无法顺利填写注册/登录表单。有没有办法，只有回调函数没有返回错误时才会重新获取？这是我尝试过的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,     );}

Answer 1

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

React Query 有一些默认值，对于新用户来说可能会很棘手。来自文档：

失败的查询会以静默方式重试 3 次，并在捕获错误并将其显示到 UI 之前进行指数退避延迟。

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

Answer 2

如果你想在 api 请求失败后停止重试，你可以使用retryoption 并将其设置为 false

useQuery('',fn,{

retry:false

})

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

Answer 3

处理此问题的另一种方法是在查询选项中设置“enabled: false”，并且每当您希望调用 API 时，请使用重新获取。在你的情况下，它会是这样的：

const RouterController = () => {

  const { data: updatedUser, isLoading, error: fetchError, refetch } = useQuery(

    "user",

    FetchCurrentUser,

    {

      enabled: false,

    },

  );

  const handleClick = () => {

    refetch();

}

}

Answer 4

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

const RouterController = () => {

  const { data: updatedUser, isLoading, error: fetchError } = useQuery(

    "user",

    FetchCurrentUser,

   {

     enabled: !!requiredData,

   },

  );

}

不过，我你的代码结构不是那么清晰。因此，我认为您的代码结构可能还有其他问题。