我正在開發一個 react-native 應用程式，我想實作一個infinite scrolling串列，我已經查看了無限查詢檔案，但我無法弄清楚實作示例如何適合我的后端結構。另一方面，我不清楚無限查詢或分頁查詢是否更適合這種情況（實作無限滾動）。
當前的后端結構
要求
https://some-endpoint/search?limit=10&offset=0
使用這種結構，我的后端回傳：
{
limit: 10,
offset: 0,
totalResults: 300,
results: [{...results}],
}
每次達到串列滾動的限制時，這些變數都會更新，直到我們達到結果總數。
offset: offset limit,
uj5u.com熱心網友回復：
由于您的分頁查詢取決于偏移量和限制，您可以執行以下操作：
const { data, hasNextPage } = useInfiniteQuery(['queryKey'], ({ pageParam = 0 }) => queryFn(pageParam), {
getNextPageParam: (lastPage) => {
const totalPages = Math.floor(lastPage.totalResults / lastPage.limit)
const actualPage = lastPage.offset / lastPage.limit
return actualPage < totalPages ? actualPage 1 : undefined // By returning undefined if there are no more pages, hasNextPage boolean will be set to false
}
})
const queryFn = async (page) => {
const limit = 10
const offset = page * limit
const res = await fetch(`https://some-endpoint/search?limit=${limit}&offset=${offset}`)
...
}
解釋：
pageParam = 0默認情況下，對后端的第一個請求將使用，因此，queryFn將offset計算為 0 以從后端檢索第一個專案。根據您在帖子中的解釋，后端還將在每個回應上回傳此偏移量，該偏移量將用于計算actualPagein getNextPageParam。
它是這樣的：
- 第一個請求是用 發出的
pageParam = 0，后端的回應將包含offset: 0。 getNextPageParam使用此值計算actualPage:offset / limit等于 0 / 10，因此actualPage值為 0。- 由于
actualPage < totalPages，那么下一頁引數將actualPage 1等于 0 1。下一頁現在的值為 1。 - 該值將傳遞給您
queryFn的下一個請求，因此現在offset將是 10。 - 后端的回應偏移量現在為 10。
- 等等...
讓我知道這是否有幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/528295.html
標籤：反应反应式反应查询