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 开发工具中，它确实显示查询已无效，但它只是保留相同的结果并且不重新获取查询。

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

谢谢您的帮助！

Answer 1

如果您的查询处于活动状态，则应使用

invalidateQueries

重新获取。如果它不活跃，正如其他人提到的，设置

refetchInactive: true

。

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

通常，使用基于时间的方法可以更好地描述缓存，因此关闭标志的更好解决方案是设置

staleTime

来定义数据的有效时间，而不是定义某些点您想要/不想要重新获取。

如果将查询的 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 });

Answer 3

块引用 kjkljkljlk 块引用 kjkljkljlk 块引用 kjkljkljlk 块引用 kjkljkljlk 块引用 kjkljkljlk 块引用 kjkljkljlk

---

---

---

---

========