使所有查询失效,但仅重新提取处于活动状态

Invalidate all queries but refetch only active

提问人:Mike Kokadii 提问时间:7/12/2023 更新时间:7/13/2023 访问量:399

问:

我想实现这样的行为:在成功突变后,所有具有依赖数据的查询都应标记为无效,但只有活动查询才应立即重新获取,而非活动查询应仅重新获取它们是否会变为活动状态。

据我了解 react-query API,可以使用以下方式实现此行为

queryClient.invalidateQueries(['query-key'], { refetchType: 'active' })

因为它使所有匹配的查询无效,但仅重新获取活动查询,但这不是在无效的非活动数据变为活动状态时重新获取。也许这不仅在调用失效的方式上是一个问题,而且在一些默认查询选项中也是一个问题。

目前,我只是重新获取所有无效查询,无论它们是否处于活动状态,但这不是正确的方法。

// query client defaults
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      refetchOnMount: false,
      refetchOnReconnect: false,
      refetchOnWindowFocus: false,
    },
  },
})

// mutation with query invalidation
const useCreateExample = () => {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: createExample,
    onSuccess: () => {
      queryClient.invalidateQueries(['example'], { refetchType: 'all' })
    },
  })
}
reactjs 失效 tanstackreact-query

评论


答:

0赞 Mike Kokadii 7/13/2023 #1

TLDR:检查默认查询选项,它们可以防止重新获取过时的数据。


正如我所预测的那样,问题不在于失效,而在于默认查询选项。如重要默认值中所述,默认情况下,在某些触发器(挂载、重新聚焦、重新连接)后,过时的数据将重新获取,但您可以阻止此行为。我的默认值在任何情况下都会阻止数据重新获取,因为不需要定期更新 UI。

但目前尚不清楚,即使您使非活动查询中的数据失效,并且已经 - 无效数据无论如何都不会被重新获取。感谢@tkdodo的帮助refetchOnMount: false