强制重新加载 useQuery（而不是重新获取）

Question

最近遇到一个问题。

比方说，渲染了一些组件 [

A1

、

A2

、

A3

]。还有另一个组件 [

B

] 被渲染。

B

与

A1

、

A2

、

A3

没有任何层次关系（组件是对等的，没有父子连接）。

A1

、

A2

和

A3

具有来自名为

aQuery

的查询的数据。

aQuery

每分钟重新获取一次。默认情况下数据已过时。

B

组件中有一个按钮，单击该按钮会使

aQuery

的所有实例无效。 （类似于刷新数据）。

我支持 2 个州

A

:

1. 正在加载 - 我显示一条消息“正在加载数据...”
2. 获取/重新获取 - 我显示以前的数据，直到加载新数据。

问题在于我单击此按钮并且必须显示“正在加载数据...”。每次单击

B

中的按钮都会重新获取所有

aQuery

。但是，我需要重新加载它（因为我需要渲染

A

内的组件）。

简而言之：

react-query

中是否有任何方法可以使查询无效，使其变得

reloaded

而不是

refetched

？

Answer 1

是的，有一种方法可以完成您想要做的事情，那就是使用 resetQueries 方法。它的工作原理与您可能已经使用的 invalidateQueries 类似，不同之处在于它将查询恢复到初始状态，这意味着如果查询存在

initialData

，它将恢复到该状态，但在您的情况下，它只会清空缓存，查询实例的状态将变为

isPending

而不是

isRefetching

。

所以对于你的情况，请尝试：

const ComponentB = () => {
  const queryClient = useQueryClient();

  const handleReset = () => queryClient.resetQueries({queryKey: ['aQuery']});

  return (
    <button onClick={handleReset}>
      Reset
    </button>
  ); 
};