如何在react-query中存储useInfiniteQuery中的项目计数？

Question

我在我的 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

的所有页面上存储一些信息，以便我可以在一个地方更新它？

Answer 1

我一直在考虑查询无效，但我不完全确定这是否是适合您的解决方案

当您通过键使查询无效时，您的

GET /api/items

请求的每个已加载页面都将被重新获取。

totalCount

将在整个数据结构中更新。但是，如果在重新获取查询时数据发生变化，则不能保证

totalCount

值在所有页面上保持一致

Answer 2

如果删除了一项，并且您不想使查询无效，则必须通过迭代

pages

来更新缓存，以找到要从中删除该项目的正确页面。这样做的同时，您还可以减少每页上的

totalCount

。

但并不是说失效通常比 a）不必用代码执行此操作和 b）自动处理元素在页面之间移动的情况更受欢迎。想象一下删除第一页中的一个项目。由于

pageSize

为 20，因此第二页的第一项实际上应该转变为第一页的最后一项，等等。无效会立即执行此操作，因为它会按顺序重新获取所有页面。