useInfiniteQuery

Bridges TanStack Query infinite queries with Legend-State. Returns query state as an Observable, and accepts Observable values in options and queryKey — just like useQuery. Refer to TanStack Query docs for full option details. Options like enabled, staleTime, gcTime, etc. accept MaybeObservable<T> for reactive control.

Both variants require a QueryClientProvider ancestor — the client is injected from context.

Demo

useInfiniteQuery

Loading

Paginated list — load more pages with a button.

Pages

0

Items

0

Has More

No

Loading first page...

All loaded

Usage

Basic infinite query

Hook

import { For, Show, useObservable } from "@usels/core";
import { useInfiniteQuery } from "@usels/tanstack-query";

interface Page {
  items: { id: number; name: string }[];
  nextCursor: number | null;
}

function InfiniteList() {
  const query = useInfiniteQuery({
    queryKey: ["items"],
    queryFn: ({ pageParam }) =>
      fetch(`/api/items?cursor=${pageParam}`).then((r) => r.json() as Promise<Page>),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  });

  const allItems$ = useObservable(() =>
    (query.data.get()?.pages ?? []).flatMap((page) => page.items)
  );

  return (
    <div>
      <Show if={query.isLoading}>
        <p>Loading...</p>
      </Show>
      <For each={allItems$}>{(item$) => <div>{item$.name.get()}</div>}</For>
      <Show if={query.hasNextPage}>
        <button
          onClick={() => query.fetchNextPage()}
          disabled={query.isFetchingNextPage.get()}
        >
          <Show if={query.isFetchingNextPage} else="Load More">
            Loading more...
          </Show>
        </button>
      </Show>
    </div>
  );
}

Scope

import { For, observable, Show } from "@usels/core";
import { createInfiniteQuery } from "@usels/tanstack-query";

interface Page {
  items: { id: number; name: string }[];
  nextCursor: number | null;
}

function InfiniteList() {
  "use scope";
  const state$ = createInfiniteQuery<Page, ["items"], number>({
    queryKey: ["items"],
    queryFn: ({ pageParam }) =>
      fetch(`/api/items?cursor=${pageParam}`).then((r) => r.json()),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  });

  const allItems$ = observable(() =>
    (state$.data.get()?.pages ?? []).flatMap((page) => page.items)
  );

  return (
    <div>
      <Show if={state$.isLoading}>
        <p>Loading...</p>
      </Show>
      <For each={allItems$}>{(item$) => <div>{item$.name.get()}</div>}</For>
      <Show if={state$.hasNextPage}>
        <button
          onClick={() => state$.fetchNextPage.get()()}
          disabled={state$.isFetchingNextPage.get()}
        >
          <Show if={state$.isFetchingNextPage} else="Load More">
            Loading more...
          </Show>
        </button>
      </Show>
    </div>
  );
}

Observable queryKey

Hook

import { useInfiniteQuery } from "@usels/tanstack-query";
import { observable } from "@usels/core";

const category$ = observable("all");

function FilteredList() {
  const query = useInfiniteQuery({
    queryKey: ["items", category$],
    queryFn: ({ pageParam }) =>
      fetch(`/api/items?category=${category$.peek()}&cursor=${pageParam}`).then((r) =>
        r.json()
      ),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  });
  return <div>{query.data.get()?.pages.length} pages</div>;
}

Scope

import { createInfiniteQuery } from "@usels/tanstack-query";
import { observable } from "@usels/core";

const category$ = observable("all");

function FilteredList() {
  "use scope";
  const state$ = createInfiniteQuery({
    queryKey: ["items", category$],
    queryFn: ({ pageParam }) =>
      fetch(`/api/items?category=${category$.peek()}&cursor=${pageParam}`).then((r) =>
        r.json()
      ),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  });
  return <div>{state$.data.get()?.pages.length} pages</div>;
}

Conditional fetching with Observable enabled

Hook

import { useInfiniteQuery } from "@usels/tanstack-query";
import { observable } from "@usels/core";

const isReady$ = observable(false);

function Feed() {
  const query = useInfiniteQuery({
    queryKey: ["feed"],
    queryFn: ({ pageParam }) => fetchFeed(pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.next,
    enabled: isReady$,
  });
  return <div>{query.status.get()}</div>;
}

Scope

import { createInfiniteQuery } from "@usels/tanstack-query";
import { observable } from "@usels/core";

const isReady$ = observable(false);

function Feed() {
  "use scope";
  const state$ = createInfiniteQuery({
    queryKey: ["feed"],
    queryFn: ({ pageParam }) => fetchFeed(pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.next,
    enabled: isReady$,
  });
  return <div>{state$.status.get()}</div>;
}

Type

export type { CreateInfiniteQueryOptions, InfiniteQueryState } from "./core";
export { createInfiniteQuery } from "./core";
/**
 * UseInfiniteQueryOptions is an alias for CreateInfiniteQueryOptions for backward compatibility.
 */
export type UseInfiniteQueryOptions<TQueryFnData = unknown, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown> = CreateInfiniteQueryOptions<TQueryFnData, TQueryKey, TPageParam>;
/**
 * Connects TanStack Query Infinite Query with Legend-State observables.
 * Uses InfiniteQueryObserver to manage query state as observables.
 */
export type UseInfiniteQuery = typeof createInfiniteQuery;
export declare const useInfiniteQuery: UseInfiniteQuery;

Source

View on GitHub