如何通过偏移和限制来反应无限查询支持

Pub*_*nka 6 infinite-scroll reactjs react-query

我尝试使用react-queryreact-virtual中的无限查询在我的react.js项目中实现无限滚动。但无限查询支持游标和页面。我的 API 不支持页面,它在元数据中有一个限制、偏移量和总计数,如下所示

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

TkD*_*odo 4

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

基本上,从返回的任何内容都getNextPageParam将作为 注入到 queryFn 中pageParam。这是一个可能适合您的用例的示例:

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

“页面”的概念仅仅是后端一次获取返回的内容。因此,在这里,在第一次获取(第 0 页)时,我们没有 pageParam,因此我们使用 进行初始化offset: 0。然后,我们用它来获取,后端返回第一组数据(一个页面),然后我们提取它的元信息(offset = 20 或其他)。

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

希望能解释一下:)