useLiveInfiniteQuery doesn't fetch more data when collection has no more items
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.9k
- Forks
- 266
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 55
Description
- I've validated the bug against the latest version of DB packages
Describe the bug
I've converted a useInfiniteQuery from TanStack Query to useLiveInfiniteQuery. Initially it loads data and also loads more data as long as there is more data in the collection.
I expected that the queryFn would re-trigger when the collection had no more data to fetch more from the source, but once it displays all the items in the collection it does nothing.
I noticed that queryFn has a pageParam, but it's always undefined and is only logged on initial load. I might be misunderstanding how it should work?
Might be related to #872
(Note: I know that my queryFn would overwrite existing items, but that's the next thing to fix 😄)
export const moviesCollection = createCollection(
queryCollectionOptions({
getKey: (item) => item.id,
queryClient,
queryFn: async ({ pageParam }) => {
console.log('MOVIES', { pageParam })
const url = new URL('https://movies.willcodefor.beer') // Returns 20 items
url.searchParams.set('page', '1')
const response = await fetch(url.toString(), {
headers: { Accept: 'application/json' },
})
return response.json()
},
queryKey: ['movies'],
schema,
})
)
export function Movies() {
const {
data: movies,
fetchNextPage,
isFetchingNextPage,
} = useLiveInfiniteQuery(
(q) =>
q.from({ alerts: moviesCollection }).orderBy(({ alerts }) => alerts.watchedAt.Time, 'desc'),
{
getNextPageParam: (_lastPage, _allPages, lastPageParam) => lastPageParam + 1,
initialPageParam: 0,
}
)
return (
<List.Infinite
data={movies}
// This is called when the list reaches a threshold
fetchNextPage={fetchNextPage}
id="id"
isFetchingNextPage={isFetchingNextPage}
refetch={moviesCollection.utils.refetch}
renderItem={({ item }) => (
<View style={{ padding: 16, rowGap: 8 }}>
<Text>{item.title}</Text>
<Text numberOfLines={3}>{item.overview}</Text>
</View>
)}
/>
)
}
To Reproduce
Steps to reproduce the behavior:
- All items in collection are loaded in list
- Keep scrolling down
- List never updates
Smartphone:
- Device: iPhone 17 Pro
- OS: iOS 26
- React Native 0.82.1
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start from the useLiveInfiniteQuery call and the queryCollectionOptions configuration shown in the report, then reproduce the behavior by scrolling after all collection items are loaded. Trace whether fetchNextPage triggers the queryFn and advances pageParam; done when another page request occurs as expected after the collection is exhausted.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100