@tanstack/preact-query 5.102.8 → 5.103.0

package/build/legacy/useQuery.d.ts

@@ -18,14 +18,22 @@ import { DefaultError, QueryClient, QueryKey } from "@tanstack/query-core";
  * import { useQuery } from '@tanstack/preact-query'
  *
  * function Posts() {
- *   // `data` is `Post[]`, never `undefined`, thanks to `initialData`.
- *   const { data } = useQuery({
+ *   // `data` is `Post[]`, never `undefined`, thanks to `initialData` — even if a refetch fails,
+ *   // so the list stays visible alongside the error.
+ *   const { data, isError, error } = useQuery({
  *     queryKey: ['posts'],
  *     queryFn: fetchPosts,
  *     initialData: [],
  *   })
  *
- *   return <>{data.map((post) => <p key={post.id}>{post.title}</p>)}</>
+ *   return (
+ *     <div>
+ *       {isError ? <span>Error: {error.message}</span> : null}
+ *       <ul>
+ *         {data.map((post) => <li key={post.id}>{post.title}</li>)}
+ *       </ul>
+ *     </div>
+ *   )
  * }
  * ```
  */
@@ -35,30 +43,30 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
  * @param options - The {@link UndefinedInitialDataOptions} to use — everything you can pass to `useQuery`.
  * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
  * be used.
- * @returns The current query result. `status` is `pending` if there is no cached data and no query attempt
- * has finished yet, `error` if the query attempt resulted in an error, or `success` if the query has data to
- * display. `isPending`/`isSuccess`/`isError` are derived booleans for convenience.
+ * @returns The current query result. `status` is `pending` if there is no cached data to display, `error` if
+ * the last fetch attempt failed, or `success` if the query has data to display. `isPending`/`isSuccess`/`isError`
+ * are derived booleans for convenience.
  *
  * @example
  * ```tsx
- * import { queryOptions, useQuery } from '@tanstack/preact-query'
- *
- * const postsOptions = queryOptions({
- *   queryKey: ['posts'],
- *   queryFn: fetchPosts,
- * })
+ * import { useQuery } from '@tanstack/preact-query'
  *
  * function Posts() {
- *   const { status, data, error, isFetching } = useQuery(postsOptions)
+ *   const { status, data, error, isFetching } = useQuery({
+ *     queryKey: ['posts'],
+ *     queryFn: fetchPosts,
+ *   })
  *
  *   if (status === 'pending') return 'Loading...'
  *   if (status === 'error') return <span>Error: {error.message}</span>
  *
  *   return (
  *     <div>
- *       {data.map((post) => (
- *         <p key={post.id}>{post.title}</p>
- *       ))}
+ *       <ul>
+ *         {data.map((post) => (
+ *           <li key={post.id}>{post.title}</li>
+ *         ))}
+ *       </ul>
  *       <div>{isFetching ? 'Background Updating...' : ' '}</div>
  *     </div>
  *   )
@@ -79,7 +87,11 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
  *   if (isPending) return 'Loading...'
  *   if (isError) return <span>Error: {error.message}</span>
  *
- *   return <>{data.map((post) => <p key={post.id}>{post.title}</p>)}</>
+ *   return (
+ *     <ul>
+ *       {data.map((post) => <li key={post.id}>{post.title}</li>)}
+ *     </ul>
+ *   )
  * }
  * ```
  */
@@ -89,30 +101,30 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
  * @param options - The {@link UseQueryOptions} to use — everything you can pass to `useQuery`.
  * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
  * be used.
- * @returns The current query result. `status` is `pending` if there is no cached data and no query attempt
- * has finished yet, `error` if the query attempt resulted in an error, or `success` if the query has data to
- * display. `isPending`/`isSuccess`/`isError` are derived booleans for convenience.
+ * @returns The current query result. `status` is `pending` if there is no cached data to display, `error` if
+ * the last fetch attempt failed, or `success` if the query has data to display. `isPending`/`isSuccess`/`isError`
+ * are derived booleans for convenience.
  *
  * @example
  * ```tsx
- * import { queryOptions, useQuery } from '@tanstack/preact-query'
- *
- * const postsOptions = queryOptions({
- *   queryKey: ['posts'],
- *   queryFn: fetchPosts,
- * })
+ * import { useQuery } from '@tanstack/preact-query'
  *
  * function Posts() {
- *   const { status, data, error, isFetching } = useQuery(postsOptions)
+ *   const { status, data, error, isFetching } = useQuery({
+ *     queryKey: ['posts'],
+ *     queryFn: fetchPosts,
+ *   })
  *
  *   if (status === 'pending') return 'Loading...'
  *   if (status === 'error') return <span>Error: {error.message}</span>
  *
  *   return (
  *     <div>
- *       {data.map((post) => (
- *         <p key={post.id}>{post.title}</p>
- *       ))}
+ *       <ul>
+ *         {data.map((post) => (
+ *           <li key={post.id}>{post.title}</li>
+ *         ))}
+ *       </ul>
  *       <div>{isFetching ? 'Background Updating...' : ' '}</div>
  *     </div>
  *   )
@@ -120,6 +132,26 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
  * ```
  *
  * @example
+ * `select` derives whatever `data` a component needs from the cached value, without changing what's
+ * actually stored in the cache — the cache still holds the full `Post[]`, but `data` here is a `number`:
+ * ```tsx
+ * import { useQuery } from '@tanstack/preact-query'
+ *
+ * function PostCount() {
+ *   const { data, isPending, isError, error } = useQuery({
+ *     queryKey: ['posts'],
+ *     queryFn: fetchPosts,
+ *     select: (posts) => posts.length,
+ *   })
+ *
+ *   if (isPending) return 'Loading...'
+ *   if (isError) return <span>Error: {error.message}</span>
+ *
+ *   return <span>{data} posts</span>
+ * }
+ * ```
+ *
+ * @example
  * A dependent query, only enabled once `postId` is set — use `isLoading`, not `isPending`, so the
  * loading state doesn't show while the query is disabled:
  * ```tsx
@@ -141,6 +173,28 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
  * ```
  *
  * @example
+ * The same dependent query, type safe: `skipToken` disables the query without needing the
+ * non-null assertion above, since `queryFn` is only ever called when `postId` is defined.
+ * `refetch` doesn't work while `queryFn` is `skipToken` — use `enabled: false` instead if you
+ * need to trigger the query manually:
+ * ```tsx
+ * import { skipToken, useQuery } from '@tanstack/preact-query'
+ *
+ * function Post({ postId }: { postId: number | undefined }) {
+ *   const { data, isLoading, isError, error } = useQuery({
+ *     queryKey: ['post', postId],
+ *     queryFn: postId != null ? () => fetchPost(postId) : skipToken,
+ *   })
+ *
+ *   if (postId == null) return 'Select a post'
+ *   if (isLoading) return 'Loading...'
+ *   if (isError) return <span>Error: {error.message}</span>
+ *
+ *   return <h1>{data?.title}</h1>
+ * }
+ * ```
+ *
+ * @example
  * Seeding a detail query from an already-cached list, to skip the loading state:
  * ```tsx
  * import { useQuery, useQueryClient } from '@tanstack/preact-query'
@@ -148,7 +202,7 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
  * function Post({ postId }: { postId: number }) {
  *   const queryClient = useQueryClient()
  *
- *   const { data } = useQuery({
+ *   const { data, isError, error } = useQuery({
  *     queryKey: ['post', postId],
  *     queryFn: () => fetchPost(postId),
  *     initialData: () =>
@@ -157,6 +211,8 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
  *         ?.find((post) => post.id === postId),
  *   })
  *
+ *   if (isError) return <span>Error: {error.message}</span>
+ *
  *   return <h1>{data?.title}</h1>
  * }
  * ```
@@ -170,15 +226,19 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
  * function Posts() {
  *   const [page, setPage] = useState(0)
  *
- *   const { data, isPlaceholderData } = useQuery({
+ *   const { data, isPlaceholderData, isError, error } = useQuery({
  *     queryKey: ['posts', page],
  *     queryFn: () => fetchPosts(page),
  *     placeholderData: keepPreviousData,
  *   })
  *
+ *   if (isError) return <span>Error: {error.message}</span>
+ *
  *   return (
  *     <div>
- *       {data?.map((post) => <p key={post.id}>{post.title}</p>)}
+ *       <ul>
+ *         {data?.map((post) => <li key={post.id}>{post.title}</li>)}
+ *       </ul>
  *       <button
  *         disabled={isPlaceholderData}
  *         onClick={() => setPage((old) => old + 1)}

package/build/legacy/useQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useQuery.d.ts","names":[],"sources":["../../src/useQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyCgB,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,0BAA0B,cAAc,QAAQ,OAAO,YAChE,cAAc,cACb,sBAAsB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuDhB,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,4BAA4B,cAAc,QAAQ,OAAO,YAClE,cAAc,cACb,eAAe,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4GT,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,gBAAgB,cAAc,QAAQ,OAAO,YACtD,cAAc,cACb,eAAe,OAAO"}
+{"version":3,"file":"useQuery.d.ts","names":[],"sources":["../../src/useQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiDgB,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,0BAA0B,cAAc,QAAQ,OAAO,YAChE,cAAc,cACb,sBAAsB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA2DhB,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,4BAA4B,cAAc,QAAQ,OAAO,YAClE,cAAc,cACb,eAAe,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4JT,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,gBAAgB,cAAc,QAAQ,OAAO,YACtD,cAAc,cACb,eAAe,OAAO"}

package/build/legacy/useQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"useQuery.js","names":[],"sources":["../../src/useQuery.ts"],"sourcesContent":["import { QueryObserver } from '@tanstack/query-core'\nimport type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'\n\nimport type {\n  DefinedInitialDataOptions,\n  UndefinedInitialDataOptions,\n} from './queryOptions'\nimport type {\n  DefinedUseQueryResult,\n  UseQueryOptions,\n  UseQueryResult,\n} from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * This overload is selected when `initialData` is set, so the resulting `data` is never `undefined`.\n *\n * @see {@link queryOptions} to share these options between `useQuery` and imperative APIs like `queryClient.query`.\n * @param options - The {@link DefinedInitialDataOptions} to use — everything you can pass to `useQuery`, with `initialData` set.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The current query result, typed so that `status` is `success` — or `error` if a fetch attempt\n * fails while keeping the existing data (`status` never resolves to `pending` in this overload's type,\n * since `initialData` guarantees data upfront). `isSuccess`/`isError` are derived booleans for convenience.\n *\n * @example\n * ```tsx\n * import { useQuery } from '@tanstack/preact-query'\n *\n * function Posts() {\n *   // `data` is `Post[]`, never `undefined`, thanks to `initialData`.\n *   const { data } = useQuery({\n *     queryKey: ['posts'],\n *     queryFn: fetchPosts,\n *     initialData: [],\n *   })\n *\n *   return <>{data.map((post) => <p key={post.id}>{post.title}</p>)}</>\n * }\n * ```\n */\nexport function useQuery<\n  TQueryFnData = unknown,\n  TError = DefaultError,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(\n  options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,\n  queryClient?: QueryClient,\n): DefinedUseQueryResult<TData, TError>\n\n/**\n * @see {@link queryOptions} to share these options between `useQuery` and imperative APIs like `queryClient.query`.\n * @param options - The {@link UndefinedInitialDataOptions} to use — everything you can pass to `useQuery`.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The current query result. `status` is `pending` if there is no cached data and no query attempt\n * has finished yet, `error` if the query attempt resulted in an error, or `success` if the query has data to\n * display. `isPending`/`isSuccess`/`isError` are derived booleans for convenience.\n *\n * @example\n * ```tsx\n * import { queryOptions, useQuery } from '@tanstack/preact-query'\n *\n * const postsOptions = queryOptions({\n *   queryKey: ['posts'],\n *   queryFn: fetchPosts,\n * })\n *\n * function Posts() {\n *   const { status, data, error, isFetching } = useQuery(postsOptions)\n *\n *   if (status === 'pending') return 'Loading...'\n *   if (status === 'error') return <span>Error: {error.message}</span>\n *\n *   return (\n *     <div>\n *       {data.map((post) => (\n *         <p key={post.id}>{post.title}</p>\n *       ))}\n *       <div>{isFetching ? 'Background Updating...' : ' '}</div>\n *     </div>\n *   )\n * }\n * ```\n *\n * @example\n * The same query, checking `isPending`/`isError` instead of `status` — pick whichever reads better to you:\n * ```tsx\n * import { useQuery } from '@tanstack/preact-query'\n *\n * function Posts() {\n *   const { isPending, isError, data, error } = useQuery({\n *     queryKey: ['posts'],\n *     queryFn: fetchPosts,\n *   })\n *\n *   if (isPending) return 'Loading...'\n *   if (isError) return <span>Error: {error.message}</span>\n *\n *   return <>{data.map((post) => <p key={post.id}>{post.title}</p>)}</>\n * }\n * ```\n */\nexport function useQuery<\n  TQueryFnData = unknown,\n  TError = DefaultError,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(\n  options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,\n  queryClient?: QueryClient,\n): UseQueryResult<TData, TError>\n\n/**\n * @see {@link queryOptions} to share these options between `useQuery` and imperative APIs like `queryClient.query`.\n * @param options - The {@link UseQueryOptions} to use — everything you can pass to `useQuery`.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The current query result. `status` is `pending` if there is no cached data and no query attempt\n * has finished yet, `error` if the query attempt resulted in an error, or `success` if the query has data to\n * display. `isPending`/`isSuccess`/`isError` are derived booleans for convenience.\n *\n * @example\n * ```tsx\n * import { queryOptions, useQuery } from '@tanstack/preact-query'\n *\n * const postsOptions = queryOptions({\n *   queryKey: ['posts'],\n *   queryFn: fetchPosts,\n * })\n *\n * function Posts() {\n *   const { status, data, error, isFetching } = useQuery(postsOptions)\n *\n *   if (status === 'pending') return 'Loading...'\n *   if (status === 'error') return <span>Error: {error.message}</span>\n *\n *   return (\n *     <div>\n *       {data.map((post) => (\n *         <p key={post.id}>{post.title}</p>\n *       ))}\n *       <div>{isFetching ? 'Background Updating...' : ' '}</div>\n *     </div>\n *   )\n * }\n * ```\n *\n * @example\n * A dependent query, only enabled once `postId` is set — use `isLoading`, not `isPending`, so the\n * loading state doesn't show while the query is disabled:\n * ```tsx\n * import { useQuery } from '@tanstack/preact-query'\n *\n * function Post({ postId }: { postId: number | undefined }) {\n *   const { data, isLoading, isError, error } = useQuery({\n *     queryKey: ['post', postId],\n *     queryFn: () => fetchPost(postId!),\n *     enabled: postId != null,\n *   })\n *\n *   if (postId == null) return 'Select a post'\n *   if (isLoading) return 'Loading...'\n *   if (isError) return <span>Error: {error.message}</span>\n *\n *   return <h1>{data?.title}</h1>\n * }\n * ```\n *\n * @example\n * Seeding a detail query from an already-cached list, to skip the loading state:\n * ```tsx\n * import { useQuery, useQueryClient } from '@tanstack/preact-query'\n *\n * function Post({ postId }: { postId: number }) {\n *   const queryClient = useQueryClient()\n *\n *   const { data } = useQuery({\n *     queryKey: ['post', postId],\n *     queryFn: () => fetchPost(postId),\n *     initialData: () =>\n *       queryClient\n *         .getQueryData<Array<Post>>(['posts'])\n *         ?.find((post) => post.id === postId),\n *   })\n *\n *   return <h1>{data?.title}</h1>\n * }\n * ```\n *\n * @example\n * Paginated data, keeping the previous page's data visible while the next page loads:\n * ```tsx\n * import { keepPreviousData, useQuery } from '@tanstack/preact-query'\n * import { useState } from 'preact/hooks'\n *\n * function Posts() {\n *   const [page, setPage] = useState(0)\n *\n *   const { data, isPlaceholderData } = useQuery({\n *     queryKey: ['posts', page],\n *     queryFn: () => fetchPosts(page),\n *     placeholderData: keepPreviousData,\n *   })\n *\n *   return (\n *     <div>\n *       {data?.map((post) => <p key={post.id}>{post.title}</p>)}\n *       <button\n *         disabled={isPlaceholderData}\n *         onClick={() => setPage((old) => old + 1)}\n *       >\n *         Next Page\n *       </button>\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useQuery<\n  TQueryFnData = unknown,\n  TError = DefaultError,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(\n  options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,\n  queryClient?: QueryClient,\n): UseQueryResult<TData, TError>\n\nexport function useQuery(options: UseQueryOptions, queryClient?: QueryClient) {\n  return useBaseQuery(options, QueryObserver, queryClient)\n}\n"],"mappings":";;;AAsOA,SAAgB,SAAS,SAA0B,aAA2B;CAC5E,OAAO,aAAa,SAAS,eAAe,WAAW;AACzD"}
+{"version":3,"file":"useQuery.js","names":[],"sources":["../../src/useQuery.ts"],"sourcesContent":["import { QueryObserver } from '@tanstack/query-core'\nimport type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'\n\nimport type {\n  DefinedInitialDataOptions,\n  UndefinedInitialDataOptions,\n} from './queryOptions'\nimport type {\n  DefinedUseQueryResult,\n  UseQueryOptions,\n  UseQueryResult,\n} from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * This overload is selected when `initialData` is set, so the resulting `data` is never `undefined`.\n *\n * @see {@link queryOptions} to share these options between `useQuery` and imperative APIs like `queryClient.query`.\n * @param options - The {@link DefinedInitialDataOptions} to use — everything you can pass to `useQuery`, with `initialData` set.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The current query result, typed so that `status` is `success` — or `error` if a fetch attempt\n * fails while keeping the existing data (`status` never resolves to `pending` in this overload's type,\n * since `initialData` guarantees data upfront). `isSuccess`/`isError` are derived booleans for convenience.\n *\n * @example\n * ```tsx\n * import { useQuery } from '@tanstack/preact-query'\n *\n * function Posts() {\n *   // `data` is `Post[]`, never `undefined`, thanks to `initialData` — even if a refetch fails,\n *   // so the list stays visible alongside the error.\n *   const { data, isError, error } = useQuery({\n *     queryKey: ['posts'],\n *     queryFn: fetchPosts,\n *     initialData: [],\n *   })\n *\n *   return (\n *     <div>\n *       {isError ? <span>Error: {error.message}</span> : null}\n *       <ul>\n *         {data.map((post) => <li key={post.id}>{post.title}</li>)}\n *       </ul>\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useQuery<\n  TQueryFnData = unknown,\n  TError = DefaultError,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(\n  options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,\n  queryClient?: QueryClient,\n): DefinedUseQueryResult<TData, TError>\n\n/**\n * @see {@link queryOptions} to share these options between `useQuery` and imperative APIs like `queryClient.query`.\n * @param options - The {@link UndefinedInitialDataOptions} to use — everything you can pass to `useQuery`.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The current query result. `status` is `pending` if there is no cached data to display, `error` if\n * the last fetch attempt failed, or `success` if the query has data to display. `isPending`/`isSuccess`/`isError`\n * are derived booleans for convenience.\n *\n * @example\n * ```tsx\n * import { useQuery } from '@tanstack/preact-query'\n *\n * function Posts() {\n *   const { status, data, error, isFetching } = useQuery({\n *     queryKey: ['posts'],\n *     queryFn: fetchPosts,\n *   })\n *\n *   if (status === 'pending') return 'Loading...'\n *   if (status === 'error') return <span>Error: {error.message}</span>\n *\n *   return (\n *     <div>\n *       <ul>\n *         {data.map((post) => (\n *           <li key={post.id}>{post.title}</li>\n *         ))}\n *       </ul>\n *       <div>{isFetching ? 'Background Updating...' : ' '}</div>\n *     </div>\n *   )\n * }\n * ```\n *\n * @example\n * The same query, checking `isPending`/`isError` instead of `status` — pick whichever reads better to you:\n * ```tsx\n * import { useQuery } from '@tanstack/preact-query'\n *\n * function Posts() {\n *   const { isPending, isError, data, error } = useQuery({\n *     queryKey: ['posts'],\n *     queryFn: fetchPosts,\n *   })\n *\n *   if (isPending) return 'Loading...'\n *   if (isError) return <span>Error: {error.message}</span>\n *\n *   return (\n *     <ul>\n *       {data.map((post) => <li key={post.id}>{post.title}</li>)}\n *     </ul>\n *   )\n * }\n * ```\n */\nexport function useQuery<\n  TQueryFnData = unknown,\n  TError = DefaultError,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(\n  options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,\n  queryClient?: QueryClient,\n): UseQueryResult<TData, TError>\n\n/**\n * @see {@link queryOptions} to share these options between `useQuery` and imperative APIs like `queryClient.query`.\n * @param options - The {@link UseQueryOptions} to use — everything you can pass to `useQuery`.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The current query result. `status` is `pending` if there is no cached data to display, `error` if\n * the last fetch attempt failed, or `success` if the query has data to display. `isPending`/`isSuccess`/`isError`\n * are derived booleans for convenience.\n *\n * @example\n * ```tsx\n * import { useQuery } from '@tanstack/preact-query'\n *\n * function Posts() {\n *   const { status, data, error, isFetching } = useQuery({\n *     queryKey: ['posts'],\n *     queryFn: fetchPosts,\n *   })\n *\n *   if (status === 'pending') return 'Loading...'\n *   if (status === 'error') return <span>Error: {error.message}</span>\n *\n *   return (\n *     <div>\n *       <ul>\n *         {data.map((post) => (\n *           <li key={post.id}>{post.title}</li>\n *         ))}\n *       </ul>\n *       <div>{isFetching ? 'Background Updating...' : ' '}</div>\n *     </div>\n *   )\n * }\n * ```\n *\n * @example\n * `select` derives whatever `data` a component needs from the cached value, without changing what's\n * actually stored in the cache — the cache still holds the full `Post[]`, but `data` here is a `number`:\n * ```tsx\n * import { useQuery } from '@tanstack/preact-query'\n *\n * function PostCount() {\n *   const { data, isPending, isError, error } = useQuery({\n *     queryKey: ['posts'],\n *     queryFn: fetchPosts,\n *     select: (posts) => posts.length,\n *   })\n *\n *   if (isPending) return 'Loading...'\n *   if (isError) return <span>Error: {error.message}</span>\n *\n *   return <span>{data} posts</span>\n * }\n * ```\n *\n * @example\n * A dependent query, only enabled once `postId` is set — use `isLoading`, not `isPending`, so the\n * loading state doesn't show while the query is disabled:\n * ```tsx\n * import { useQuery } from '@tanstack/preact-query'\n *\n * function Post({ postId }: { postId: number | undefined }) {\n *   const { data, isLoading, isError, error } = useQuery({\n *     queryKey: ['post', postId],\n *     queryFn: () => fetchPost(postId!),\n *     enabled: postId != null,\n *   })\n *\n *   if (postId == null) return 'Select a post'\n *   if (isLoading) return 'Loading...'\n *   if (isError) return <span>Error: {error.message}</span>\n *\n *   return <h1>{data?.title}</h1>\n * }\n * ```\n *\n * @example\n * The same dependent query, type safe: `skipToken` disables the query without needing the\n * non-null assertion above, since `queryFn` is only ever called when `postId` is defined.\n * `refetch` doesn't work while `queryFn` is `skipToken` — use `enabled: false` instead if you\n * need to trigger the query manually:\n * ```tsx\n * import { skipToken, useQuery } from '@tanstack/preact-query'\n *\n * function Post({ postId }: { postId: number | undefined }) {\n *   const { data, isLoading, isError, error } = useQuery({\n *     queryKey: ['post', postId],\n *     queryFn: postId != null ? () => fetchPost(postId) : skipToken,\n *   })\n *\n *   if (postId == null) return 'Select a post'\n *   if (isLoading) return 'Loading...'\n *   if (isError) return <span>Error: {error.message}</span>\n *\n *   return <h1>{data?.title}</h1>\n * }\n * ```\n *\n * @example\n * Seeding a detail query from an already-cached list, to skip the loading state:\n * ```tsx\n * import { useQuery, useQueryClient } from '@tanstack/preact-query'\n *\n * function Post({ postId }: { postId: number }) {\n *   const queryClient = useQueryClient()\n *\n *   const { data, isError, error } = useQuery({\n *     queryKey: ['post', postId],\n *     queryFn: () => fetchPost(postId),\n *     initialData: () =>\n *       queryClient\n *         .getQueryData<Array<Post>>(['posts'])\n *         ?.find((post) => post.id === postId),\n *   })\n *\n *   if (isError) return <span>Error: {error.message}</span>\n *\n *   return <h1>{data?.title}</h1>\n * }\n * ```\n *\n * @example\n * Paginated data, keeping the previous page's data visible while the next page loads:\n * ```tsx\n * import { keepPreviousData, useQuery } from '@tanstack/preact-query'\n * import { useState } from 'preact/hooks'\n *\n * function Posts() {\n *   const [page, setPage] = useState(0)\n *\n *   const { data, isPlaceholderData, isError, error } = useQuery({\n *     queryKey: ['posts', page],\n *     queryFn: () => fetchPosts(page),\n *     placeholderData: keepPreviousData,\n *   })\n *\n *   if (isError) return <span>Error: {error.message}</span>\n *\n *   return (\n *     <div>\n *       <ul>\n *         {data?.map((post) => <li key={post.id}>{post.title}</li>)}\n *       </ul>\n *       <button\n *         disabled={isPlaceholderData}\n *         onClick={() => setPage((old) => old + 1)}\n *       >\n *         Next Page\n *       </button>\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useQuery<\n  TQueryFnData = unknown,\n  TError = DefaultError,\n  TData = TQueryFnData,\n  TQueryKey extends QueryKey = QueryKey,\n>(\n  options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,\n  queryClient?: QueryClient,\n): UseQueryResult<TData, TError>\n\nexport function useQuery(options: UseQueryOptions, queryClient?: QueryClient) {\n  return useBaseQuery(options, QueryObserver, queryClient)\n}\n"],"mappings":";;;AAkSA,SAAgB,SAAS,SAA0B,aAA2B;CAC5E,OAAO,aAAa,SAAS,eAAe,WAAW;AACzD"}

package/build/legacy/useSuspenseInfiniteQuery.cjs

@@ -9,6 +9,13 @@ let _tanstack_query_core = require("@tanstack/query-core");
 *
 * Caveat: cancellation does not work.
 *
+* @remarks Multiple suspenseful query calls in the same component suspend serially, causing a request
+* waterfall — each one blocks rendering until it resolves, so the next doesn't even start fetching until
+* then. There's no way to parallelize multiple infinite queries under Suspense. Also keep in mind that
+* imperative fetch calls, such as `fetchNextPage`, may interfere with the default refetch behavior,
+* resulting in outdated data. Make sure to call these functions only in response to user actions, or add
+* conditions like `hasNextPage && !isFetching`.
+* @see {@link useInfiniteQuery} for the non-Suspense version of this hook.
 * @param options - The {@link UseSuspenseInfiniteQueryOptions} to use — the same options as `useInfiniteQuery`, minus the ones listed above.
 * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
 * be used.
@@ -17,9 +24,17 @@ let _tanstack_query_core = require("@tanstack/query-core");
 * accordingly).
 *
 * @example
+* The query error is thrown if a fetch fails and no cached data exists yet, so an error boundary is
+* required around `<Suspense>`. A failed background refetch instead continues to render the cached data.
+* Use {@link QueryErrorResetBoundary} to let the user retry after such an error:
 * ```tsx
 * import { Suspense } from 'preact/compat'
-* import { useSuspenseInfiniteQuery } from '@tanstack/preact-query'
+* import { useErrorBoundary } from 'preact/hooks'
+* import {
+*   QueryErrorResetBoundary,
+*   useSuspenseInfiniteQuery,
+* } from '@tanstack/preact-query'
+* import type { ComponentChildren } from 'preact'
 *
 * function Projects() {
 *   // `data` is guaranteed to be defined here — no `isPending` check needed.
@@ -33,9 +48,11 @@ let _tanstack_query_core = require("@tanstack/query-core");
 *
 *   return (
 *     <div>
-*       {data.pages.map((page) =>
-*         page.projects.map((project) => <p key={project.id}>{project.name}</p>),
-*       )}
+*       <ul>
+*         {data.pages.map((page) =>
+*           page.projects.map((project) => <li key={project.id}>{project.name}</li>),
+*         )}
+*       </ul>
 *       <button
 *         onClick={() => fetchNextPage()}
 *         disabled={!hasNextPage || isFetching}
@@ -52,11 +69,44 @@ let _tanstack_query_core = require("@tanstack/query-core");
 *
 * function App() {
 *   return (
-*     <Suspense fallback={<h1>Loading projects...</h1>}>
-*       <Projects />
-*     </Suspense>
+*     <QueryErrorResetBoundary>
+*       {({ reset }) => (
+*         <ErrorBoundary
+*           onReset={reset}
+*           fallbackRender={({ resetErrorBoundary }) => (
+*             <div>
+*               There was an error!
+*               <button onClick={() => resetErrorBoundary()}>Try again</button>
+*             </div>
+*           )}
+*         >
+*           <Suspense fallback={<h1>Loading projects...</h1>}>
+*             <Projects />
+*           </Suspense>
+*         </ErrorBoundary>
+*       )}
+*     </QueryErrorResetBoundary>
 *   )
 * }
+*
+* function ErrorBoundary({
+*   children,
+*   onReset,
+*   fallbackRender,
+* }: {
+*   children: ComponentChildren
+*   onReset: () => void
+*   fallbackRender: (props: {
+*     error: Error
+*     resetErrorBoundary: () => void
+*   }) => ComponentChildren
+* }) {
+*   const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())
+*
+*   if (error) return fallbackRender({ error, resetErrorBoundary })
+*
+*   return children
+* }
 * ```
 */
 function useSuspenseInfiniteQuery(options, queryClient) {

package/build/legacy/useSuspenseInfiniteQuery.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSuspenseInfiniteQuery.cjs","names":["skipToken","useBaseQuery","defaultThrowOnError","InfiniteQueryObserver"],"sources":["../../src/useSuspenseInfiniteQuery.ts"],"sourcesContent":["import { InfiniteQueryObserver, skipToken } from '@tanstack/query-core'\nimport type {\n  DefaultError,\n  InfiniteData,\n  InfiniteQueryObserverSuccessResult,\n  QueryClient,\n  QueryKey,\n  QueryObserver,\n} from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type {\n  UseSuspenseInfiniteQueryOptions,\n  UseSuspenseInfiniteQueryResult,\n} from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * The options for `useSuspenseInfiniteQuery` are the same as for `useInfiniteQuery`, except for `throwOnError`,\n * `enabled`, and `placeholderData`.\n *\n * Caveat: cancellation does not work.\n *\n * @param options - The {@link UseSuspenseInfiniteQueryOptions} to use — the same options as `useInfiniteQuery`, minus the ones listed above.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The same object as `useInfiniteQuery`, except that `data` is guaranteed to be defined,\n * `isPlaceholderData` is missing, and `status` is either `success` or `error` (with the derived flags set\n * accordingly).\n *\n * @example\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n *   // `data` is guaranteed to be defined here — no `isPending` check needed.\n *   const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =\n *     useSuspenseInfiniteQuery({\n *       queryKey: ['projects'],\n *       queryFn: ({ pageParam }) => fetchProjects(pageParam),\n *       initialPageParam: 0,\n *       getNextPageParam: (lastPage) => lastPage.nextId,\n *     })\n *\n *   return (\n *     <div>\n *       {data.pages.map((page) =>\n *         page.projects.map((project) => <p key={project.id}>{project.name}</p>),\n *       )}\n *       <button\n *         onClick={() => fetchNextPage()}\n *         disabled={!hasNextPage || isFetching}\n *       >\n *         {isFetchingNextPage\n *           ? 'Loading more...'\n *           : hasNextPage\n *             ? 'Load More'\n *             : 'Nothing more to load'}\n *       </button>\n *     </div>\n *   )\n * }\n *\n * function App() {\n *   return (\n *     <Suspense fallback={<h1>Loading projects...</h1>}>\n *       <Projects />\n *     </Suspense>\n *   )\n * }\n * ```\n */\nexport function useSuspenseInfiniteQuery<\n  TQueryFnData,\n  TError = DefaultError,\n  TData = InfiniteData<TQueryFnData>,\n  TQueryKey extends QueryKey = QueryKey,\n  TPageParam = unknown,\n>(\n  options: UseSuspenseInfiniteQueryOptions<\n    TQueryFnData,\n    TError,\n    TData,\n    TQueryKey,\n    TPageParam\n  >,\n  queryClient?: QueryClient,\n): UseSuspenseInfiniteQueryResult<TData, TError> {\n  if (process.env.NODE_ENV !== 'production') {\n    if ((options.queryFn as any) === skipToken) {\n      console.error('skipToken is not allowed for useSuspenseInfiniteQuery')\n    }\n  }\n\n  return useBaseQuery(\n    {\n      ...options,\n      enabled: true,\n      suspense: true,\n      throwOnError: defaultThrowOnError,\n      placeholderData: undefined,\n    },\n    InfiniteQueryObserver as typeof QueryObserver,\n    queryClient,\n  ) as InfiniteQueryObserverSuccessResult<TData, TError>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA,SAAgB,yBAOd,SAOA,aAC+C;CAC/C,IAAI,QAAQ,IAAI,aAAa,cACtB;MAAA,QAAQ,YAAoBA,qBAAAA,WAC/B,QAAQ,MAAM,uDAAuD;CAAA;CAIzE,OAAOC,qBAAAA,aACL;EACE,GAAG;EACH,SAAS;EACT,UAAU;EACV,cAAcC,iBAAAA;EACd,iBAAiB,KAAA;CACnB,GACAC,qBAAAA,uBACA,WACF;AACF"}
+{"version":3,"file":"useSuspenseInfiniteQuery.cjs","names":["skipToken","useBaseQuery","defaultThrowOnError","InfiniteQueryObserver"],"sources":["../../src/useSuspenseInfiniteQuery.ts"],"sourcesContent":["import { InfiniteQueryObserver, skipToken } from '@tanstack/query-core'\nimport type {\n  DefaultError,\n  InfiniteData,\n  InfiniteQueryObserverSuccessResult,\n  QueryClient,\n  QueryKey,\n  QueryObserver,\n} from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type {\n  UseSuspenseInfiniteQueryOptions,\n  UseSuspenseInfiniteQueryResult,\n} from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * The options for `useSuspenseInfiniteQuery` are the same as for `useInfiniteQuery`, except for `throwOnError`,\n * `enabled`, and `placeholderData`.\n *\n * Caveat: cancellation does not work.\n *\n * @remarks Multiple suspenseful query calls in the same component suspend serially, causing a request\n * waterfall — each one blocks rendering until it resolves, so the next doesn't even start fetching until\n * then. There's no way to parallelize multiple infinite queries under Suspense. Also keep in mind that\n * imperative fetch calls, such as `fetchNextPage`, may interfere with the default refetch behavior,\n * resulting in outdated data. Make sure to call these functions only in response to user actions, or add\n * conditions like `hasNextPage && !isFetching`.\n * @see {@link useInfiniteQuery} for the non-Suspense version of this hook.\n * @param options - The {@link UseSuspenseInfiniteQueryOptions} to use — the same options as `useInfiniteQuery`, minus the ones listed above.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The same object as `useInfiniteQuery`, except that `data` is guaranteed to be defined,\n * `isPlaceholderData` is missing, and `status` is either `success` or `error` (with the derived flags set\n * accordingly).\n *\n * @example\n * The query error is thrown if a fetch fails and no cached data exists yet, so an error boundary is\n * required around `<Suspense>`. A failed background refetch instead continues to render the cached data.\n * Use {@link QueryErrorResetBoundary} to let the user retry after such an error:\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useErrorBoundary } from 'preact/hooks'\n * import {\n *   QueryErrorResetBoundary,\n *   useSuspenseInfiniteQuery,\n * } from '@tanstack/preact-query'\n * import type { ComponentChildren } from 'preact'\n *\n * function Projects() {\n *   // `data` is guaranteed to be defined here — no `isPending` check needed.\n *   const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =\n *     useSuspenseInfiniteQuery({\n *       queryKey: ['projects'],\n *       queryFn: ({ pageParam }) => fetchProjects(pageParam),\n *       initialPageParam: 0,\n *       getNextPageParam: (lastPage) => lastPage.nextId,\n *     })\n *\n *   return (\n *     <div>\n *       <ul>\n *         {data.pages.map((page) =>\n *           page.projects.map((project) => <li key={project.id}>{project.name}</li>),\n *         )}\n *       </ul>\n *       <button\n *         onClick={() => fetchNextPage()}\n *         disabled={!hasNextPage || isFetching}\n *       >\n *         {isFetchingNextPage\n *           ? 'Loading more...'\n *           : hasNextPage\n *             ? 'Load More'\n *             : 'Nothing more to load'}\n *       </button>\n *     </div>\n *   )\n * }\n *\n * function App() {\n *   return (\n *     <QueryErrorResetBoundary>\n *       {({ reset }) => (\n *         <ErrorBoundary\n *           onReset={reset}\n *           fallbackRender={({ resetErrorBoundary }) => (\n *             <div>\n *               There was an error!\n *               <button onClick={() => resetErrorBoundary()}>Try again</button>\n *             </div>\n *           )}\n *         >\n *           <Suspense fallback={<h1>Loading projects...</h1>}>\n *             <Projects />\n *           </Suspense>\n *         </ErrorBoundary>\n *       )}\n *     </QueryErrorResetBoundary>\n *   )\n * }\n *\n * function ErrorBoundary({\n *   children,\n *   onReset,\n *   fallbackRender,\n * }: {\n *   children: ComponentChildren\n *   onReset: () => void\n *   fallbackRender: (props: {\n *     error: Error\n *     resetErrorBoundary: () => void\n *   }) => ComponentChildren\n * }) {\n *   const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())\n *\n *   if (error) return fallbackRender({ error, resetErrorBoundary })\n *\n *   return children\n * }\n * ```\n */\nexport function useSuspenseInfiniteQuery<\n  TQueryFnData,\n  TError = DefaultError,\n  TData = InfiniteData<TQueryFnData>,\n  TQueryKey extends QueryKey = QueryKey,\n  TPageParam = unknown,\n>(\n  options: UseSuspenseInfiniteQueryOptions<\n    TQueryFnData,\n    TError,\n    TData,\n    TQueryKey,\n    TPageParam\n  >,\n  queryClient?: QueryClient,\n): UseSuspenseInfiniteQueryResult<TData, TError> {\n  if (process.env.NODE_ENV !== 'production') {\n    if ((options.queryFn as any) === skipToken) {\n      console.error('skipToken is not allowed for useSuspenseInfiniteQuery')\n    }\n  }\n\n  return useBaseQuery(\n    {\n      ...options,\n      enabled: true,\n      suspense: true,\n      throwOnError: defaultThrowOnError,\n      placeholderData: undefined,\n    },\n    InfiniteQueryObserver as typeof QueryObserver,\n    queryClient,\n  ) as InfiniteQueryObserverSuccessResult<TData, TError>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2HA,SAAgB,yBAOd,SAOA,aAC+C;CAC/C,IAAI,QAAQ,IAAI,aAAa,cACtB;MAAA,QAAQ,YAAoBA,qBAAAA,WAC/B,QAAQ,MAAM,uDAAuD;CAAA;CAIzE,OAAOC,qBAAAA,aACL;EACE,GAAG;EACH,SAAS;EACT,UAAU;EACV,cAAcC,iBAAAA;EACd,iBAAiB,KAAA;CACnB,GACAC,qBAAAA,uBACA,WACF;AACF"}

package/build/legacy/useSuspenseInfiniteQuery.d.cts

@@ -7,6 +7,13 @@ import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/que
  *
  * Caveat: cancellation does not work.
  *
+ * @remarks Multiple suspenseful query calls in the same component suspend serially, causing a request
+ * waterfall — each one blocks rendering until it resolves, so the next doesn't even start fetching until
+ * then. There's no way to parallelize multiple infinite queries under Suspense. Also keep in mind that
+ * imperative fetch calls, such as `fetchNextPage`, may interfere with the default refetch behavior,
+ * resulting in outdated data. Make sure to call these functions only in response to user actions, or add
+ * conditions like `hasNextPage && !isFetching`.
+ * @see {@link useInfiniteQuery} for the non-Suspense version of this hook.
  * @param options - The {@link UseSuspenseInfiniteQueryOptions} to use — the same options as `useInfiniteQuery`, minus the ones listed above.
  * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
  * be used.
@@ -15,9 +22,17 @@ import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/que
  * accordingly).
  *
  * @example
+ * The query error is thrown if a fetch fails and no cached data exists yet, so an error boundary is
+ * required around `<Suspense>`. A failed background refetch instead continues to render the cached data.
+ * Use {@link QueryErrorResetBoundary} to let the user retry after such an error:
  * ```tsx
  * import { Suspense } from 'preact/compat'
- * import { useSuspenseInfiniteQuery } from '@tanstack/preact-query'
+ * import { useErrorBoundary } from 'preact/hooks'
+ * import {
+ *   QueryErrorResetBoundary,
+ *   useSuspenseInfiniteQuery,
+ * } from '@tanstack/preact-query'
+ * import type { ComponentChildren } from 'preact'
  *
  * function Projects() {
  *   // `data` is guaranteed to be defined here — no `isPending` check needed.
@@ -31,9 +46,11 @@ import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/que
  *
  *   return (
  *     <div>
- *       {data.pages.map((page) =>
- *         page.projects.map((project) => <p key={project.id}>{project.name}</p>),
- *       )}
+ *       <ul>
+ *         {data.pages.map((page) =>
+ *           page.projects.map((project) => <li key={project.id}>{project.name}</li>),
+ *         )}
+ *       </ul>
  *       <button
  *         onClick={() => fetchNextPage()}
  *         disabled={!hasNextPage || isFetching}
@@ -50,11 +67,44 @@ import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/que
  *
  * function App() {
  *   return (
- *     <Suspense fallback={<h1>Loading projects...</h1>}>
- *       <Projects />
- *     </Suspense>
+ *     <QueryErrorResetBoundary>
+ *       {({ reset }) => (
+ *         <ErrorBoundary
+ *           onReset={reset}
+ *           fallbackRender={({ resetErrorBoundary }) => (
+ *             <div>
+ *               There was an error!
+ *               <button onClick={() => resetErrorBoundary()}>Try again</button>
+ *             </div>
+ *           )}
+ *         >
+ *           <Suspense fallback={<h1>Loading projects...</h1>}>
+ *             <Projects />
+ *           </Suspense>
+ *         </ErrorBoundary>
+ *       )}
+ *     </QueryErrorResetBoundary>
  *   )
  * }
+ *
+ * function ErrorBoundary({
+ *   children,
+ *   onReset,
+ *   fallbackRender,
+ * }: {
+ *   children: ComponentChildren
+ *   onReset: () => void
+ *   fallbackRender: (props: {
+ *     error: Error
+ *     resetErrorBoundary: () => void
+ *   }) => ComponentChildren
+ * }) {
+ *   const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())
+ *
+ *   if (error) return fallbackRender({ error, resetErrorBoundary })
+ *
+ *   return children
+ * }
  * ```
  */
 declare function useSuspenseInfiniteQuery<TQueryFnData, TError = DefaultError, TData = InfiniteData<TQueryFnData>, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(options: UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: QueryClient): UseSuspenseInfiniteQueryResult<TData, TError>;

package/build/legacy/useSuspenseInfiniteQuery.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"useSuspenseInfiniteQuery.d.cts","names":[],"sources":["../../src/useSuspenseInfiniteQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyEgB,yBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,gCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,+BAA+B,OAAO"}
+{"version":3,"file":"useSuspenseInfiniteQuery.d.cts","names":[],"sources":["../../src/useSuspenseInfiniteQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA2HgB,yBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,gCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,+BAA+B,OAAO"}

package/build/legacy/useSuspenseInfiniteQuery.d.ts

@@ -7,6 +7,13 @@ import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/que
  *
  * Caveat: cancellation does not work.
  *
+ * @remarks Multiple suspenseful query calls in the same component suspend serially, causing a request
+ * waterfall — each one blocks rendering until it resolves, so the next doesn't even start fetching until
+ * then. There's no way to parallelize multiple infinite queries under Suspense. Also keep in mind that
+ * imperative fetch calls, such as `fetchNextPage`, may interfere with the default refetch behavior,
+ * resulting in outdated data. Make sure to call these functions only in response to user actions, or add
+ * conditions like `hasNextPage && !isFetching`.
+ * @see {@link useInfiniteQuery} for the non-Suspense version of this hook.
  * @param options - The {@link UseSuspenseInfiniteQueryOptions} to use — the same options as `useInfiniteQuery`, minus the ones listed above.
  * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
  * be used.
@@ -15,9 +22,17 @@ import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/que
  * accordingly).
  *
  * @example
+ * The query error is thrown if a fetch fails and no cached data exists yet, so an error boundary is
+ * required around `<Suspense>`. A failed background refetch instead continues to render the cached data.
+ * Use {@link QueryErrorResetBoundary} to let the user retry after such an error:
  * ```tsx
  * import { Suspense } from 'preact/compat'
- * import { useSuspenseInfiniteQuery } from '@tanstack/preact-query'
+ * import { useErrorBoundary } from 'preact/hooks'
+ * import {
+ *   QueryErrorResetBoundary,
+ *   useSuspenseInfiniteQuery,
+ * } from '@tanstack/preact-query'
+ * import type { ComponentChildren } from 'preact'
  *
  * function Projects() {
  *   // `data` is guaranteed to be defined here — no `isPending` check needed.
@@ -31,9 +46,11 @@ import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/que
  *
  *   return (
  *     <div>
- *       {data.pages.map((page) =>
- *         page.projects.map((project) => <p key={project.id}>{project.name}</p>),
- *       )}
+ *       <ul>
+ *         {data.pages.map((page) =>
+ *           page.projects.map((project) => <li key={project.id}>{project.name}</li>),
+ *         )}
+ *       </ul>
  *       <button
  *         onClick={() => fetchNextPage()}
  *         disabled={!hasNextPage || isFetching}
@@ -50,11 +67,44 @@ import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/que
  *
  * function App() {
  *   return (
- *     <Suspense fallback={<h1>Loading projects...</h1>}>
- *       <Projects />
- *     </Suspense>
+ *     <QueryErrorResetBoundary>
+ *       {({ reset }) => (
+ *         <ErrorBoundary
+ *           onReset={reset}
+ *           fallbackRender={({ resetErrorBoundary }) => (
+ *             <div>
+ *               There was an error!
+ *               <button onClick={() => resetErrorBoundary()}>Try again</button>
+ *             </div>
+ *           )}
+ *         >
+ *           <Suspense fallback={<h1>Loading projects...</h1>}>
+ *             <Projects />
+ *           </Suspense>
+ *         </ErrorBoundary>
+ *       )}
+ *     </QueryErrorResetBoundary>
  *   )
  * }
+ *
+ * function ErrorBoundary({
+ *   children,
+ *   onReset,
+ *   fallbackRender,
+ * }: {
+ *   children: ComponentChildren
+ *   onReset: () => void
+ *   fallbackRender: (props: {
+ *     error: Error
+ *     resetErrorBoundary: () => void
+ *   }) => ComponentChildren
+ * }) {
+ *   const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())
+ *
+ *   if (error) return fallbackRender({ error, resetErrorBoundary })
+ *
+ *   return children
+ * }
  * ```
  */
 declare function useSuspenseInfiniteQuery<TQueryFnData, TError = DefaultError, TData = InfiniteData<TQueryFnData>, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(options: UseSuspenseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: QueryClient): UseSuspenseInfiniteQueryResult<TData, TError>;

package/build/legacy/useSuspenseInfiniteQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSuspenseInfiniteQuery.d.ts","names":[],"sources":["../../src/useSuspenseInfiniteQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyEgB,yBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,gCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,+BAA+B,OAAO"}
+{"version":3,"file":"useSuspenseInfiniteQuery.d.ts","names":[],"sources":["../../src/useSuspenseInfiniteQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA2HgB,yBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,gCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,+BAA+B,OAAO"}