📄 tanstack/db/latest/docs/framework/react/reference/functions/useLiveInfiniteQuery

function useLiveInfiniteQuery<TResult, TKey, TUtils>(liveQueryCollection, config): UseLiveInfiniteQueryReturn<any>;


function useLiveInfiniteQuery<TResult, TKey, TUtils>(liveQueryCollection, config): UseLiveInfiniteQueryReturn<any>;

Defined in: useLiveInfiniteQuery.ts:113

Create an infinite query using a query function with live updates

Uses utils.setWindow() to dynamically adjust the limit/offset window without recreating the live query collection on each page change.

### Type Parameters #### TResult

TResult extends object

#### TKey

TKey extends string | number

#### TUtils

TUtils extends Record<string, any>

### Parameters #### liveQueryCollection

Collection<TResult, TKey, TUtils, StandardSchemaV1<unknown, unknown>, TResult> & NonSingleResult

#### config

UseLiveInfiniteQueryConfig <any>

Configuration including pageSize and getNextPageParam

### Returns

UseLiveInfiniteQueryReturn <any>

Object with pages, data, and pagination controls

### Examples

// Basic infinite query
const { data, pages, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
  (q) => q
    .from({ posts: postsCollection })
    .orderBy(({ posts }) => posts.createdAt, 'desc')
    .select(({ posts }) => ({
      id: posts.id,
      title: posts.title
    })),
  {
    pageSize: 20,
    getNextPageParam: (lastPage, allPages) =>
      lastPage.length === 20 ? allPages.length : undefined
  }
)


// Basic infinite query
const { data, pages, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
  (q) => q
    .from({ posts: postsCollection })
    .orderBy(({ posts }) => posts.createdAt, 'desc')
    .select(({ posts }) => ({
      id: posts.id,
      title: posts.title
    })),
  {
    pageSize: 20,
    getNextPageParam: (lastPage, allPages) =>
      lastPage.length === 20 ? allPages.length : undefined
  }
)

// With dependencies
const { pages, fetchNextPage } = useLiveInfiniteQuery(
  (q) => q
    .from({ posts: postsCollection })
    .where(({ posts }) => eq(posts.category, category))
    .orderBy(({ posts }) => posts.createdAt, 'desc'),
  {
    pageSize: 10,
    getNextPageParam: (lastPage) =>
      lastPage.length === 10 ? lastPage.length : undefined
  },
  [category]
)


// With dependencies
const { pages, fetchNextPage } = useLiveInfiniteQuery(
  (q) => q
    .from({ posts: postsCollection })
    .where(({ posts }) => eq(posts.category, category))
    .orderBy(({ posts }) => posts.createdAt, 'desc'),
  {
    pageSize: 10,
    getNextPageParam: (lastPage) =>
      lastPage.length === 10 ? lastPage.length : undefined
  },
  [category]
)

// Router loader pattern with pre-created collection
// In loader:
const postsQuery = createLiveQueryCollection({
  query: (q) => q
    .from({ posts: postsCollection })
    .orderBy(({ posts }) => posts.createdAt, 'desc')
    .limit(20)
})
await postsQuery.preload()
return { postsQuery }

// In component:
const { postsQuery } = useLoaderData()
const { data, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
  postsQuery,
  {
    pageSize: 20,
    getNextPageParam: (lastPage) => lastPage.length === 20 ? lastPage.length : undefined
  }
)


// Router loader pattern with pre-created collection
// In loader:
const postsQuery = createLiveQueryCollection({
  query: (q) => q
    .from({ posts: postsCollection })
    .orderBy(({ posts }) => posts.createdAt, 'desc')
    .limit(20)
})
await postsQuery.preload()
return { postsQuery }

// In component:
const { postsQuery } = useLoaderData()
const { data, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
  postsQuery,
  {
    pageSize: 20,
    getNextPageParam: (lastPage) => lastPage.length === 20 ? lastPage.length : undefined
  }
)

