reactjs - React Query useInfiniteQuery使单个项目无效

标签 reactjs react-native react-query

使用useInfiniteQuery时如何使单个项目无效?
这是一个示例,演示了我要完成的工作。
假设我有一个成员列表,每个成员都有一个关注按钮。当我按下“关注”按钮时,将有一个单独的调用服务器,以标记给定的用户正在关注另一个用户。此后,我必须使整个无限查询无效,以反射(reflect)单个成员的关注状态。这意味着我可能有很多用户在无限查询中加载,并且我需要重新获取所有已加载的项目,以反射(reflect)一项的更改。
我知道我可以在跟随获取返回成功时更改queryClient.setQueryData中的值,但是如果没有跟随成员的无效和获取就跟随它,那么我基本上就与服务器不同步,并且依赖于本地数据。
有什么可能的方法解决这个问题?
这是引用UI照片,以防万一。
enter image description here

最佳答案

我认为这是当前不可能的,因为react-query没有规范化的缓存和底层的架构。因此,列表中的一个条目(无论它是否是无限的)都不会以任何方式与详细信息查询相对应。
如果使用相同的字符串为查询键添加前缀,则可以利用部分查询键匹配来一次性使无效:

['users', 'all']
['users', 1]
['users', 2]
queryClient.invalidateQueries(['users])将使所有三个查询无效。
但是,是的,它将重新获取整个列表,如果您不想使用setQueryData进行手动设置,那么我目前看不到其他任何方式。
如果您从突变中返回一个用户的全部详细数据,我不明白为什么用setQueryData设置它会使您与后端不同步。我们正在做很多事情:)

关于reactjs - React Query useInfiniteQuery使单个项目无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66389623/

相关文章:

reactjs - 从自定义 react 查询 Hook 重命名属性

reactjs - 在 react 查询中处理未经授权的请求

reactjs - 为什么 `Record` 不能在 typescript 中应用传播类型?

javascript - 无法读取未定义的属性 "toFixed"

javascript - 如何在reactjs中获取url参数

javascript - 在类外部调用函数与在类内部调用函数有什么区别?

javascript - 如何使 RNRF 中的自定义导航栏透明

javascript - 当我尝试从 react 查询中破坏数据时,我得到属性 'data' 在类型 'void' 上不存在

javascript - 在 React.JS 中将 props 的值从函数传递给 render()

javascript - javascript类中 `<{}>`有什么用?