成功更新查询缓存后如何更新组件中的值？

Question

我有 3 个数据“卡”的列表，这些数据“卡”已使用 react 查询从我的 api 中成功提取。这一切都是通过我编写的这个自定义钩子设置的，它使用了一个突变和queryclient.setQueryData钩子。

在我的 React 组件中，我使用另一个自定义钩子，它使用 queryClient.getQueryData 从我的查询缓存中加载数据。

当我想删除其中一个数据卡时，我运行一个突变来更新 API 中的数据（从子组件调用），成功后，我使用 queryClient.setQueryData 挂钩来更新查询缓存。

使用 react-query 开发工具，我可以看到它已在缓存中成功更新，但我的组件在我导航离开/返回页面之前不会更新，以便它们再次从缓存中调用数据。

有没有办法通知组件它应该从缓存中重新加载数据，或者类似的东西？

Answer 1

在我的 React 组件中，我使用另一个自定义钩子，它使用 queryClient.getQueryData 从我的查询缓存中加载数据。

queryClient.getQueryData不创建对缓存数据的订阅，只有useQuery 这样做。

在缓存中成功更新，但我的组件没有更新

这是因为您尚未创建订阅，见上文。

有没有办法通知组件它应该从缓存中重新加载数据，或者类似的东西？

始终调用useQuery从缓存中检索数据，然后将通知所有更改。