@tanstack/react-db 0.1.30 → 0.1.32

package/dist/cjs/index.cjs

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const useLiveQuery = require("./useLiveQuery.cjs");
+const useLiveInfiniteQuery = require("./useLiveInfiniteQuery.cjs");
 const db = require("@tanstack/db");
 exports.useLiveQuery = useLiveQuery.useLiveQuery;
+exports.useLiveInfiniteQuery = useLiveInfiniteQuery.useLiveInfiniteQuery;
 Object.defineProperty(exports, "createTransaction", {
   enumerable: true,
   get: () => db.createTransaction

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/dist/cjs/index.d.cts

@@ -1,4 +1,5 @@
 export * from './useLiveQuery.cjs';
+export * from './useLiveInfiniteQuery.cjs';
 export * from '@tanstack/db';
 export type { Collection } from '@tanstack/db';
 export { createTransaction } from '@tanstack/db';

package/dist/cjs/useLiveInfiniteQuery.cjs

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useLiveQuery = require("./useLiveQuery.cjs");
+function isLiveQueryCollectionUtils(utils) {
+  return typeof utils.setWindow === `function`;
+}
+function useLiveInfiniteQuery(queryFn, config, deps = []) {
+  const pageSize = config.pageSize || 20;
+  const initialPageParam = config.initialPageParam ?? 0;
+  const [loadedPageCount, setLoadedPageCount] = react.useState(1);
+  const [isFetchingNextPage, setIsFetchingNextPage] = react.useState(false);
+  const depsKey = JSON.stringify(deps);
+  const prevDepsKeyRef = react.useRef(depsKey);
+  react.useEffect(() => {
+    if (prevDepsKeyRef.current !== depsKey) {
+      setLoadedPageCount(1);
+      prevDepsKeyRef.current = depsKey;
+    }
+  }, [depsKey]);
+  const queryResult = useLiveQuery.useLiveQuery(
+    (q) => queryFn(q).limit(pageSize).offset(0),
+    deps
+  );
+  react.useEffect(() => {
+    const newLimit = loadedPageCount * pageSize + 1;
+    const utils = queryResult.collection.utils;
+    if (isLiveQueryCollectionUtils(utils)) {
+      const result = utils.setWindow({ offset: 0, limit: newLimit });
+      if (result !== true) {
+        setIsFetchingNextPage(true);
+        result.then(() => {
+          setIsFetchingNextPage(false);
+        });
+      } else {
+        setIsFetchingNextPage(false);
+      }
+    }
+  }, [loadedPageCount, pageSize, queryResult.collection]);
+  const { pages, pageParams, hasNextPage, flatData } = react.useMemo(() => {
+    const dataArray = queryResult.data;
+    const totalItemsRequested = loadedPageCount * pageSize;
+    const hasMore = dataArray.length > totalItemsRequested;
+    const pagesResult = [];
+    const pageParamsResult = [];
+    for (let i = 0; i < loadedPageCount; i++) {
+      const pageData = dataArray.slice(i * pageSize, (i + 1) * pageSize);
+      pagesResult.push(pageData);
+      pageParamsResult.push(initialPageParam + i);
+    }
+    const flatDataResult = dataArray.slice(
+      0,
+      totalItemsRequested
+    );
+    return {
+      pages: pagesResult,
+      pageParams: pageParamsResult,
+      hasNextPage: hasMore,
+      flatData: flatDataResult
+    };
+  }, [queryResult.data, loadedPageCount, pageSize, initialPageParam]);
+  const fetchNextPage = react.useCallback(() => {
+    if (!hasNextPage || isFetchingNextPage) return;
+    setLoadedPageCount((prev) => prev + 1);
+  }, [hasNextPage, isFetchingNextPage]);
+  return {
+    ...queryResult,
+    data: flatData,
+    pages,
+    pageParams,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
+  };
+}
+exports.useLiveInfiniteQuery = useLiveInfiniteQuery;
+//# sourceMappingURL=useLiveInfiniteQuery.cjs.map

package/dist/cjs/useLiveInfiniteQuery.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveInfiniteQuery.cjs","sources":["../../src/useLiveInfiniteQuery.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport { useLiveQuery } from \"./useLiveQuery\"\nimport type {\n  Context,\n  InferResultType,\n  InitialQueryBuilder,\n  LiveQueryCollectionUtils,\n  QueryBuilder,\n} from \"@tanstack/db\"\n\n/**\n * Type guard to check if utils object has setWindow method (LiveQueryCollectionUtils)\n */\nfunction isLiveQueryCollectionUtils(\n  utils: unknown\n): utils is LiveQueryCollectionUtils {\n  return typeof (utils as any).setWindow === `function`\n}\n\nexport type UseLiveInfiniteQueryConfig<TContext extends Context> = {\n  pageSize?: number\n  initialPageParam?: number\n  getNextPageParam: (\n    lastPage: Array<InferResultType<TContext>[number]>,\n    allPages: Array<Array<InferResultType<TContext>[number]>>,\n    lastPageParam: number,\n    allPageParams: Array<number>\n  ) => number | undefined\n}\n\nexport type UseLiveInfiniteQueryReturn<TContext extends Context> = Omit<\n  ReturnType<typeof useLiveQuery<TContext>>,\n  `data`\n> & {\n  data: InferResultType<TContext>\n  pages: Array<Array<InferResultType<TContext>[number]>>\n  pageParams: Array<number>\n  fetchNextPage: () => void\n  hasNextPage: boolean\n  isFetchingNextPage: boolean\n}\n\n/**\n * Create an infinite query using a query function with live updates\n *\n * Uses `utils.setWindow()` to dynamically adjust the limit/offset window\n * without recreating the live query collection on each page change.\n *\n * @param queryFn - Query function that defines what data to fetch. Must include `.orderBy()` for setWindow to work.\n * @param config - Configuration including pageSize and getNextPageParam\n * @param deps - Array of dependencies that trigger query re-execution when changed\n * @returns Object with pages, data, and pagination controls\n *\n * @example\n * // Basic infinite query\n * const { data, pages, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(\n *   (q) => q\n *     .from({ posts: postsCollection })\n *     .orderBy(({ posts }) => posts.createdAt, 'desc')\n *     .select(({ posts }) => ({\n *       id: posts.id,\n *       title: posts.title\n *     })),\n *   {\n *     pageSize: 20,\n *     getNextPageParam: (lastPage, allPages) =>\n *       lastPage.length === 20 ? allPages.length : undefined\n *   }\n * )\n *\n * @example\n * // With dependencies\n * const { pages, fetchNextPage } = useLiveInfiniteQuery(\n *   (q) => q\n *     .from({ posts: postsCollection })\n *     .where(({ posts }) => eq(posts.category, category))\n *     .orderBy(({ posts }) => posts.createdAt, 'desc'),\n *   {\n *     pageSize: 10,\n *     getNextPageParam: (lastPage) =>\n *       lastPage.length === 10 ? lastPage.length : undefined\n *   },\n *   [category]\n * )\n */\nexport function useLiveInfiniteQuery<TContext extends Context>(\n  queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>,\n  config: UseLiveInfiniteQueryConfig<TContext>,\n  deps: Array<unknown> = []\n): UseLiveInfiniteQueryReturn<TContext> {\n  const pageSize = config.pageSize || 20\n  const initialPageParam = config.initialPageParam ?? 0\n\n  // Track how many pages have been loaded\n  const [loadedPageCount, setLoadedPageCount] = useState(1)\n  const [isFetchingNextPage, setIsFetchingNextPage] = useState(false)\n\n  // Stringify deps for comparison\n  const depsKey = JSON.stringify(deps)\n  const prevDepsKeyRef = useRef(depsKey)\n\n  // Reset page count when dependencies change\n  useEffect(() => {\n    if (prevDepsKeyRef.current !== depsKey) {\n      setLoadedPageCount(1)\n      prevDepsKeyRef.current = depsKey\n    }\n  }, [depsKey])\n\n  // Create a live query with initial limit and offset\n  // The query function is wrapped to add limit/offset to the query\n  const queryResult = useLiveQuery(\n    (q) => queryFn(q).limit(pageSize).offset(0),\n    deps\n  )\n\n  // Update the window when loadedPageCount changes\n  // We fetch one extra item to peek if there's a next page\n  useEffect(() => {\n    const newLimit = loadedPageCount * pageSize + 1 // +1 to peek ahead\n    const utils = queryResult.collection.utils\n    // setWindow is available on live query collections with orderBy\n    if (isLiveQueryCollectionUtils(utils)) {\n      const result = utils.setWindow({ offset: 0, limit: newLimit })\n      // setWindow returns true if data is immediately available, or Promise<void> if loading\n      if (result !== true) {\n        setIsFetchingNextPage(true)\n        result.then(() => {\n          setIsFetchingNextPage(false)\n        })\n      } else {\n        setIsFetchingNextPage(false)\n      }\n    }\n  }, [loadedPageCount, pageSize, queryResult.collection])\n\n  // Split the data array into pages and determine if there's a next page\n  const { pages, pageParams, hasNextPage, flatData } = useMemo(() => {\n    const dataArray = queryResult.data as InferResultType<TContext>\n    const totalItemsRequested = loadedPageCount * pageSize\n\n    // Check if we have more data than requested (the peek ahead item)\n    const hasMore = dataArray.length > totalItemsRequested\n\n    // Build pages array (without the peek ahead item)\n    const pagesResult: Array<Array<InferResultType<TContext>[number]>> = []\n    const pageParamsResult: Array<number> = []\n\n    for (let i = 0; i < loadedPageCount; i++) {\n      const pageData = dataArray.slice(i * pageSize, (i + 1) * pageSize)\n      pagesResult.push(pageData)\n      pageParamsResult.push(initialPageParam + i)\n    }\n\n    // Flatten the pages for the data return (without peek ahead item)\n    const flatDataResult = dataArray.slice(\n      0,\n      totalItemsRequested\n    ) as InferResultType<TContext>\n\n    return {\n      pages: pagesResult,\n      pageParams: pageParamsResult,\n      hasNextPage: hasMore,\n      flatData: flatDataResult,\n    }\n  }, [queryResult.data, loadedPageCount, pageSize, initialPageParam])\n\n  // Fetch next page\n  const fetchNextPage = useCallback(() => {\n    if (!hasNextPage || isFetchingNextPage) return\n\n    setLoadedPageCount((prev) => prev + 1)\n  }, [hasNextPage, isFetchingNextPage])\n\n  return {\n    ...queryResult,\n    data: flatData,\n    pages,\n    pageParams,\n    fetchNextPage,\n    hasNextPage,\n    isFetchingNextPage,\n  }\n}\n"],"names":["useState","useRef","useEffect","useLiveQuery","useMemo","useCallback"],"mappings":";;;;AAaA,SAAS,2BACP,OACmC;AACnC,SAAO,OAAQ,MAAc,cAAc;AAC7C;AAoEO,SAAS,qBACd,SACA,QACA,OAAuB,CAAA,GACe;AACtC,QAAM,WAAW,OAAO,YAAY;AACpC,QAAM,mBAAmB,OAAO,oBAAoB;AAGpD,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,MAAAA,SAAS,CAAC;AACxD,QAAM,CAAC,oBAAoB,qBAAqB,IAAIA,MAAAA,SAAS,KAAK;AAGlE,QAAM,UAAU,KAAK,UAAU,IAAI;AACnC,QAAM,iBAAiBC,MAAAA,OAAO,OAAO;AAGrCC,QAAAA,UAAU,MAAM;AACd,QAAI,eAAe,YAAY,SAAS;AACtC,yBAAmB,CAAC;AACpB,qBAAe,UAAU;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAIZ,QAAM,cAAcC,aAAAA;AAAAA,IAClB,CAAC,MAAM,QAAQ,CAAC,EAAE,MAAM,QAAQ,EAAE,OAAO,CAAC;AAAA,IAC1C;AAAA,EAAA;AAKFD,QAAAA,UAAU,MAAM;AACd,UAAM,WAAW,kBAAkB,WAAW;AAC9C,UAAM,QAAQ,YAAY,WAAW;AAErC,QAAI,2BAA2B,KAAK,GAAG;AACrC,YAAM,SAAS,MAAM,UAAU,EAAE,QAAQ,GAAG,OAAO,UAAU;AAE7D,UAAI,WAAW,MAAM;AACnB,8BAAsB,IAAI;AAC1B,eAAO,KAAK,MAAM;AAChB,gCAAsB,KAAK;AAAA,QAC7B,CAAC;AAAA,MACH,OAAO;AACL,8BAAsB,KAAK;AAAA,MAC7B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,UAAU,YAAY,UAAU,CAAC;AAGtD,QAAM,EAAE,OAAO,YAAY,aAAa,SAAA,IAAaE,MAAAA,QAAQ,MAAM;AACjE,UAAM,YAAY,YAAY;AAC9B,UAAM,sBAAsB,kBAAkB;AAG9C,UAAM,UAAU,UAAU,SAAS;AAGnC,UAAM,cAA+D,CAAA;AACrE,UAAM,mBAAkC,CAAA;AAExC,aAAS,IAAI,GAAG,IAAI,iBAAiB,KAAK;AACxC,YAAM,WAAW,UAAU,MAAM,IAAI,WAAW,IAAI,KAAK,QAAQ;AACjE,kBAAY,KAAK,QAAQ;AACzB,uBAAiB,KAAK,mBAAmB,CAAC;AAAA,IAC5C;AAGA,UAAM,iBAAiB,UAAU;AAAA,MAC/B;AAAA,MACA;AAAA,IAAA;AAGF,WAAO;AAAA,MACL,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,UAAU;AAAA,IAAA;AAAA,EAEd,GAAG,CAAC,YAAY,MAAM,iBAAiB,UAAU,gBAAgB,CAAC;AAGlE,QAAM,gBAAgBC,MAAAA,YAAY,MAAM;AACtC,QAAI,CAAC,eAAe,mBAAoB;AAExC,uBAAmB,CAAC,SAAS,OAAO,CAAC;AAAA,EACvC,GAAG,CAAC,aAAa,kBAAkB,CAAC;AAEpC,SAAO;AAAA,IACL,GAAG;AAAA,IACH,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;;"}

