createInfiniteQueryController

function createInfiniteQueryController<TQueryFnData = unknown, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(
   host: ReactiveControllerHost,
   options: Accessor<CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>>,
   queryClient?: QueryClient
): InfiniteQueryResultAccessor<TData, TError>;

Defined in: packages/lit-query/src/createInfiniteQueryController.ts:401

Creates a Lit reactive controller that subscribes the host to an infinite query.

The returned accessor is callable and also exposes current, refetch, fetchNextPage, fetchPreviousPage, and destroy. When options is a function, it is re-read during host updates so query keys and options can follow reactive host state.

If queryClient is omitted, the controller resolves the client from the nearest connected QueryClientProvider.

Type Parameters#

TQueryFnData#

TQueryFnData = unknown

TError#

TError = Error

TData#

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey#

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam#

TPageParam = unknown

Parameters#

host#

ReactiveControllerHost

The Lit reactive controller host that owns the infinite query subscription.

options#

Accessor<CreateInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>>

Infinite query observer options, or a getter that returns options.

options properties#

Built from InfiniteQueryObserverOptions. See the type above for what it changes.

queryClient?#

QueryClient

Optional explicit query client. Provide this for controllers that should not resolve a client from Lit context.

Returns#

InfiniteQueryResultAccessor<TData, TError>

An accessor for the latest infinite query result with page helper methods.

Example#

import { LitElement, html } from 'lit'
import { createInfiniteQueryController } from '@tanstack/lit-query'

class ProjectsView extends LitElement {
  private readonly projects = createInfiniteQueryController(this, {
    queryKey: ['projects'],
    queryFn: ({ pageParam }) => fetchProjects(pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  })

  render() {
    const query = this.projects()

    return html`
      <button ?disabled=${!query.hasNextPage} @click=${() => this.projects.fetchNextPage()}>
        Load more
      </button>
    `
  }
}