Pub*_*nka 6 infinite-scroll reactjs react-query
我尝试使用react-query和react-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
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 作为元和无穷大继续。
希望能解释一下:)