我在我的 React 应用程序中使用
@tanstack/react-query
库,它呈现分页的项目列表。 GET /api/items?page=0
返回类似这样的内容:
{
page: 0,
pageSize: 20,
totalCount: 345,
items: ["item1", "item2", ...]
}
我正在使用
useInfiniteQuery
来获取这些数据:
const { data } = useInfiniteQuery({
getNextPageParam: lastPage => lastPage.page + 1,
queryFn: async ({ pageParam = 0 }) => fetch(`/api/items?page=${pageParam}`)
})
但是,那么数据结构如下所示:
[
pageParams: [0, 1, 2],
pages: [
{ page: 0, pageSize: 20, totalCount: 345, items: [...] },
{ page: 1, pageSize: 20, totalCount: 345, items: [...] },
{ page: 2, pageSize: 20, totalCount: 345, items: [...] },
]
]
totalCount
信息在每个页面中。因此,现在如果用户删除一项,我需要更新所有页面以使其保持一致(totalCount:345 -> 344)。有没有办法在useInfiniteQuery
的所有页面上存储一些信息,以便我可以在一个地方更新它?
我一直在考虑查询无效,但我不完全确定这是否是适合您的解决方案
当您通过键使查询无效时,您的
GET /api/items
请求的每个已加载页面都将被重新获取。
totalCount
将在整个数据结构中更新。但是,如果在重新获取查询时数据发生变化,则不能保证 totalCount
值在所有页面上保持一致
如果删除了一项,并且您不想使查询无效,则必须通过迭代
pages
来更新缓存,以找到要从中删除该项目的正确页面。这样做的同时,您还可以减少每页上的 totalCount
。
但并不是说失效通常比 a)不必用代码执行此操作和 b)自动处理元素在页面之间移动的情况更受欢迎。想象一下删除第一页中的一个项目。由于
pageSize
为 20,因此第二页的第一项实际上应该转变为第一页的最后一项,等等。无效会立即执行此操作,因为它会按顺序重新获取所有页面。