React-Query refetchOnMount：查询无效时为 false

Question

我不希望我的组件在安装并且缓存中已经有查询时总是重新获取，所以我这样做了：

export const App = ({ props }) => {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        refetchOnMount: false,
      },
    },
  })

  return (<QueryClientProvider client={queryClient}>{...restOfMyApp}</QueryClientProvider>)
}

当我保存一些配置时，我尝试使用第一个键和那个键使我的查询无效queryClient.invalidateQueries()。在React-Query devtools中，它确实显示查询已无效，但它只是保留相同的结果并且不重新获取查询。

如何使要重新获取的查询无效，但不必在每次安装组件时都启动查询？

感谢您的帮助！

Answer 1

如果您的查询处于活动状态，它应该使用 重新获取invalidateQueries。如果它不活跃，正如其他人提到的，设置refetchInactive: true.

如何使要重新获取的查询无效，但不必在每次安装组件时都启动查询？

通常，使用基于时间的方法可以更好地描述缓存，因此关闭标志的更好解决方案是设置 astaleTime来定义数据的有效时间，而不是定义您想要/执行的某些点不想重新获取。

如果将查询的 staleTime 设置为 20 分钟，则任何重新获取事件（onMount、onWindowFocus、onReconnect）都不会在该时间范围内触发重新获取。手动使其无效仍会重新获取它。

这也符合 HTTP 缓存的工作原理（想想Cache-Control: max-age=60：）

表示：获取一次，然后不再获取（除非垃圾收集），设置staleTime: Infinity。

Answer 2

听起来你的代码中有一个错误；您能展示如何使缓存和缓存键无效吗？

使用refetchInactive绝对应该为您解决问题（强调我的）：

当设置为 时true，与重新获取谓词匹配且未通过 useQuery 和朋友呈现的查询将被标记为无效并在后台重新获取

这是 stackblitz 上的快速演示。

const client = useQueryClient();
client.invalidateQueries(YOUR_CACHE_KEY, { refetchInactive: true });