package/dist/cjs/useLiveInfiniteQuery.d.cts

@@ -0,0 +1,59 @@
+import { useLiveQuery } from './useLiveQuery.cjs';
+import { Context, InferResultType, InitialQueryBuilder, QueryBuilder } from '@tanstack/db';
+export type UseLiveInfiniteQueryConfig<TContext extends Context> = {
+    pageSize?: number;
+    initialPageParam?: number;
+    getNextPageParam: (lastPage: Array<InferResultType<TContext>[number]>, allPages: Array<Array<InferResultType<TContext>[number]>>, lastPageParam: number, allPageParams: Array<number>) => number | undefined;
+};
+export type UseLiveInfiniteQueryReturn<TContext extends Context> = Omit<ReturnType<typeof useLiveQuery<TContext>>, `data`> & {
+    data: InferResultType<TContext>;
+    pages: Array<Array<InferResultType<TContext>[number]>>;
+    pageParams: Array<number>;
+    fetchNextPage: () => void;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+};
+/**
+ * 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.
+ *
+ * @param queryFn - Query function that defines what data to fetch. Must include `.orderBy()` for setWindow to work.
+ * @param config - Configuration including pageSize and getNextPageParam
+ * @param deps - Array of dependencies that trigger query re-execution when changed
+ * @returns Object with pages, data, and pagination controls
+ *
+ * @example
+ * // 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
+ *   }
+ * )
+ *
+ * @example
+ * // 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]
+ * )
+ */
+export declare function useLiveInfiniteQuery<TContext extends Context>(queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>, config: UseLiveInfiniteQueryConfig<TContext>, deps?: Array<unknown>): UseLiveInfiniteQueryReturn<TContext>;

