Skip to content

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

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

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions