typescript 如何使用react-query向同一个API重复发送请求?[重复]

2o7dmzc5  于 2022-12-19  发布在  TypeScript
关注(0)|答案(3)|浏览(222)
    • 此问题在此处已有答案**:

React Query: Can I use React Query for polling until I get certain data?(1个答案)
十小时前关门了。
我想使用react-query来发送请求,然后检查响应的字段。一旦我在响应中找到了我需要的字段,停止执行更多操作。否则,继续执行请求,直到我找到该字段。

const queryResult = useQuery({ queryKey: ['test','testDataId'], queryFn: ({queryKey}) => fetchTestData(queryKey[1]),
});
unftdfkk

unftdfkk1#

还有另一种方法可以尝试添加重试参数,并通过retryDelay管理延迟:
例如

const result = useQuery({
  queryKey,
  queryFn: ({queryKey}) => fetchTestData(queryKey[1]),
  retry: 10, // Will retry failed requests 10 times before displaying an error
})

您还可以在其中添加一个功能,以便根据状态进行管理

const result = useQuery({
  queryKey,
  queryFn: ({queryKey}) => fetchTestData(queryKey[1]),
  retry: (count, {message: status}) => (status !== '404' && status !== '401')
  // You can add logic based on your requirement and status code.
})

参考链接:
https://tanstack.com/query/v4/docs/guides/query-retries
React Query keeps retrying despite 'enabled' set to false

8i9zcol2

8i9zcol22#

我发现了一个可能有用的线索:react-query QueryClient

const queryClient = useQueryClient();
const queryKey = ['test','testDataId'];

const queryResult = useQuery({ 
  queryKey,
  queryFn: ({queryKey}) => fetchTestData(queryKey[1]),
  // Adjust the `responseData` structure,can be omitted.
  select: (result) => result.data,
  onSuccess(responseData){
    if (responseData.refreshing === true) {
      // Crucial action, mark the query with queryKey as staled
      queryClient.invalidateQueries({queryKey})
    }
  }
});
zzoitvuj

zzoitvuj3#

您可以使用invalidateQueries来实现这一点,它会将当前数据标记为陈旧的,并在后台触发重新获取(只要您不向它传递refetchType: 'none')。
在您的onSuccess中,添加以下内容(包含在您要查找的字段的检查中):

queryClient.invalidateQueries({ queryKey: [queryKey] });

相关问题