时间戳

首页 > 解决方案 > 无限查询支持如何响应偏移量和限制

reactjs - 无限查询支持如何响应偏移量和限制

问题描述

我尝试在 react-query和react-virtual中使用 Infinite Queries 在我的 react.js 项目中实现无限滚动。但是无限查询支持光标和页面。并且页面不支持我的 API，它在元数据中有一个限制、偏移量和 totalCount，如下所示

meta: { limit: 100, offset: 0, total: 1000}

无限查询是否支持限制和偏移？

我遵循了一些链接。

https://codesandbox.io/s/github/tannerlinsley/react-virtual/tree/master/examples/infinite-scroll

https://react-query.tanstack.com/docs/guides/infinite-queries

标签： reactjsinfinite-scrollreact-query

解决方案

infiniteQueries并不真正关心您的后端如何将“光标”传递到下一页，重要的是后端提供了一些东西。

基本上，从返回的任何内容都getNextPageParam将作为pageParam. 这是一个可能适合您的用例的示例：

const { data } = useInfiniteQuery(
    'key',
    ({ pageParam }) => axios.get(myUrl + '?offset=' + pageParam?.offset ?? 0),
    {
        getNextPageParam: (lastPage) => lastPage?.meta
    }
)

“页面”的概念仅仅是您的后端为单次获取返回的内容。所以在这里，在第一次获取时（对于第 0 页），我们没有 pageParam，所以我们用offset: 0. 然后，我们用它来获取，后端返回第一组数据（一个页面），我们提取它的元信息（偏移量 = 20 或其他）。

如果您调用fetchNextPage()，将使用该元信息调用 queryFn ，因此下一次 fetch 会执行?offset=20。后端提供偏移量：40 作为元和无穷大继续。

希望能解释它:)

推荐阅读