TanStack/db @tanstack/react-db@0.1.32

on GitHub

Patch Changes

• Add useLiveInfiniteQuery hook for infinite scrolling with live updates. (#669)

  The new useLiveInfiniteQuery hook provides an infinite query pattern similar to TanStack Query's useInfiniteQuery, but with live updates from your local collection. It uses liveQueryCollection.utils.setWindow() internally to efficiently paginate through ordered data without recreating the query on each page fetch.

  Key features:

  • Automatic live updates as data changes in the collection
  • Efficient pagination using dynamic window adjustment
  • Peek-ahead mechanism to detect when more pages are available
  • Compatible with TanStack Query's infinite query API patterns

  Example usage:

  import { useLiveInfiniteQuery } from "@tanstack/react-db"
  
  function PostList() {
    const { data, pages, fetchNextPage, hasNextPage, isLoading } =
      useLiveInfiniteQuery(
        (q) =>
          q
            .from({ posts: postsCollection })
            .orderBy(({ posts }) => posts.createdAt, "desc"),
        {
          pageSize: 20,
          getNextPageParam: (lastPage, allPages) =>
            lastPage.length === 20 ? allPages.length : undefined,
        }
      )
  
    if (isLoading) return <div>Loading...</div>
  
    return (
      <div>
        {pages.map((page, i) => (
          <div key={i}>
            {page.map((post) => (
              <PostCard key={post.id} post={post} />
            ))}
          </div>
        ))}
        {hasNextPage && (
          <button onClick={() => fetchNextPage()}>Load More</button>
        )}
      </div>
    )
  }

  Requirements:

  • Query must include .orderBy() for the window mechanism to work
  • Returns flattened data array and pages array for flexible rendering
  • Automatically detects new pages when data is synced to the collection

• Updated dependencies [63aa8ef, b0687ab]:

  • @tanstack/db@0.4.10