Call Signature
--------------

function useLiveInfiniteQuery<TContext>(
   queryFn, 
   config, 
deps?): UseLiveInfiniteQueryReturn<TContext>;


function useLiveInfiniteQuery<TContext>(
   queryFn, 
   config, 
deps?): UseLiveInfiniteQueryReturn<TContext>;

Defined in: useLiveInfiniteQuery.ts:123

Create an infinite query using a query function with live updates

Uses utils.setWindow() to dynamically adjust the limit/offset window without recreating the live query collection on each page change.

### Type Parameters #### TContext

TContext extends Context

### Parameters #### queryFn

(q) => QueryBuilder<TContext>

Query function that defines what data to fetch. Must include .orderBy() for setWindow to work.

#### config

UseLiveInfiniteQueryConfig <TContext>

Configuration including pageSize and getNextPageParam

#### deps?

unknown[]

Array of dependencies that trigger query re-execution when changed

### Returns

UseLiveInfiniteQueryReturn <TContext>

Object with pages, data, and pagination controls

### Examples

// Basic infinite query
const { data, pages, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
  (q) => q
    .from({ posts: postsCollection })
    .orderBy(({ posts }) => posts.createdAt, 'desc')
    .select(({ posts }) => ({
      id: posts.id,
      title: posts.title
    })),
  {
    pageSize: 20,
    getNextPageParam: (lastPage, allPages) =>
      lastPage.length === 20 ? allPages.length : undefined
  }
)


// Basic infinite query
const { data, pages, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
  (q) => q
    .from({ posts: postsCollection })
    .orderBy(({ posts }) => posts.createdAt, 'desc')
    .select(({ posts }) => ({
      id: posts.id,
      title: posts.title
    })),
  {
    pageSize: 20,
    getNextPageParam: (lastPage, allPages) =>
      lastPage.length === 20 ? allPages.length : undefined
  }
)

// With dependencies
const { pages, fetchNextPage } = useLiveInfiniteQuery(
  (q) => q
    .from({ posts: postsCollection })
    .where(({ posts }) => eq(posts.category, category))
    .orderBy(({ posts }) => posts.createdAt, 'desc'),
  {
    pageSize: 10,
    getNextPageParam: (lastPage) =>
      lastPage.length === 10 ? lastPage.length : undefined
  },
  [category]
)


// With dependencies
const { pages, fetchNextPage } = useLiveInfiniteQuery(
  (q) => q
    .from({ posts: postsCollection })
    .where(({ posts }) => eq(posts.category, category))
    .orderBy(({ posts }) => posts.createdAt, 'desc'),
  {
    pageSize: 10,
    getNextPageParam: (lastPage) =>
      lastPage.length === 10 ? lastPage.length : undefined
  },
  [category]
)

// Router loader pattern with pre-created collection
// In loader:
const postsQuery = createLiveQueryCollection({
  query: (q) => q
    .from({ posts: postsCollection })
    .orderBy(({ posts }) => posts.createdAt, 'desc')
    .limit(20)
})
await postsQuery.preload()
return { postsQuery }

// In component:
const { postsQuery } = useLoaderData()
const { data, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
  postsQuery,
  {
    pageSize: 20,
    getNextPageParam: (lastPage) => lastPage.length === 20 ? lastPage.length : undefined
  }
)


// Router loader pattern with pre-created collection
// In loader:
const postsQuery = createLiveQueryCollection({
  query: (q) => q
    .from({ posts: postsCollection })
    .orderBy(({ posts }) => posts.createdAt, 'desc')
    .limit(20)
})
await postsQuery.preload()
return { postsQuery }

// In component:
const { postsQuery } = useLoaderData()
const { data, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(
  postsQuery,
  {
    pageSize: 20,
    getNextPageParam: (lastPage) => lastPage.length === 20 ? lastPage.length : undefined
  }
)

Edit on GitHub

Home

Partners Become a Partner

scarf analytics