Skip to content

useLiveInfiniteQuery doesn't fetch more data when collection has no more items #968

@believer

Description

@believer
  • 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:

  1. All items in collection are loaded in list
  2. Keep scrolling down
  3. List never updates

Smartphone:

  • Device: iPhone 17 Pro
  • OS: iOS 26
  • React Native 0.82.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions