@tanstack/react-db 0.1.73 → 0.1.75

package/dist/cjs/useLiveInfiniteQuery.cjs

@@ -19,7 +19,14 @@ function useLiveInfiniteQuery(queryFnOrCollection, config, deps = []) {
   const [isFetchingNextPage, setIsFetchingNextPage] = react.useState(false);
   const collectionRef = react.useRef(isCollection ? queryFnOrCollection : null);
   const hasValidatedCollectionRef = react.useRef(false);
-  const depsKey = JSON.stringify(deps);
+  let depsKey;
+  try {
+    depsKey = JSON.stringify(deps);
+  } catch {
+    throw new Error(
+      `useLiveInfiniteQuery: dependency array contains values that cannot be serialized (e.g. circular references). Ensure all dependency values are JSON-serializable.`
+    );
+  }
   const prevDepsKeyRef = react.useRef(depsKey);
   react.useEffect(() => {
     let shouldReset = false;
@@ -65,18 +72,25 @@ function useLiveInfiniteQuery(queryFnOrCollection, config, deps = []) {
       hasValidatedCollectionRef.current = true;
     }
     if (!isCollection && !queryResult.isReady) return;
+    let cancelled = false;
     const result = utils.setWindow({
       offset: expectedOffset,
       limit: expectedLimit
     });
     if (result !== true) {
       setIsFetchingNextPage(true);
-      result.then(() => {
-        setIsFetchingNextPage(false);
+      result.catch((error) => {
+        if (!cancelled)
+          console.error(`useLiveInfiniteQuery: setWindow failed:`, error);
+      }).finally(() => {
+        if (!cancelled) setIsFetchingNextPage(false);
       });
     } else {
       setIsFetchingNextPage(false);
     }
+    return () => {
+      cancelled = true;
+    };
   }, [
     isCollection,
     queryResult.collection,

package/dist/cjs/useLiveInfiniteQuery.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useLiveInfiniteQuery.cjs","sources":["../../src/useLiveInfiniteQuery.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { CollectionImpl } from '@tanstack/db'\nimport { useLiveQuery } from './useLiveQuery'\nimport type {\n  Collection,\n  Context,\n  InferResultType,\n  InitialQueryBuilder,\n  LiveQueryCollectionUtils,\n  NonSingleResult,\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 *\n * @example\n * // Router loader pattern with pre-created collection\n * // In loader:\n * const postsQuery = createLiveQueryCollection({\n *   query: (q) => q\n *     .from({ posts: postsCollection })\n *     .orderBy(({ posts }) => posts.createdAt, 'desc')\n *     .limit(20)\n * })\n * await postsQuery.preload()\n * return { postsQuery }\n *\n * // In component:\n * const { postsQuery } = useLoaderData()\n * const { data, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(\n *   postsQuery,\n *   {\n *     pageSize: 20,\n *     getNextPageParam: (lastPage) => lastPage.length === 20 ? lastPage.length : undefined\n *   }\n * )\n */\n\n// Overload for pre-created collection (non-single result)\nexport function useLiveInfiniteQuery<\n  TResult extends object,\n  TKey extends string | number,\n  TUtils extends Record<string, any>,\n>(\n  liveQueryCollection: Collection<TResult, TKey, TUtils> & NonSingleResult,\n  config: UseLiveInfiniteQueryConfig<any>,\n): UseLiveInfiniteQueryReturn<any>\n\n// Overload for query function\nexport function useLiveInfiniteQuery<TContext extends Context>(\n  queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>,\n  config: UseLiveInfiniteQueryConfig<TContext>,\n  deps?: Array<unknown>,\n): UseLiveInfiniteQueryReturn<TContext>\n\n// Implementation\nexport function useLiveInfiniteQuery<TContext extends Context>(\n  queryFnOrCollection: any,\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  // Detect if input is a collection or query function\n  const isCollection = queryFnOrCollection instanceof CollectionImpl\n\n  // Validate input type\n  if (!isCollection && typeof queryFnOrCollection !== `function`) {\n    throw new Error(\n      `useLiveInfiniteQuery: First argument must be either a pre-created live query collection (CollectionImpl) ` +\n        `or a query function. Received: ${typeof queryFnOrCollection}`,\n    )\n  }\n\n  // Track how many pages have been loaded\n  const [loadedPageCount, setLoadedPageCount] = useState(1)\n  const [isFetchingNextPage, setIsFetchingNextPage] = useState(false)\n\n  // Track collection instance and whether we've validated it (only for pre-created collections)\n  const collectionRef = useRef(isCollection ? queryFnOrCollection : null)\n  const hasValidatedCollectionRef = useRef(false)\n\n  // Track deps for query functions (stringify for comparison)\n  const depsKey = JSON.stringify(deps)\n  const prevDepsKeyRef = useRef(depsKey)\n\n  // Reset pagination when inputs change\n  useEffect(() => {\n    let shouldReset = false\n\n    if (isCollection) {\n      // Reset if collection instance changed\n      if (collectionRef.current !== queryFnOrCollection) {\n        collectionRef.current = queryFnOrCollection\n        hasValidatedCollectionRef.current = false\n        shouldReset = true\n      }\n    } else {\n      // Reset if deps changed (for query functions)\n      if (prevDepsKeyRef.current !== depsKey) {\n        prevDepsKeyRef.current = depsKey\n        shouldReset = true\n      }\n    }\n\n    if (shouldReset) {\n      setLoadedPageCount(1)\n    }\n  }, [isCollection, queryFnOrCollection, depsKey])\n\n  // Create a live query with initial limit and offset\n  // Either pass collection directly or wrap query function\n  // Use pageSize + 1 for peek-ahead detection (to know if there are more pages)\n  const queryResult = isCollection\n    ? useLiveQuery(queryFnOrCollection)\n    : useLiveQuery(\n        (q) =>\n          queryFnOrCollection(q)\n            .limit(pageSize + 1)\n            .offset(0),\n        deps,\n      )\n\n  // Adjust window when pagination changes\n  useEffect(() => {\n    const utils = queryResult.collection.utils\n    const expectedOffset = 0\n    const expectedLimit = loadedPageCount * pageSize + 1 // +1 for peek ahead\n\n    // Check if collection has orderBy (required for setWindow)\n    if (!isLiveQueryCollectionUtils(utils)) {\n      // For pre-created collections, throw an error if no orderBy\n      if (isCollection) {\n        throw new Error(\n          `useLiveInfiniteQuery: Pre-created live query collection must have an orderBy clause for infinite pagination to work. ` +\n            `Please add .orderBy() to your createLiveQueryCollection query.`,\n        )\n      }\n      return\n    }\n\n    // For pre-created collections, validate window on first check\n    if (isCollection && !hasValidatedCollectionRef.current) {\n      const currentWindow = utils.getWindow()\n      if (\n        currentWindow &&\n        (currentWindow.offset !== expectedOffset ||\n          currentWindow.limit !== expectedLimit)\n      ) {\n        console.warn(\n          `useLiveInfiniteQuery: Pre-created collection has window {offset: ${currentWindow.offset}, limit: ${currentWindow.limit}} ` +\n            `but hook expects {offset: ${expectedOffset}, limit: ${expectedLimit}}. Adjusting window now.`,\n        )\n      }\n      hasValidatedCollectionRef.current = true\n    }\n\n    // For query functions, wait until collection is ready\n    if (!isCollection && !queryResult.isReady) return\n\n    // Adjust the window\n    const result = utils.setWindow({\n      offset: expectedOffset,\n      limit: expectedLimit,\n    })\n\n    if (result !== true) {\n      setIsFetchingNextPage(true)\n      result.then(() => {\n        setIsFetchingNextPage(false)\n      })\n    } else {\n      setIsFetchingNextPage(false)\n    }\n  }, [\n    isCollection,\n    queryResult.collection,\n    queryResult.isReady,\n    loadedPageCount,\n    pageSize,\n  ])\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 = (\n      Array.isArray(queryResult.data) ? queryResult.data : []\n    ) 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  } as UseLiveInfiniteQueryReturn<TContext>\n}\n"],"names":["CollectionImpl","useState","useRef","useEffect","useLiveQuery","useMemo","useCallback"],"mappings":"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"}
+{"version":3,"file":"useLiveInfiniteQuery.cjs","sources":["../../src/useLiveInfiniteQuery.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { CollectionImpl } from '@tanstack/db'\nimport { useLiveQuery } from './useLiveQuery'\nimport type {\n  Collection,\n  Context,\n  InferResultType,\n  InitialQueryBuilder,\n  LiveQueryCollectionUtils,\n  NonSingleResult,\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  /**\n   * @deprecated This callback is not used by the current implementation.\n   * Pagination is determined internally via a peek-ahead strategy.\n   * Provided for API compatibility with TanStack Query conventions.\n   */\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 *\n * @example\n * // Router loader pattern with pre-created collection\n * // In loader:\n * const postsQuery = createLiveQueryCollection({\n *   query: (q) => q\n *     .from({ posts: postsCollection })\n *     .orderBy(({ posts }) => posts.createdAt, 'desc')\n *     .limit(20)\n * })\n * await postsQuery.preload()\n * return { postsQuery }\n *\n * // In component:\n * const { postsQuery } = useLoaderData()\n * const { data, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(\n *   postsQuery,\n *   {\n *     pageSize: 20,\n *     getNextPageParam: (lastPage) => lastPage.length === 20 ? lastPage.length : undefined\n *   }\n * )\n */\n\n// Overload for pre-created collection (non-single result)\nexport function useLiveInfiniteQuery<\n  TResult extends object,\n  TKey extends string | number,\n  TUtils extends Record<string, any>,\n>(\n  liveQueryCollection: Collection<TResult, TKey, TUtils> & NonSingleResult,\n  config: UseLiveInfiniteQueryConfig<any>,\n): UseLiveInfiniteQueryReturn<any>\n\n// Overload for query function\nexport function useLiveInfiniteQuery<TContext extends Context>(\n  queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>,\n  config: UseLiveInfiniteQueryConfig<TContext>,\n  deps?: Array<unknown>,\n): UseLiveInfiniteQueryReturn<TContext>\n\n// Implementation\nexport function useLiveInfiniteQuery<TContext extends Context>(\n  queryFnOrCollection: any,\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  // Detect if input is a collection or query function\n  const isCollection = queryFnOrCollection instanceof CollectionImpl\n\n  // Validate input type\n  if (!isCollection && typeof queryFnOrCollection !== `function`) {\n    throw new Error(\n      `useLiveInfiniteQuery: First argument must be either a pre-created live query collection (CollectionImpl) ` +\n        `or a query function. Received: ${typeof queryFnOrCollection}`,\n    )\n  }\n\n  // Track how many pages have been loaded\n  const [loadedPageCount, setLoadedPageCount] = useState(1)\n  const [isFetchingNextPage, setIsFetchingNextPage] = useState(false)\n\n  // Track collection instance and whether we've validated it (only for pre-created collections)\n  const collectionRef = useRef(isCollection ? queryFnOrCollection : null)\n  const hasValidatedCollectionRef = useRef(false)\n\n  // Track deps for query functions (stringify for comparison)\n  let depsKey: string\n  try {\n    depsKey = JSON.stringify(deps)\n  } catch {\n    throw new Error(\n      `useLiveInfiniteQuery: dependency array contains values that cannot be serialized (e.g. circular references). ` +\n        `Ensure all dependency values are JSON-serializable.`,\n    )\n  }\n  const prevDepsKeyRef = useRef(depsKey)\n\n  // Reset pagination when inputs change\n  useEffect(() => {\n    let shouldReset = false\n\n    if (isCollection) {\n      // Reset if collection instance changed\n      if (collectionRef.current !== queryFnOrCollection) {\n        collectionRef.current = queryFnOrCollection\n        hasValidatedCollectionRef.current = false\n        shouldReset = true\n      }\n    } else {\n      // Reset if deps changed (for query functions)\n      if (prevDepsKeyRef.current !== depsKey) {\n        prevDepsKeyRef.current = depsKey\n        shouldReset = true\n      }\n    }\n\n    if (shouldReset) {\n      setLoadedPageCount(1)\n    }\n  }, [isCollection, queryFnOrCollection, depsKey])\n\n  // Create a live query with initial limit and offset\n  // Either pass collection directly or wrap query function\n  // Use pageSize + 1 for peek-ahead detection (to know if there are more pages)\n  const queryResult = isCollection\n    ? useLiveQuery(queryFnOrCollection)\n    : useLiveQuery(\n        (q) =>\n          queryFnOrCollection(q)\n            .limit(pageSize + 1)\n            .offset(0),\n        deps,\n      )\n\n  // Adjust window when pagination changes\n  useEffect(() => {\n    const utils = queryResult.collection.utils\n    const expectedOffset = 0\n    const expectedLimit = loadedPageCount * pageSize + 1 // +1 for peek ahead\n\n    // Check if collection has orderBy (required for setWindow)\n    if (!isLiveQueryCollectionUtils(utils)) {\n      // For pre-created collections, throw an error if no orderBy\n      if (isCollection) {\n        throw new Error(\n          `useLiveInfiniteQuery: Pre-created live query collection must have an orderBy clause for infinite pagination to work. ` +\n            `Please add .orderBy() to your createLiveQueryCollection query.`,\n        )\n      }\n      return\n    }\n\n    // For pre-created collections, validate window on first check\n    if (isCollection && !hasValidatedCollectionRef.current) {\n      const currentWindow = utils.getWindow()\n      if (\n        currentWindow &&\n        (currentWindow.offset !== expectedOffset ||\n          currentWindow.limit !== expectedLimit)\n      ) {\n        console.warn(\n          `useLiveInfiniteQuery: Pre-created collection has window {offset: ${currentWindow.offset}, limit: ${currentWindow.limit}} ` +\n            `but hook expects {offset: ${expectedOffset}, limit: ${expectedLimit}}. Adjusting window now.`,\n        )\n      }\n      hasValidatedCollectionRef.current = true\n    }\n\n    // For query functions, wait until collection is ready\n    if (!isCollection && !queryResult.isReady) return\n\n    // Adjust the window\n    let cancelled = false\n    const result = utils.setWindow({\n      offset: expectedOffset,\n      limit: expectedLimit,\n    })\n\n    if (result !== true) {\n      setIsFetchingNextPage(true)\n      result\n        .catch((error: unknown) => {\n          if (!cancelled)\n            console.error(`useLiveInfiniteQuery: setWindow failed:`, error)\n        })\n        .finally(() => {\n          if (!cancelled) setIsFetchingNextPage(false)\n        })\n    } else {\n      setIsFetchingNextPage(false)\n    }\n\n    return () => {\n      cancelled = true\n    }\n  }, [\n    isCollection,\n    queryResult.collection,\n    queryResult.isReady,\n    loadedPageCount,\n    pageSize,\n  ])\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 = (\n      Array.isArray(queryResult.data) ? queryResult.data : []\n    ) 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  } as UseLiveInfiniteQueryReturn<TContext>\n}\n"],"names":["CollectionImpl","useState","useRef","useEffect","useLiveQuery","useMemo","useCallback"],"mappings":"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"}

package/dist/cjs/useLiveInfiniteQuery.d.cts

@@ -3,7 +3,12 @@ import { Collection, Context, InferResultType, InitialQueryBuilder, NonSingleRes
 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;
+    /**
+     * @deprecated This callback is not used by the current implementation.
+     * Pagination is determined internally via a peek-ahead strategy.
+     * Provided for API compatibility with TanStack Query conventions.
+     */
+    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>;

package/dist/esm/useLiveInfiniteQuery.d.ts

@@ -3,7 +3,12 @@ import { Collection, Context, InferResultType, InitialQueryBuilder, NonSingleRes
 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;
+    /**
+     * @deprecated This callback is not used by the current implementation.
+     * Pagination is determined internally via a peek-ahead strategy.
+     * Provided for API compatibility with TanStack Query conventions.
+     */
+    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>;

package/dist/esm/useLiveInfiniteQuery.js

@@ -17,7 +17,14 @@ function useLiveInfiniteQuery(queryFnOrCollection, config, deps = []) {
   const [isFetchingNextPage, setIsFetchingNextPage] = useState(false);
   const collectionRef = useRef(isCollection ? queryFnOrCollection : null);
   const hasValidatedCollectionRef = useRef(false);
-  const depsKey = JSON.stringify(deps);
+  let depsKey;
+  try {
+    depsKey = JSON.stringify(deps);
+  } catch {
+    throw new Error(
+      `useLiveInfiniteQuery: dependency array contains values that cannot be serialized (e.g. circular references). Ensure all dependency values are JSON-serializable.`
+    );
+  }
   const prevDepsKeyRef = useRef(depsKey);
   useEffect(() => {
     let shouldReset = false;
@@ -63,18 +70,25 @@ function useLiveInfiniteQuery(queryFnOrCollection, config, deps = []) {
       hasValidatedCollectionRef.current = true;
     }
     if (!isCollection && !queryResult.isReady) return;
+    let cancelled = false;
     const result = utils.setWindow({
       offset: expectedOffset,
       limit: expectedLimit
     });
     if (result !== true) {
       setIsFetchingNextPage(true);
-      result.then(() => {
-        setIsFetchingNextPage(false);
+      result.catch((error) => {
+        if (!cancelled)
+          console.error(`useLiveInfiniteQuery: setWindow failed:`, error);
+      }).finally(() => {
+        if (!cancelled) setIsFetchingNextPage(false);
       });
     } else {
       setIsFetchingNextPage(false);
     }
+    return () => {
+      cancelled = true;
+    };
   }, [
     isCollection,
     queryResult.collection,

package/dist/esm/useLiveInfiniteQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLiveInfiniteQuery.js","sources":["../../src/useLiveInfiniteQuery.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { CollectionImpl } from '@tanstack/db'\nimport { useLiveQuery } from './useLiveQuery'\nimport type {\n  Collection,\n  Context,\n  InferResultType,\n  InitialQueryBuilder,\n  LiveQueryCollectionUtils,\n  NonSingleResult,\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 *\n * @example\n * // Router loader pattern with pre-created collection\n * // In loader:\n * const postsQuery = createLiveQueryCollection({\n *   query: (q) => q\n *     .from({ posts: postsCollection })\n *     .orderBy(({ posts }) => posts.createdAt, 'desc')\n *     .limit(20)\n * })\n * await postsQuery.preload()\n * return { postsQuery }\n *\n * // In component:\n * const { postsQuery } = useLoaderData()\n * const { data, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(\n *   postsQuery,\n *   {\n *     pageSize: 20,\n *     getNextPageParam: (lastPage) => lastPage.length === 20 ? lastPage.length : undefined\n *   }\n * )\n */\n\n// Overload for pre-created collection (non-single result)\nexport function useLiveInfiniteQuery<\n  TResult extends object,\n  TKey extends string | number,\n  TUtils extends Record<string, any>,\n>(\n  liveQueryCollection: Collection<TResult, TKey, TUtils> & NonSingleResult,\n  config: UseLiveInfiniteQueryConfig<any>,\n): UseLiveInfiniteQueryReturn<any>\n\n// Overload for query function\nexport function useLiveInfiniteQuery<TContext extends Context>(\n  queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>,\n  config: UseLiveInfiniteQueryConfig<TContext>,\n  deps?: Array<unknown>,\n): UseLiveInfiniteQueryReturn<TContext>\n\n// Implementation\nexport function useLiveInfiniteQuery<TContext extends Context>(\n  queryFnOrCollection: any,\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  // Detect if input is a collection or query function\n  const isCollection = queryFnOrCollection instanceof CollectionImpl\n\n  // Validate input type\n  if (!isCollection && typeof queryFnOrCollection !== `function`) {\n    throw new Error(\n      `useLiveInfiniteQuery: First argument must be either a pre-created live query collection (CollectionImpl) ` +\n        `or a query function. Received: ${typeof queryFnOrCollection}`,\n    )\n  }\n\n  // Track how many pages have been loaded\n  const [loadedPageCount, setLoadedPageCount] = useState(1)\n  const [isFetchingNextPage, setIsFetchingNextPage] = useState(false)\n\n  // Track collection instance and whether we've validated it (only for pre-created collections)\n  const collectionRef = useRef(isCollection ? queryFnOrCollection : null)\n  const hasValidatedCollectionRef = useRef(false)\n\n  // Track deps for query functions (stringify for comparison)\n  const depsKey = JSON.stringify(deps)\n  const prevDepsKeyRef = useRef(depsKey)\n\n  // Reset pagination when inputs change\n  useEffect(() => {\n    let shouldReset = false\n\n    if (isCollection) {\n      // Reset if collection instance changed\n      if (collectionRef.current !== queryFnOrCollection) {\n        collectionRef.current = queryFnOrCollection\n        hasValidatedCollectionRef.current = false\n        shouldReset = true\n      }\n    } else {\n      // Reset if deps changed (for query functions)\n      if (prevDepsKeyRef.current !== depsKey) {\n        prevDepsKeyRef.current = depsKey\n        shouldReset = true\n      }\n    }\n\n    if (shouldReset) {\n      setLoadedPageCount(1)\n    }\n  }, [isCollection, queryFnOrCollection, depsKey])\n\n  // Create a live query with initial limit and offset\n  // Either pass collection directly or wrap query function\n  // Use pageSize + 1 for peek-ahead detection (to know if there are more pages)\n  const queryResult = isCollection\n    ? useLiveQuery(queryFnOrCollection)\n    : useLiveQuery(\n        (q) =>\n          queryFnOrCollection(q)\n            .limit(pageSize + 1)\n            .offset(0),\n        deps,\n      )\n\n  // Adjust window when pagination changes\n  useEffect(() => {\n    const utils = queryResult.collection.utils\n    const expectedOffset = 0\n    const expectedLimit = loadedPageCount * pageSize + 1 // +1 for peek ahead\n\n    // Check if collection has orderBy (required for setWindow)\n    if (!isLiveQueryCollectionUtils(utils)) {\n      // For pre-created collections, throw an error if no orderBy\n      if (isCollection) {\n        throw new Error(\n          `useLiveInfiniteQuery: Pre-created live query collection must have an orderBy clause for infinite pagination to work. ` +\n            `Please add .orderBy() to your createLiveQueryCollection query.`,\n        )\n      }\n      return\n    }\n\n    // For pre-created collections, validate window on first check\n    if (isCollection && !hasValidatedCollectionRef.current) {\n      const currentWindow = utils.getWindow()\n      if (\n        currentWindow &&\n        (currentWindow.offset !== expectedOffset ||\n          currentWindow.limit !== expectedLimit)\n      ) {\n        console.warn(\n          `useLiveInfiniteQuery: Pre-created collection has window {offset: ${currentWindow.offset}, limit: ${currentWindow.limit}} ` +\n            `but hook expects {offset: ${expectedOffset}, limit: ${expectedLimit}}. Adjusting window now.`,\n        )\n      }\n      hasValidatedCollectionRef.current = true\n    }\n\n    // For query functions, wait until collection is ready\n    if (!isCollection && !queryResult.isReady) return\n\n    // Adjust the window\n    const result = utils.setWindow({\n      offset: expectedOffset,\n      limit: expectedLimit,\n    })\n\n    if (result !== true) {\n      setIsFetchingNextPage(true)\n      result.then(() => {\n        setIsFetchingNextPage(false)\n      })\n    } else {\n      setIsFetchingNextPage(false)\n    }\n  }, [\n    isCollection,\n    queryResult.collection,\n    queryResult.isReady,\n    loadedPageCount,\n    pageSize,\n  ])\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 = (\n      Array.isArray(queryResult.data) ? queryResult.data : []\n    ) 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  } as UseLiveInfiniteQueryReturn<TContext>\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useLiveInfiniteQuery.js","sources":["../../src/useLiveInfiniteQuery.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { CollectionImpl } from '@tanstack/db'\nimport { useLiveQuery } from './useLiveQuery'\nimport type {\n  Collection,\n  Context,\n  InferResultType,\n  InitialQueryBuilder,\n  LiveQueryCollectionUtils,\n  NonSingleResult,\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  /**\n   * @deprecated This callback is not used by the current implementation.\n   * Pagination is determined internally via a peek-ahead strategy.\n   * Provided for API compatibility with TanStack Query conventions.\n   */\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 *\n * @example\n * // Router loader pattern with pre-created collection\n * // In loader:\n * const postsQuery = createLiveQueryCollection({\n *   query: (q) => q\n *     .from({ posts: postsCollection })\n *     .orderBy(({ posts }) => posts.createdAt, 'desc')\n *     .limit(20)\n * })\n * await postsQuery.preload()\n * return { postsQuery }\n *\n * // In component:\n * const { postsQuery } = useLoaderData()\n * const { data, fetchNextPage, hasNextPage } = useLiveInfiniteQuery(\n *   postsQuery,\n *   {\n *     pageSize: 20,\n *     getNextPageParam: (lastPage) => lastPage.length === 20 ? lastPage.length : undefined\n *   }\n * )\n */\n\n// Overload for pre-created collection (non-single result)\nexport function useLiveInfiniteQuery<\n  TResult extends object,\n  TKey extends string | number,\n  TUtils extends Record<string, any>,\n>(\n  liveQueryCollection: Collection<TResult, TKey, TUtils> & NonSingleResult,\n  config: UseLiveInfiniteQueryConfig<any>,\n): UseLiveInfiniteQueryReturn<any>\n\n// Overload for query function\nexport function useLiveInfiniteQuery<TContext extends Context>(\n  queryFn: (q: InitialQueryBuilder) => QueryBuilder<TContext>,\n  config: UseLiveInfiniteQueryConfig<TContext>,\n  deps?: Array<unknown>,\n): UseLiveInfiniteQueryReturn<TContext>\n\n// Implementation\nexport function useLiveInfiniteQuery<TContext extends Context>(\n  queryFnOrCollection: any,\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  // Detect if input is a collection or query function\n  const isCollection = queryFnOrCollection instanceof CollectionImpl\n\n  // Validate input type\n  if (!isCollection && typeof queryFnOrCollection !== `function`) {\n    throw new Error(\n      `useLiveInfiniteQuery: First argument must be either a pre-created live query collection (CollectionImpl) ` +\n        `or a query function. Received: ${typeof queryFnOrCollection}`,\n    )\n  }\n\n  // Track how many pages have been loaded\n  const [loadedPageCount, setLoadedPageCount] = useState(1)\n  const [isFetchingNextPage, setIsFetchingNextPage] = useState(false)\n\n  // Track collection instance and whether we've validated it (only for pre-created collections)\n  const collectionRef = useRef(isCollection ? queryFnOrCollection : null)\n  const hasValidatedCollectionRef = useRef(false)\n\n  // Track deps for query functions (stringify for comparison)\n  let depsKey: string\n  try {\n    depsKey = JSON.stringify(deps)\n  } catch {\n    throw new Error(\n      `useLiveInfiniteQuery: dependency array contains values that cannot be serialized (e.g. circular references). ` +\n        `Ensure all dependency values are JSON-serializable.`,\n    )\n  }\n  const prevDepsKeyRef = useRef(depsKey)\n\n  // Reset pagination when inputs change\n  useEffect(() => {\n    let shouldReset = false\n\n    if (isCollection) {\n      // Reset if collection instance changed\n      if (collectionRef.current !== queryFnOrCollection) {\n        collectionRef.current = queryFnOrCollection\n        hasValidatedCollectionRef.current = false\n        shouldReset = true\n      }\n    } else {\n      // Reset if deps changed (for query functions)\n      if (prevDepsKeyRef.current !== depsKey) {\n        prevDepsKeyRef.current = depsKey\n        shouldReset = true\n      }\n    }\n\n    if (shouldReset) {\n      setLoadedPageCount(1)\n    }\n  }, [isCollection, queryFnOrCollection, depsKey])\n\n  // Create a live query with initial limit and offset\n  // Either pass collection directly or wrap query function\n  // Use pageSize + 1 for peek-ahead detection (to know if there are more pages)\n  const queryResult = isCollection\n    ? useLiveQuery(queryFnOrCollection)\n    : useLiveQuery(\n        (q) =>\n          queryFnOrCollection(q)\n            .limit(pageSize + 1)\n            .offset(0),\n        deps,\n      )\n\n  // Adjust window when pagination changes\n  useEffect(() => {\n    const utils = queryResult.collection.utils\n    const expectedOffset = 0\n    const expectedLimit = loadedPageCount * pageSize + 1 // +1 for peek ahead\n\n    // Check if collection has orderBy (required for setWindow)\n    if (!isLiveQueryCollectionUtils(utils)) {\n      // For pre-created collections, throw an error if no orderBy\n      if (isCollection) {\n        throw new Error(\n          `useLiveInfiniteQuery: Pre-created live query collection must have an orderBy clause for infinite pagination to work. ` +\n            `Please add .orderBy() to your createLiveQueryCollection query.`,\n        )\n      }\n      return\n    }\n\n    // For pre-created collections, validate window on first check\n    if (isCollection && !hasValidatedCollectionRef.current) {\n      const currentWindow = utils.getWindow()\n      if (\n        currentWindow &&\n        (currentWindow.offset !== expectedOffset ||\n          currentWindow.limit !== expectedLimit)\n      ) {\n        console.warn(\n          `useLiveInfiniteQuery: Pre-created collection has window {offset: ${currentWindow.offset}, limit: ${currentWindow.limit}} ` +\n            `but hook expects {offset: ${expectedOffset}, limit: ${expectedLimit}}. Adjusting window now.`,\n        )\n      }\n      hasValidatedCollectionRef.current = true\n    }\n\n    // For query functions, wait until collection is ready\n    if (!isCollection && !queryResult.isReady) return\n\n    // Adjust the window\n    let cancelled = false\n    const result = utils.setWindow({\n      offset: expectedOffset,\n      limit: expectedLimit,\n    })\n\n    if (result !== true) {\n      setIsFetchingNextPage(true)\n      result\n        .catch((error: unknown) => {\n          if (!cancelled)\n            console.error(`useLiveInfiniteQuery: setWindow failed:`, error)\n        })\n        .finally(() => {\n          if (!cancelled) setIsFetchingNextPage(false)\n        })\n    } else {\n      setIsFetchingNextPage(false)\n    }\n\n    return () => {\n      cancelled = true\n    }\n  }, [\n    isCollection,\n    queryResult.collection,\n    queryResult.isReady,\n    loadedPageCount,\n    pageSize,\n  ])\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 = (\n      Array.isArray(queryResult.data) ? queryResult.data : []\n    ) 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  } as UseLiveInfiniteQueryReturn<TContext>\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-db",
-  "version": "0.1.73",
+  "version": "0.1.75",
   "description": "React integration for @tanstack/db",
   "author": "Kyle Mathews",
   "license": "MIT",
@@ -35,17 +35,18 @@
   "sideEffects": false,
   "files": [
     "dist",
-    "src"
+    "src",
+    "skills"
   ],
   "dependencies": {
     "use-sync-external-store": "^1.6.0",
-    "@tanstack/db": "0.5.29"
+    "@tanstack/db": "0.5.31"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@electric-sql/client": "^1.5.8",
+    "@electric-sql/client": "^1.5.12",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",

package/skills/react-db/SKILL.md

@@ -0,0 +1,317 @@
+---
+name: react-db
+description: >
+  React bindings for TanStack DB. useLiveQuery hook with dependency arrays
+  (8 overloads: query function, config object, pre-created collection,
+  disabled state via returning undefined/null). useLiveSuspenseQuery for
+  React Suspense with Error Boundaries (data always defined).
+  useLiveInfiniteQuery for cursor-based pagination (pageSize, fetchNextPage,
+  hasNextPage, isFetchingNextPage). usePacedMutations for debounced React
+  state updates. Return shape: data, state, collection, status, isLoading,
+  isReady, isError. Import from @tanstack/react-db (re-exports all of
+  @tanstack/db).
+type: framework
+library: db
+framework: react
+library_version: '0.5.30'
+requires:
+  - db-core
+sources:
+  - 'TanStack/db:docs/framework/react/overview.md'
+  - 'TanStack/db:docs/guides/live-queries.md'
+  - 'TanStack/db:packages/react-db/src/useLiveQuery.ts'
+  - 'TanStack/db:packages/react-db/src/useLiveInfiniteQuery.ts'
+---
+
+This skill builds on db-core. Read it first for collection setup, query builder, and mutation patterns.
+
+# TanStack DB — React
+
+## Setup
+
+```tsx
+import { useLiveQuery, eq, not } from '@tanstack/react-db'
+
+function TodoList() {
+  const { data: todos, isLoading } = useLiveQuery((q) =>
+    q
+      .from({ todo: todoCollection })
+      .where(({ todo }) => not(todo.completed))
+      .orderBy(({ todo }) => todo.created_at, 'asc'),
+  )
+
+  if (isLoading) return <div>Loading...</div>
+
+  return (
+    <ul>
+      {todos.map((todo) => (
+        <li key={todo.id}>{todo.text}</li>
+      ))}
+    </ul>
+  )
+}
+```
+
+`@tanstack/react-db` re-exports everything from `@tanstack/db`. In React projects, import everything from `@tanstack/react-db`.
+
+## Hooks
+
+### useLiveQuery
+
+```tsx
+// Query function with dependency array
+const {
+  data,
+  state,
+  collection,
+  status,
+  isLoading,
+  isReady,
+  isError,
+  isIdle,
+  isCleanedUp,
+} = useLiveQuery(
+  (q) =>
+    q
+      .from({ todo: todoCollection })
+      .where(({ todo }) => eq(todo.userId, userId)),
+  [userId],
+)
+
+// Config object
+const { data } = useLiveQuery({
+  query: (q) => q.from({ todo: todoCollection }),
+  gcTime: 60000,
+})
+
+// Pre-created collection (from route loader)
+const { data } = useLiveQuery(preloadedCollection)
+
+// Conditional query — return undefined/null to disable
+const { data, status } = useLiveQuery(
+  (q) => {
+    if (!userId) return undefined
+    return q
+      .from({ todo: todoCollection })
+      .where(({ todo }) => eq(todo.userId, userId))
+  },
+  [userId],
+)
+// When disabled: status='disabled', data=undefined
+```
+
+### useLiveSuspenseQuery
+
+```tsx
+// data is ALWAYS defined — never undefined
+// Must wrap in <Suspense> and <ErrorBoundary>
+function TodoList() {
+  const { data: todos } = useLiveSuspenseQuery((q) =>
+    q.from({ todo: todoCollection }),
+  )
+
+  return (
+    <ul>
+      {todos.map((t) => (
+        <li key={t.id}>{t.text}</li>
+      ))}
+    </ul>
+  )
+}
+
+// With deps — re-suspends when deps change
+const { data } = useLiveSuspenseQuery(
+  (q) =>
+    q
+      .from({ todo: todoCollection })
+      .where(({ todo }) => eq(todo.category, category)),
+  [category],
+)
+```
+
+### useLiveInfiniteQuery
+
+```tsx
+const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+  useLiveInfiniteQuery(
+    (q) =>
+      q
+        .from({ posts: postsCollection })
+        .orderBy(({ posts }) => posts.createdAt, 'desc'),
+    { pageSize: 20 },
+    [category],
+  )
+
+// data is the flat array of all loaded pages
+// fetchNextPage() loads the next page
+// hasNextPage is true when more data is available
+```
+
+### usePacedMutations
+
+```tsx
+import { usePacedMutations, debounceStrategy } from "@tanstack/react-db"
+
+const mutate = usePacedMutations({
+  onMutate: (value: string) => {
+    noteCollection.update(noteId, (draft) => {
+      draft.content = value
+    })
+  },
+  mutationFn: async ({ transaction }) => {
+    await api.notes.update(noteId, transaction.mutations[0].changes)
+  },
+  strategy: debounceStrategy({ wait: 500 }),
+})
+
+// In handler:
+<textarea onChange={(e) => mutate(e.target.value)} />
+```
+
+## React-Specific Patterns
+
+### Dependency arrays
+
+```tsx
+// Include ALL external reactive values
+const { data } = useLiveQuery(
+  (q) =>
+    q
+      .from({ todo: todoCollection })
+      .where(({ todo }) =>
+        and(eq(todo.userId, userId), eq(todo.status, filter)),
+      ),
+  [userId, filter],
+)
+
+// Empty array = static query, never re-runs
+const { data } = useLiveQuery((q) => q.from({ todo: todoCollection }), [])
+
+// No array = re-runs on every render (usually wrong)
+```
+
+### Suspense + Error Boundary
+
+```tsx
+<ErrorBoundary fallback={<div>Error</div>}>
+  <Suspense fallback={<div>Loading...</div>}>
+    <TodoList />
+  </Suspense>
+</ErrorBoundary>
+```
+
+### Router loader preloading
+
+```tsx
+// In route loader:
+await todoCollection.preload()
+
+// In component — data available immediately:
+const { data } = useLiveQuery((q) => q.from({ todo: todoCollection }))
+```
+
+See meta-framework/SKILL.md for full preloading patterns.
+
+## Common Mistakes
+
+### CRITICAL Missing external values in dependency array
+
+Wrong:
+
+```tsx
+const { data } = useLiveQuery((q) =>
+  q.from({ todo: todoCollection }).where(({ todo }) => eq(todo.userId, userId)),
+)
+```
+
+Correct:
+
+```tsx
+const { data } = useLiveQuery(
+  (q) =>
+    q
+      .from({ todo: todoCollection })
+      .where(({ todo }) => eq(todo.userId, userId)),
+  [userId],
+)
+```
+
+When the query uses external state not in the deps array, the query won't re-run when that value changes, showing stale results.
+
+Source: docs/framework/react/overview.md
+
+### HIGH useLiveSuspenseQuery without Error Boundary
+
+Wrong:
+
+```tsx
+<Suspense fallback={<div>Loading...</div>}>
+  <TodoList /> {/* uses useLiveSuspenseQuery */}
+</Suspense>
+```
+
+Correct:
+
+```tsx
+<ErrorBoundary fallback={<div>Error</div>}>
+  <Suspense fallback={<div>Loading...</div>}>
+    <TodoList />
+  </Suspense>
+</ErrorBoundary>
+```
+
+`useLiveSuspenseQuery` throws errors during rendering. Without an Error Boundary, the entire app crashes.
+
+Source: docs/guides/live-queries.md
+
+### HIGH "Not a Collection" error from duplicate @tanstack/db
+
+If `useLiveQuery` throws `InvalidSourceError: The value provided for alias "todo" is not a Collection`, it usually means two copies of `@tanstack/db` are installed. The collection was created by one copy, but `useLiveQuery` checks `instanceof` against the other.
+
+In dev mode, TanStack DB also throws `DuplicateDbInstanceError` if two instances are detected.
+
+**Diagnose:**
+
+```bash
+pnpm ls @tanstack/db
+```
+
+If multiple versions appear, fix with one of:
+
+**pnpm overrides** (in root package.json):
+
+```json
+{
+  "pnpm": {
+    "overrides": {
+      "@tanstack/db": "^0.5.30"
+    }
+  }
+}
+```
+
+**Vite resolve.alias** (in vite.config.ts):
+
+```ts
+import path from 'path'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@tanstack/db': path.resolve('./node_modules/@tanstack/db'),
+    },
+  },
+})
+```
+
+The root cause is typically a dependency that bundles its own copy instead of declaring `@tanstack/db` as a `peerDependency`.
+
+### HIGH Tension: Query expressiveness vs. IVM constraints
+
+The query builder looks like SQL but has constraints that SQL doesn't — equality joins only, orderBy required for limit/offset, no distinct without select. Agents write SQL-style queries that violate these constraints. See db-core/live-queries/SKILL.md § Common Mistakes for all constraints.
+
+See also: db-core/live-queries/SKILL.md — for query builder API and all operators.
+
+See also: db-core/mutations-optimistic/SKILL.md — for mutation patterns.
+
+See also: meta-framework/SKILL.md — for preloading in route loaders.

package/src/useLiveInfiniteQuery.ts

@@ -23,7 +23,12 @@ function isLiveQueryCollectionUtils(
 export type UseLiveInfiniteQueryConfig<TContext extends Context> = {
   pageSize?: number
   initialPageParam?: number
-  getNextPageParam: (
+  /**
+   * @deprecated This callback is not used by the current implementation.
+   * Pagination is determined internally via a peek-ahead strategy.
+   * Provided for API compatibility with TanStack Query conventions.
+   */
+  getNextPageParam?: (
     lastPage: Array<InferResultType<TContext>[number]>,
     allPages: Array<Array<InferResultType<TContext>[number]>>,
     lastPageParam: number,
@@ -155,7 +160,15 @@ export function useLiveInfiniteQuery<TContext extends Context>(
   const hasValidatedCollectionRef = useRef(false)
 
   // Track deps for query functions (stringify for comparison)
-  const depsKey = JSON.stringify(deps)
+  let depsKey: string
+  try {
+    depsKey = JSON.stringify(deps)
+  } catch {
+    throw new Error(
+      `useLiveInfiniteQuery: dependency array contains values that cannot be serialized (e.g. circular references). ` +
+        `Ensure all dependency values are JSON-serializable.`,
+    )
+  }
   const prevDepsKeyRef = useRef(depsKey)
 
   // Reset pagination when inputs change
@@ -233,6 +246,7 @@ export function useLiveInfiniteQuery<TContext extends Context>(
     if (!isCollection && !queryResult.isReady) return
 
     // Adjust the window
+    let cancelled = false
     const result = utils.setWindow({
       offset: expectedOffset,
       limit: expectedLimit,
@@ -240,12 +254,21 @@ export function useLiveInfiniteQuery<TContext extends Context>(
 
     if (result !== true) {
       setIsFetchingNextPage(true)
-      result.then(() => {
-        setIsFetchingNextPage(false)
-      })
+      result
+        .catch((error: unknown) => {
+          if (!cancelled)
+            console.error(`useLiveInfiniteQuery: setWindow failed:`, error)
+        })
+        .finally(() => {
+          if (!cancelled) setIsFetchingNextPage(false)
+        })
     } else {
       setIsFetchingNextPage(false)
     }
+
+    return () => {
+      cancelled = true
+    }
   }, [
     isCollection,
     queryResult.collection,