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 并将其设置为 falseuseQuery('',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,   },  );}不过，我你的代码结构不是那么清晰。因此，我认为您的代码结构可能还有其他问题。