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

Question

我有一个3个数据“卡片”的列表，它们正在使用react query成功地从我的api中拉出。这一切都是通过我编写的这个自定义钩子来设置的，它使用了一个变体和queryclient.setQueryData钩子。

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

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

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

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

Answer 1

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

只有useQuery才会创建对缓存数据的订阅，queryClient.getQueryData不会创建此订阅。

已在缓存中成功更新，但我的组件未更新

这是因为您尚未创建订阅，请参阅上面的内容。

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

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