package/dist/esm/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useLiveQuery.js';
+export * from './useLiveInfiniteQuery.js';
 export * from '@tanstack/db';
 export type { Collection } from '@tanstack/db';
 export { createTransaction } from '@tanstack/db';

package/dist/esm/index.js

@@ -1,8 +1,10 @@
 import { useLiveQuery } from "./useLiveQuery.js";
+import { useLiveInfiniteQuery } from "./useLiveInfiniteQuery.js";
 export * from "@tanstack/db";
 import { createTransaction } from "@tanstack/db";
 export {
   createTransaction,
+  useLiveInfiniteQuery,
   useLiveQuery
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/useLiveInfiniteQuery.d.ts

@@ -0,0 +1,59 @@
+import { useLiveQuery } from './useLiveQuery.js';
+import { Context, InferResultType, InitialQueryBuilder, QueryBuilder } from '@tanstack/db';
+export type UseLiveInfiniteQueryConfig<TContext extends Context> = {
+    pageSize?: number;
+    initialPageParam?: number;
+    getNextPageParam: (lastPage: Array<InferResultType<TContext>[number]>, allPages: Array<Array<InferResultType<TContext>[number]>>, lastPageParam: number, allPageParams: Array<number>) => number | undefined;
+};
+export type UseLiveInfiniteQueryReturn<TContext extends Context> = Omit<ReturnType<typeof useLiveQuery<TContext>>, `data`> & {
+    data: InferResultType<TContext>;
+    pages: Array<Array<InferResultType<TContext>[number]>>;
+    pageParams: Array<number>;
+    fetchNextPage: () => void;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+};
+/**
+ * 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.
+ *
+ * @param queryFn - Query function that defines what data to fetch. Must include `.orderBy()` for setWindow to work.
+ * @param config - Configuration including pageSize and getNextPageParam
+ * @param deps - Array of dependencies that trigger query re-execution when changed
+ * @returns Object with pages, data, and pagination controls
+ *
+ * @example
+ * // 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
+ *   }
+ * )
+ *
+ * @example
+ * // 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]
+ * )
+ */
+export declare function useLiveInfiniteQuery<TContext extends Context>(queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>, config: UseLiveInfiniteQueryConfig<TContext>, deps?: Array<unknown>): UseLiveInfiniteQueryReturn<TContext>;

package/dist/esm/useLiveInfiniteQuery.js

@@ -0,0 +1,77 @@
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { useLiveQuery } from "./useLiveQuery.js";
+function isLiveQueryCollectionUtils(utils) {
+  return typeof utils.setWindow === `function`;
+}
+function useLiveInfiniteQuery(queryFn, config, deps = []) {
+  const pageSize = config.pageSize || 20;
+  const initialPageParam = config.initialPageParam ?? 0;
+  const [loadedPageCount, setLoadedPageCount] = useState(1);
+  const [isFetchingNextPage, setIsFetchingNextPage] = useState(false);
+  const depsKey = JSON.stringify(deps);
+  const prevDepsKeyRef = useRef(depsKey);
+  useEffect(() => {
+    if (prevDepsKeyRef.current !== depsKey) {
+      setLoadedPageCount(1);
+      prevDepsKeyRef.current = depsKey;
+    }
+  }, [depsKey]);
+  const queryResult = useLiveQuery(
+    (q) => queryFn(q).limit(pageSize).offset(0),
+    deps
+  );
+  useEffect(() => {
+    const newLimit = loadedPageCount * pageSize + 1;
+    const utils = queryResult.collection.utils;
+    if (isLiveQueryCollectionUtils(utils)) {
+      const result = utils.setWindow({ offset: 0, limit: newLimit });
+      if (result !== true) {
+        setIsFetchingNextPage(true);
+        result.then(() => {
+          setIsFetchingNextPage(false);
+        });
+      } else {
+        setIsFetchingNextPage(false);
+      }
+    }
+  }, [loadedPageCount, pageSize, queryResult.collection]);
+  const { pages, pageParams, hasNextPage, flatData } = useMemo(() => {
+    const dataArray = queryResult.data;
+    const totalItemsRequested = loadedPageCount * pageSize;
+    const hasMore = dataArray.length > totalItemsRequested;
+    const pagesResult = [];
+    const pageParamsResult = [];
+    for (let i = 0; i < loadedPageCount; i++) {
+      const pageData = dataArray.slice(i * pageSize, (i + 1) * pageSize);
+      pagesResult.push(pageData);
+      pageParamsResult.push(initialPageParam + i);
+    }
+    const flatDataResult = dataArray.slice(
+      0,
+      totalItemsRequested
+    );
+    return {
+      pages: pagesResult,
+      pageParams: pageParamsResult,
+      hasNextPage: hasMore,
+      flatData: flatDataResult
+    };
+  }, [queryResult.data, loadedPageCount, pageSize, initialPageParam]);
+  const fetchNextPage = useCallback(() => {
+    if (!hasNextPage || isFetchingNextPage) return;
+    setLoadedPageCount((prev) => prev + 1);
+  }, [hasNextPage, isFetchingNextPage]);
+  return {
+    ...queryResult,
+    data: flatData,
+    pages,
+    pageParams,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
+  };
+}
+export {
+  useLiveInfiniteQuery
+};
+//# sourceMappingURL=useLiveInfiniteQuery.js.map

package/dist/esm/useLiveInfiniteQuery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveInfiniteQuery.js","sources":["../../src/useLiveInfiniteQuery.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport { useLiveQuery } from \"./useLiveQuery\"\nimport type {\n  Context,\n  InferResultType,\n  InitialQueryBuilder,\n  LiveQueryCollectionUtils,\n  QueryBuilder,\n} from \"@tanstack/db\"\n\n/**\n * Type guard to check if utils object has setWindow method (LiveQueryCollectionUtils)\n */\nfunction isLiveQueryCollectionUtils(\n  utils: unknown\n): utils is LiveQueryCollectionUtils {\n  return typeof (utils as any).setWindow === `function`\n}\n\nexport type UseLiveInfiniteQueryConfig<TContext extends Context> = {\n  pageSize?: number\n  initialPageParam?: number\n  getNextPageParam: (\n    lastPage: Array<InferResultType<TContext>[number]>,\n    allPages: Array<Array<InferResultType<TContext>[number]>>,\n    lastPageParam: number,\n    allPageParams: Array<number>\n  ) => number | undefined\n}\n\nexport type UseLiveInfiniteQueryReturn<TContext extends Context> = Omit<\n  ReturnType<typeof useLiveQuery<TContext>>,\n  `data`\n> & {\n  data: InferResultType<TContext>\n  pages: Array<Array<InferResultType<TContext>[number]>>\n  pageParams: Array<number>\n  fetchNextPage: () => void\n  hasNextPage: boolean\n  isFetchingNextPage: boolean\n}\n\n/**\n * Create an infinite query using a query function with live updates\n *\n * Uses `utils.setWindow()` to dynamically adjust the limit/offset window\n * without recreating the live query collection on each page change.\n *\n * @param queryFn - Query function that defines what data to fetch. Must include `.orderBy()` for setWindow to work.\n * @param config - Configuration including pageSize and getNextPageParam\n * @param deps - Array of dependencies that trigger query re-execution when changed\n * @returns Object with pages, data, and pagination controls\n *\n * @example\n * // Basic infinite query\n * const { data, pages, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(\n *   (q) => q\n *     .from({ posts: postsCollection })\n *     .orderBy(({ posts }) => posts.createdAt, 'desc')\n *     .select(({ posts }) => ({\n *       id: posts.id,\n *       title: posts.title\n *     })),\n *   {\n *     pageSize: 20,\n *     getNextPageParam: (lastPage, allPages) =>\n *       lastPage.length === 20 ? allPages.length : undefined\n *   }\n * )\n *\n * @example\n * // With dependencies\n * const { pages, fetchNextPage } = useLiveInfiniteQuery(\n *   (q) => q\n *     .from({ posts: postsCollection })\n *     .where(({ posts }) => eq(posts.category, category))\n *     .orderBy(({ posts }) => posts.createdAt, 'desc'),\n *   {\n *     pageSize: 10,\n *     getNextPageParam: (lastPage) =>\n *       lastPage.length === 10 ? lastPage.length : undefined\n *   },\n *   [category]\n * )\n */\nexport function useLiveInfiniteQuery<TContext extends Context>(\n  queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>,\n  config: UseLiveInfiniteQueryConfig<TContext>,\n  deps: Array<unknown> = []\n): UseLiveInfiniteQueryReturn<TContext> {\n  const pageSize = config.pageSize || 20\n  const initialPageParam = config.initialPageParam ?? 0\n\n  // Track how many pages have been loaded\n  const [loadedPageCount, setLoadedPageCount] = useState(1)\n  const [isFetchingNextPage, setIsFetchingNextPage] = useState(false)\n\n  // Stringify deps for comparison\n  const depsKey = JSON.stringify(deps)\n  const prevDepsKeyRef = useRef(depsKey)\n\n  // Reset page count when dependencies change\n  useEffect(() => {\n    if (prevDepsKeyRef.current !== depsKey) {\n      setLoadedPageCount(1)\n      prevDepsKeyRef.current = depsKey\n    }\n  }, [depsKey])\n\n  // Create a live query with initial limit and offset\n  // The query function is wrapped to add limit/offset to the query\n  const queryResult = useLiveQuery(\n    (q) => queryFn(q).limit(pageSize).offset(0),\n    deps\n  )\n\n  // Update the window when loadedPageCount changes\n  // We fetch one extra item to peek if there's a next page\n  useEffect(() => {\n    const newLimit = loadedPageCount * pageSize + 1 // +1 to peek ahead\n    const utils = queryResult.collection.utils\n    // setWindow is available on live query collections with orderBy\n    if (isLiveQueryCollectionUtils(utils)) {\n      const result = utils.setWindow({ offset: 0, limit: newLimit })\n      // setWindow returns true if data is immediately available, or Promise<void> if loading\n      if (result !== true) {\n        setIsFetchingNextPage(true)\n        result.then(() => {\n          setIsFetchingNextPage(false)\n        })\n      } else {\n        setIsFetchingNextPage(false)\n      }\n    }\n  }, [loadedPageCount, pageSize, queryResult.collection])\n\n  // Split the data array into pages and determine if there's a next page\n  const { pages, pageParams, hasNextPage, flatData } = useMemo(() => {\n    const dataArray = queryResult.data as InferResultType<TContext>\n    const totalItemsRequested = loadedPageCount * pageSize\n\n    // Check if we have more data than requested (the peek ahead item)\n    const hasMore = dataArray.length > totalItemsRequested\n\n    // Build pages array (without the peek ahead item)\n    const pagesResult: Array<Array<InferResultType<TContext>[number]>> = []\n    const pageParamsResult: Array<number> = []\n\n    for (let i = 0; i < loadedPageCount; i++) {\n      const pageData = dataArray.slice(i * pageSize, (i + 1) * pageSize)\n      pagesResult.push(pageData)\n      pageParamsResult.push(initialPageParam + i)\n    }\n\n    // Flatten the pages for the data return (without peek ahead item)\n    const flatDataResult = dataArray.slice(\n      0,\n      totalItemsRequested\n    ) as InferResultType<TContext>\n\n    return {\n      pages: pagesResult,\n      pageParams: pageParamsResult,\n      hasNextPage: hasMore,\n      flatData: flatDataResult,\n    }\n  }, [queryResult.data, loadedPageCount, pageSize, initialPageParam])\n\n  // Fetch next page\n  const fetchNextPage = useCallback(() => {\n    if (!hasNextPage || isFetchingNextPage) return\n\n    setLoadedPageCount((prev) => prev + 1)\n  }, [hasNextPage, isFetchingNextPage])\n\n  return {\n    ...queryResult,\n    data: flatData,\n    pages,\n    pageParams,\n    fetchNextPage,\n    hasNextPage,\n    isFetchingNextPage,\n  }\n}\n"],"names":[],"mappings":";;AAaA,SAAS,2BACP,OACmC;AACnC,SAAO,OAAQ,MAAc,cAAc;AAC7C;AAoEO,SAAS,qBACd,SACA,QACA,OAAuB,CAAA,GACe;AACtC,QAAM,WAAW,OAAO,YAAY;AACpC,QAAM,mBAAmB,OAAO,oBAAoB;AAGpD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,CAAC;AACxD,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAGlE,QAAM,UAAU,KAAK,UAAU,IAAI;AACnC,QAAM,iBAAiB,OAAO,OAAO;AAGrC,YAAU,MAAM;AACd,QAAI,eAAe,YAAY,SAAS;AACtC,yBAAmB,CAAC;AACpB,qBAAe,UAAU;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAIZ,QAAM,cAAc;AAAA,IAClB,CAAC,MAAM,QAAQ,CAAC,EAAE,MAAM,QAAQ,EAAE,OAAO,CAAC;AAAA,IAC1C;AAAA,EAAA;AAKF,YAAU,MAAM;AACd,UAAM,WAAW,kBAAkB,WAAW;AAC9C,UAAM,QAAQ,YAAY,WAAW;AAErC,QAAI,2BAA2B,KAAK,GAAG;AACrC,YAAM,SAAS,MAAM,UAAU,EAAE,QAAQ,GAAG,OAAO,UAAU;AAE7D,UAAI,WAAW,MAAM;AACnB,8BAAsB,IAAI;AAC1B,eAAO,KAAK,MAAM;AAChB,gCAAsB,KAAK;AAAA,QAC7B,CAAC;AAAA,MACH,OAAO;AACL,8BAAsB,KAAK;AAAA,MAC7B;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,UAAU,YAAY,UAAU,CAAC;AAGtD,QAAM,EAAE,OAAO,YAAY,aAAa,SAAA,IAAa,QAAQ,MAAM;AACjE,UAAM,YAAY,YAAY;AAC9B,UAAM,sBAAsB,kBAAkB;AAG9C,UAAM,UAAU,UAAU,SAAS;AAGnC,UAAM,cAA+D,CAAA;AACrE,UAAM,mBAAkC,CAAA;AAExC,aAAS,IAAI,GAAG,IAAI,iBAAiB,KAAK;AACxC,YAAM,WAAW,UAAU,MAAM,IAAI,WAAW,IAAI,KAAK,QAAQ;AACjE,kBAAY,KAAK,QAAQ;AACzB,uBAAiB,KAAK,mBAAmB,CAAC;AAAA,IAC5C;AAGA,UAAM,iBAAiB,UAAU;AAAA,MAC/B;AAAA,MACA;AAAA,IAAA;AAGF,WAAO;AAAA,MACL,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,UAAU;AAAA,IAAA;AAAA,EAEd,GAAG,CAAC,YAAY,MAAM,iBAAiB,UAAU,gBAAgB,CAAC;AAGlE,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,CAAC,eAAe,mBAAoB;AAExC,uBAAmB,CAAC,SAAS,OAAO,CAAC;AAAA,EACvC,GAAG,CAAC,aAAa,kBAAkB,CAAC;AAEpC,SAAO;AAAA,IACL,GAAG;AAAA,IACH,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/react-db",
   "description": "React integration for @tanstack/db",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "author": "Kyle Mathews",
   "license": "MIT",
   "repository": {
@@ -17,13 +17,13 @@
   ],
   "dependencies": {
     "use-sync-external-store": "^1.6.0",
-    "@tanstack/db": "0.4.8"
+    "@tanstack/db": "0.4.10"
   },
   "devDependencies": {
     "@electric-sql/client": "1.0.14",
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
     "@types/use-sync-external-store": "^1.5.0",
     "@vitest/coverage-istanbul": "^3.2.4",
     "react": "^19.2.0",

package/src/index.ts

@@ -1,5 +1,6 @@
 // Re-export all public APIs
 export * from "./useLiveQuery"
+export * from "./useLiveInfiniteQuery"
 
 // Re-export everything from @tanstack/db
 export * from "@tanstack/db"

package/src/useLiveInfiniteQuery.ts

@@ -0,0 +1,185 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useLiveQuery } from "./useLiveQuery"
+import type {
+  Context,
+  InferResultType,
+  InitialQueryBuilder,
+  LiveQueryCollectionUtils,
+  QueryBuilder,
+} from "@tanstack/db"
+
+/**
+ * Type guard to check if utils object has setWindow method (LiveQueryCollectionUtils)
+ */
+function isLiveQueryCollectionUtils(
+  utils: unknown
+): utils is LiveQueryCollectionUtils {
+  return typeof (utils as any).setWindow === `function`
+}
+
+export type UseLiveInfiniteQueryConfig<TContext extends Context> = {
+  pageSize?: number
+  initialPageParam?: number
+  getNextPageParam: (
+    lastPage: Array<InferResultType<TContext>[number]>,
+    allPages: Array<Array<InferResultType<TContext>[number]>>,
+    lastPageParam: number,
+    allPageParams: Array<number>
+  ) => number | undefined
+}
+
+export type UseLiveInfiniteQueryReturn<TContext extends Context> = Omit<
+  ReturnType<typeof useLiveQuery<TContext>>,
+  `data`
+> & {
+  data: InferResultType<TContext>
+  pages: Array<Array<InferResultType<TContext>[number]>>
+  pageParams: Array<number>
+  fetchNextPage: () => void
+  hasNextPage: boolean
+  isFetchingNextPage: boolean
+}
+
+/**
+ * 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.
+ *
+ * @param queryFn - Query function that defines what data to fetch. Must include `.orderBy()` for setWindow to work.
+ * @param config - Configuration including pageSize and getNextPageParam
+ * @param deps - Array of dependencies that trigger query re-execution when changed
+ * @returns Object with pages, data, and pagination controls
+ *
+ * @example
+ * // 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
+ *   }
+ * )
+ *
+ * @example
+ * // 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]
+ * )
+ */
+export function useLiveInfiniteQuery<TContext extends Context>(
+  queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>,
+  config: UseLiveInfiniteQueryConfig<TContext>,
+  deps: Array<unknown> = []
+): UseLiveInfiniteQueryReturn<TContext> {
+  const pageSize = config.pageSize || 20
+  const initialPageParam = config.initialPageParam ?? 0
+
+  // Track how many pages have been loaded
+  const [loadedPageCount, setLoadedPageCount] = useState(1)
+  const [isFetchingNextPage, setIsFetchingNextPage] = useState(false)
+
+  // Stringify deps for comparison
+  const depsKey = JSON.stringify(deps)
+  const prevDepsKeyRef = useRef(depsKey)
+
+  // Reset page count when dependencies change
+  useEffect(() => {
+    if (prevDepsKeyRef.current !== depsKey) {
+      setLoadedPageCount(1)
+      prevDepsKeyRef.current = depsKey
+    }
+  }, [depsKey])
+
+  // Create a live query with initial limit and offset
+  // The query function is wrapped to add limit/offset to the query
+  const queryResult = useLiveQuery(
+    (q) => queryFn(q).limit(pageSize).offset(0),
+    deps
+  )
+
+  // Update the window when loadedPageCount changes
+  // We fetch one extra item to peek if there's a next page
+  useEffect(() => {
+    const newLimit = loadedPageCount * pageSize + 1 // +1 to peek ahead
+    const utils = queryResult.collection.utils
+    // setWindow is available on live query collections with orderBy
+    if (isLiveQueryCollectionUtils(utils)) {
+      const result = utils.setWindow({ offset: 0, limit: newLimit })
+      // setWindow returns true if data is immediately available, or Promise<void> if loading
+      if (result !== true) {
+        setIsFetchingNextPage(true)
+        result.then(() => {
+          setIsFetchingNextPage(false)
+        })
+      } else {
+        setIsFetchingNextPage(false)
+      }
+    }
+  }, [loadedPageCount, pageSize, queryResult.collection])
+
+  // Split the data array into pages and determine if there's a next page
+  const { pages, pageParams, hasNextPage, flatData } = useMemo(() => {
+    const dataArray = queryResult.data as InferResultType<TContext>
+    const totalItemsRequested = loadedPageCount * pageSize
+
+    // Check if we have more data than requested (the peek ahead item)
+    const hasMore = dataArray.length > totalItemsRequested
+
+    // Build pages array (without the peek ahead item)
+    const pagesResult: Array<Array<InferResultType<TContext>[number]>> = []
+    const pageParamsResult: Array<number> = []
+
+    for (let i = 0; i < loadedPageCount; i++) {
+      const pageData = dataArray.slice(i * pageSize, (i + 1) * pageSize)
+      pagesResult.push(pageData)
+      pageParamsResult.push(initialPageParam + i)
+    }
+
+    // Flatten the pages for the data return (without peek ahead item)
+    const flatDataResult = dataArray.slice(
+      0,
+      totalItemsRequested
+    ) as InferResultType<TContext>
+
+    return {
+      pages: pagesResult,
+      pageParams: pageParamsResult,
+      hasNextPage: hasMore,
+      flatData: flatDataResult,
+    }
+  }, [queryResult.data, loadedPageCount, pageSize, initialPageParam])
+
+  // Fetch next page
+  const fetchNextPage = useCallback(() => {
+    if (!hasNextPage || isFetchingNextPage) return
+
+    setLoadedPageCount((prev) => prev + 1)
+  }, [hasNextPage, isFetchingNextPage])
+
+  return {
+    ...queryResult,
+    data: flatData,
+    pages,
+    pageParams,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  }
+}