Cursor Pagination with useInfiniteList in Refine: Still Not Working - Need Help!
I've been stuck on this for days now, and I'm at my wit's end. I'm trying to implement
infinite scrolling in a chat application using Refine's useInfiniteList, but the cursor
pagination simply refuses to work properly. If anyone has successfully implemented this,
please help!
What I'm Trying to Do
I'm building a WhatsApp-like chat interface where messages should load incrementally as the
user scrolls up. Sounds simple enough, right? But the cursor from getNextPageParam is NOT
reaching my data provider correctly.
The Problem
Here's what's happening - my frontend code with useInfiniteList:
const {
data: messagePages,
fetchNextPage,
hasNextPage,
} = useInfiniteList({
resource: "whatsapp/messages",
pagination: { pageSize: 25 },
queryOptions: {
getNextPageParam: (lastPage) => {
console.log("Last page received:", lastPage);
console.log("Cursor next:", lastPage?.cursor?.next);
// This shows the cursor perfectly!
return lastPage?.cursor?.next
? JSON.stringify(lastPage.cursor.next)
: undefined;
},
},
});
The console shows:
Last page received: {data: Array(25), cursor: {next: {id: "msg_123", timestamp:
1234567890}}}
Cursor next: {id: "msg_123", timestamp: 1234567890}
Great! But then in my data provider:
getList: async ({ resource, pagination, filters, sorters, meta }) => {
console.log("[DataProvider] Received pagination:", pagination);
// This prints: {currentPage: 1, pageSize: 25, mode: "server"}
// WHERE IS MY CURSOR?!
}
What I've Already Tried
infinite scrolling in a chat application using Refine's useInfiniteList, but the cursor
pagination simply refuses to work properly. If anyone has successfully implemented this,
please help!
What I'm Trying to Do
I'm building a WhatsApp-like chat interface where messages should load incrementally as the
user scrolls up. Sounds simple enough, right? But the cursor from getNextPageParam is NOT
reaching my data provider correctly.
The Problem
Here's what's happening - my frontend code with useInfiniteList:
const {
data: messagePages,
fetchNextPage,
hasNextPage,
} = useInfiniteList({
resource: "whatsapp/messages",
pagination: { pageSize: 25 },
queryOptions: {
getNextPageParam: (lastPage) => {
console.log("Last page received:", lastPage);
console.log("Cursor next:", lastPage?.cursor?.next);
// This shows the cursor perfectly!
return lastPage?.cursor?.next
? JSON.stringify(lastPage.cursor.next)
: undefined;
},
},
});
The console shows:
Last page received: {data: Array(25), cursor: {next: {id: "msg_123", timestamp:
1234567890}}}
Cursor next: {id: "msg_123", timestamp: 1234567890}
Great! But then in my data provider:
getList: async ({ resource, pagination, filters, sorters, meta }) => {
console.log("[DataProvider] Received pagination:", pagination);
// This prints: {currentPage: 1, pageSize: 25, mode: "server"}
// WHERE IS MY CURSOR?!
}
What I've Already Tried
