@tanstack/preact-query 5.102.4 → 5.102.6

package/build/modern/useMutation.d.ts

@@ -27,7 +27,45 @@ import { DefaultError, QueryClient } from "@tanstack/query-core";
  *   })
  *
  *   return (
- *     <button onClick={() => addMutation.mutate('Item')}>Add</button>
+ *     <button
+ *       onClick={() =>
+ *         addMutation.mutate('Item', {
+ *           onError: (error) => console.error('Failed to add item:', error),
+ *         })
+ *       }
+ *     >
+ *       Add
+ *     </button>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * Rendering the mutation's own state, rather than just firing it off:
+ * ```tsx
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
+ *
+ * function AddTodo() {
+ *   const queryClient = useQueryClient()
+ *
+ *   const addMutation = useMutation({
+ *     mutationFn: addTodo,
+ *     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       {addMutation.isPending ? (
+ *         'Adding todo...'
+ *       ) : (
+ *         <>
+ *           {addMutation.isError ? (
+ *             <div>An error occurred: {addMutation.error.message}</div>
+ *           ) : null}
+ *           <button onClick={() => addMutation.mutate('Item')}>Add</button>
+ *         </>
+ *       )}
+ *     </div>
  *   )
  * }
  * ```
@@ -67,6 +105,71 @@ import { DefaultError, QueryClient } from "@tanstack/query-core";
  *   )
  * }
  * ```
+ *
+ * @example
+ * Callbacks passed per call to `mutate` only fire for the last call — `mutateAsync` gives you a
+ * promise per call instead, so you can wait for all of them:
+ * ```tsx
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
+ *
+ * function AddTodos() {
+ *   const queryClient = useQueryClient()
+ *
+ *   const addMutation = useMutation({
+ *     mutationFn: addTodo,
+ *     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+ *   })
+ *
+ *   async function handleAddAll(todos: Array<string>) {
+ *     try {
+ *       await Promise.all(todos.map((todo) => addMutation.mutateAsync(todo)))
+ *     } catch (error) {
+ *       console.error('Failed to add todos:', error)
+ *     }
+ *   }
+ *
+ *   return (
+ *     <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>
+ *       Add all
+ *     </button>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * If some of the mutations above can fail independently of the others, and you want to know which ones
+ * did — rather than losing that information the moment the first one rejects — swap `Promise.all` for
+ * `Promise.allSettled`:
+ * ```tsx
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
+ *
+ * function AddTodos() {
+ *   const queryClient = useQueryClient()
+ *
+ *   const addMutation = useMutation({
+ *     mutationFn: addTodo,
+ *     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+ *   })
+ *
+ *   async function handleAddAll(todos: Array<string>) {
+ *     const results = await Promise.allSettled(
+ *       todos.map((todo) => addMutation.mutateAsync(todo)),
+ *     )
+ *
+ *     results.forEach((result, index) => {
+ *       if (result.status === 'rejected') {
+ *         console.error(`Failed to add "${todos[index]}":`, result.reason)
+ *       }
+ *     })
+ *   }
+ *
+ *   return (
+ *     <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>
+ *       Add all
+ *     </button>
+ *   )
+ * }
+ * ```
  */
 declare function useMutation<TData = unknown, TError = DefaultError, TVariables = void, TOnMutateResult = unknown>(options: UseMutationOptions<TData, TError, TVariables, TOnMutateResult>, queryClient?: QueryClient): UseMutationResult<TData, TError, TVariables, TOnMutateResult>;
 //#endregion

package/build/modern/useMutation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMutation.d.ts","names":[],"sources":["../../src/useMutation.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAsFgB,YACd,iBACA,SAAS,cACT,mBACA,2BAEA,SAAS,mBAAmB,OAAO,QAAQ,YAAY,kBACvD,cAAc,cACb,kBAAkB,OAAO,QAAQ,YAAY"}
+{"version":3,"file":"useMutation.d.ts","names":[],"sources":["../../src/useMutation.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6LgB,YACd,iBACA,SAAS,cACT,mBACA,2BAEA,SAAS,mBAAmB,OAAO,QAAQ,YAAY,kBACvD,cAAc,cACb,kBAAkB,OAAO,QAAQ,YAAY"}

package/build/modern/useMutation.js

@@ -29,7 +29,45 @@ import { useCallback, useEffect, useState } from "preact/hooks";
 *   })
 *
 *   return (
-*     <button onClick={() => addMutation.mutate('Item')}>Add</button>
+*     <button
+*       onClick={() =>
+*         addMutation.mutate('Item', {
+*           onError: (error) => console.error('Failed to add item:', error),
+*         })
+*       }
+*     >
+*       Add
+*     </button>
+*   )
+* }
+* ```
+*
+* @example
+* Rendering the mutation's own state, rather than just firing it off:
+* ```tsx
+* import { useMutation, useQueryClient } from '@tanstack/preact-query'
+*
+* function AddTodo() {
+*   const queryClient = useQueryClient()
+*
+*   const addMutation = useMutation({
+*     mutationFn: addTodo,
+*     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+*   })
+*
+*   return (
+*     <div>
+*       {addMutation.isPending ? (
+*         'Adding todo...'
+*       ) : (
+*         <>
+*           {addMutation.isError ? (
+*             <div>An error occurred: {addMutation.error.message}</div>
+*           ) : null}
+*           <button onClick={() => addMutation.mutate('Item')}>Add</button>
+*         </>
+*       )}
+*     </div>
 *   )
 * }
 * ```
@@ -69,6 +107,71 @@ import { useCallback, useEffect, useState } from "preact/hooks";
 *   )
 * }
 * ```
+*
+* @example
+* Callbacks passed per call to `mutate` only fire for the last call — `mutateAsync` gives you a
+* promise per call instead, so you can wait for all of them:
+* ```tsx
+* import { useMutation, useQueryClient } from '@tanstack/preact-query'
+*
+* function AddTodos() {
+*   const queryClient = useQueryClient()
+*
+*   const addMutation = useMutation({
+*     mutationFn: addTodo,
+*     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+*   })
+*
+*   async function handleAddAll(todos: Array<string>) {
+*     try {
+*       await Promise.all(todos.map((todo) => addMutation.mutateAsync(todo)))
+*     } catch (error) {
+*       console.error('Failed to add todos:', error)
+*     }
+*   }
+*
+*   return (
+*     <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>
+*       Add all
+*     </button>
+*   )
+* }
+* ```
+*
+* @example
+* If some of the mutations above can fail independently of the others, and you want to know which ones
+* did — rather than losing that information the moment the first one rejects — swap `Promise.all` for
+* `Promise.allSettled`:
+* ```tsx
+* import { useMutation, useQueryClient } from '@tanstack/preact-query'
+*
+* function AddTodos() {
+*   const queryClient = useQueryClient()
+*
+*   const addMutation = useMutation({
+*     mutationFn: addTodo,
+*     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+*   })
+*
+*   async function handleAddAll(todos: Array<string>) {
+*     const results = await Promise.allSettled(
+*       todos.map((todo) => addMutation.mutateAsync(todo)),
+*     )
+*
+*     results.forEach((result, index) => {
+*       if (result.status === 'rejected') {
+*         console.error(`Failed to add "${todos[index]}":`, result.reason)
+*       }
+*     })
+*   }
+*
+*   return (
+*     <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>
+*       Add all
+*     </button>
+*   )
+* }
+* ```
 */
 function useMutation(options, queryClient) {
 	const client = useQueryClient(queryClient);

package/build/modern/useMutation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMutation.js","names":[],"sources":["../../src/useMutation.ts"],"sourcesContent":["import {\n  MutationObserver,\n  noop,\n  notifyManager,\n  shouldThrowError,\n} from '@tanstack/query-core'\nimport type { DefaultError, QueryClient } from '@tanstack/query-core'\nimport { useCallback, useEffect, useState } from 'preact/hooks'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport type {\n  UseMutateFunction,\n  UseMutationOptions,\n  UseMutationResult,\n} from './types'\nimport { useSyncExternalStore } from './utils'\n\n// HOOK\n\n/**\n * Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects.\n * `useMutation` is the hook for that.\n *\n * @see {@link mutationOptions} to share these options across multiple `useMutation` call sites.\n * @param options - The {@link UseMutationOptions} to use — everything you can pass to `useMutation`.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns `mutate`/`mutateAsync` also accept per-call `onSuccess`/`onError`/`onSettled` callbacks as a second\n * argument, useful for triggering call-site side effects (e.g. navigation) without coupling them to the shared\n * mutation definition. If you make multiple requests, `onSuccess` will fire only after the latest call you've\n * made.\n *\n * @example\n * ```tsx\n * import { useMutation, useQueryClient } from '@tanstack/preact-query'\n *\n * function AddTodo() {\n *   const queryClient = useQueryClient()\n *\n *   const addMutation = useMutation({\n *     mutationFn: addTodo,\n *     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),\n *   })\n *\n *   return (\n *     <button onClick={() => addMutation.mutate('Item')}>Add</button>\n *   )\n * }\n * ```\n *\n * @example\n * Optimistic update via `onMutate`, rolling back on `onError`:\n * ```tsx\n * import { useMutation, useQueryClient } from '@tanstack/preact-query'\n *\n * function AddTodo() {\n *   const queryClient = useQueryClient()\n *\n *   const addMutation = useMutation({\n *     mutationFn: addTodo,\n *     onMutate: async (newTodo) => {\n *       await queryClient.cancelQueries({ queryKey: ['todos'] })\n *       const previousTodos = queryClient.getQueryData<Array<string>>(['todos'])\n *\n *       queryClient.setQueryData<Array<string>>(['todos'], (old) => [\n *         ...(old ?? []),\n *         newTodo,\n *       ])\n *\n *       // Passed to `onError` as `context` if the mutation fails.\n *       return { previousTodos }\n *     },\n *     onError: (_err, _newTodo, context) => {\n *       queryClient.setQueryData(['todos'], context?.previousTodos)\n *     },\n *     onSettled: () => {\n *       queryClient.invalidateQueries({ queryKey: ['todos'] })\n *     },\n *   })\n *\n *   return (\n *     <button onClick={() => addMutation.mutate('Item')}>Add</button>\n *   )\n * }\n * ```\n */\nexport function useMutation<\n  TData = unknown,\n  TError = DefaultError,\n  TVariables = void,\n  TOnMutateResult = unknown,\n>(\n  options: UseMutationOptions<TData, TError, TVariables, TOnMutateResult>,\n  queryClient?: QueryClient,\n): UseMutationResult<TData, TError, TVariables, TOnMutateResult> {\n  const client = useQueryClient(queryClient)\n\n  const [observer] = useState(\n    () =>\n      new MutationObserver<TData, TError, TVariables, TOnMutateResult>(\n        client,\n        options,\n      ),\n  )\n\n  useEffect(() => {\n    observer.setOptions(options)\n  }, [observer, options])\n\n  const result = useSyncExternalStore(\n    useCallback(\n      (onStoreChange) =>\n        observer.subscribe(notifyManager.batchCalls(onStoreChange)),\n      [observer],\n    ),\n    () => observer.getCurrentResult(),\n  )\n\n  const mutate = useCallback<\n    UseMutateFunction<TData, TError, TVariables, TOnMutateResult>\n  >(\n    (\n      ...args: Parameters<\n        UseMutateFunction<TData, TError, TVariables, TOnMutateResult>\n      >\n    ) => {\n      observer.mutate(args[0] as TVariables, args[1]).catch(noop)\n    },\n    [observer],\n  )\n\n  if (\n    result.error &&\n    shouldThrowError(observer.options.throwOnError, [result.error])\n  ) {\n    throw result.error\n  }\n\n  return { ...result, mutate, mutateAsync: result.mutate }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA,SAAgB,YAMd,SACA,aAC+D;CAC/D,MAAM,SAAS,eAAe,WAAW;CAEzC,MAAM,CAAC,YAAY,eAEf,IAAI,iBACF,QACA,OACF,CACJ;CAEA,gBAAgB;EACd,SAAS,WAAW,OAAO;CAC7B,GAAG,CAAC,UAAU,OAAO,CAAC;CAEtB,MAAM,SAAS,qBACb,aACG,kBACC,SAAS,UAAU,cAAc,WAAW,aAAa,CAAC,GAC5D,CAAC,QAAQ,CACX,SACM,SAAS,iBAAiB,CAClC;CAEA,MAAM,SAAS,aAIX,GAAG,SAGA;EACH,SAAS,OAAO,KAAK,IAAkB,KAAK,EAAE,CAAC,CAAC,MAAM,IAAI;CAC5D,GACA,CAAC,QAAQ,CACX;CAEA,IACE,OAAO,SACP,iBAAiB,SAAS,QAAQ,cAAc,CAAC,OAAO,KAAK,CAAC,GAE9D,MAAM,OAAO;CAGf,OAAO;EAAE,GAAG;EAAQ;EAAQ,aAAa,OAAO;CAAO;AACzD"}
+{"version":3,"file":"useMutation.js","names":[],"sources":["../../src/useMutation.ts"],"sourcesContent":["import {\n  MutationObserver,\n  noop,\n  notifyManager,\n  shouldThrowError,\n} from '@tanstack/query-core'\nimport type { DefaultError, QueryClient } from '@tanstack/query-core'\nimport { useCallback, useEffect, useState } from 'preact/hooks'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport type {\n  UseMutateFunction,\n  UseMutationOptions,\n  UseMutationResult,\n} from './types'\nimport { useSyncExternalStore } from './utils'\n\n// HOOK\n\n/**\n * Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects.\n * `useMutation` is the hook for that.\n *\n * @see {@link mutationOptions} to share these options across multiple `useMutation` call sites.\n * @param options - The {@link UseMutationOptions} to use — everything you can pass to `useMutation`.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns `mutate`/`mutateAsync` also accept per-call `onSuccess`/`onError`/`onSettled` callbacks as a second\n * argument, useful for triggering call-site side effects (e.g. navigation) without coupling them to the shared\n * mutation definition. If you make multiple requests, `onSuccess` will fire only after the latest call you've\n * made.\n *\n * @example\n * ```tsx\n * import { useMutation, useQueryClient } from '@tanstack/preact-query'\n *\n * function AddTodo() {\n *   const queryClient = useQueryClient()\n *\n *   const addMutation = useMutation({\n *     mutationFn: addTodo,\n *     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),\n *   })\n *\n *   return (\n *     <button\n *       onClick={() =>\n *         addMutation.mutate('Item', {\n *           onError: (error) => console.error('Failed to add item:', error),\n *         })\n *       }\n *     >\n *       Add\n *     </button>\n *   )\n * }\n * ```\n *\n * @example\n * Rendering the mutation's own state, rather than just firing it off:\n * ```tsx\n * import { useMutation, useQueryClient } from '@tanstack/preact-query'\n *\n * function AddTodo() {\n *   const queryClient = useQueryClient()\n *\n *   const addMutation = useMutation({\n *     mutationFn: addTodo,\n *     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),\n *   })\n *\n *   return (\n *     <div>\n *       {addMutation.isPending ? (\n *         'Adding todo...'\n *       ) : (\n *         <>\n *           {addMutation.isError ? (\n *             <div>An error occurred: {addMutation.error.message}</div>\n *           ) : null}\n *           <button onClick={() => addMutation.mutate('Item')}>Add</button>\n *         </>\n *       )}\n *     </div>\n *   )\n * }\n * ```\n *\n * @example\n * Optimistic update via `onMutate`, rolling back on `onError`:\n * ```tsx\n * import { useMutation, useQueryClient } from '@tanstack/preact-query'\n *\n * function AddTodo() {\n *   const queryClient = useQueryClient()\n *\n *   const addMutation = useMutation({\n *     mutationFn: addTodo,\n *     onMutate: async (newTodo) => {\n *       await queryClient.cancelQueries({ queryKey: ['todos'] })\n *       const previousTodos = queryClient.getQueryData<Array<string>>(['todos'])\n *\n *       queryClient.setQueryData<Array<string>>(['todos'], (old) => [\n *         ...(old ?? []),\n *         newTodo,\n *       ])\n *\n *       // Passed to `onError` as `context` if the mutation fails.\n *       return { previousTodos }\n *     },\n *     onError: (_err, _newTodo, context) => {\n *       queryClient.setQueryData(['todos'], context?.previousTodos)\n *     },\n *     onSettled: () => {\n *       queryClient.invalidateQueries({ queryKey: ['todos'] })\n *     },\n *   })\n *\n *   return (\n *     <button onClick={() => addMutation.mutate('Item')}>Add</button>\n *   )\n * }\n * ```\n *\n * @example\n * Callbacks passed per call to `mutate` only fire for the last call — `mutateAsync` gives you a\n * promise per call instead, so you can wait for all of them:\n * ```tsx\n * import { useMutation, useQueryClient } from '@tanstack/preact-query'\n *\n * function AddTodos() {\n *   const queryClient = useQueryClient()\n *\n *   const addMutation = useMutation({\n *     mutationFn: addTodo,\n *     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),\n *   })\n *\n *   async function handleAddAll(todos: Array<string>) {\n *     try {\n *       await Promise.all(todos.map((todo) => addMutation.mutateAsync(todo)))\n *     } catch (error) {\n *       console.error('Failed to add todos:', error)\n *     }\n *   }\n *\n *   return (\n *     <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>\n *       Add all\n *     </button>\n *   )\n * }\n * ```\n *\n * @example\n * If some of the mutations above can fail independently of the others, and you want to know which ones\n * did — rather than losing that information the moment the first one rejects — swap `Promise.all` for\n * `Promise.allSettled`:\n * ```tsx\n * import { useMutation, useQueryClient } from '@tanstack/preact-query'\n *\n * function AddTodos() {\n *   const queryClient = useQueryClient()\n *\n *   const addMutation = useMutation({\n *     mutationFn: addTodo,\n *     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),\n *   })\n *\n *   async function handleAddAll(todos: Array<string>) {\n *     const results = await Promise.allSettled(\n *       todos.map((todo) => addMutation.mutateAsync(todo)),\n *     )\n *\n *     results.forEach((result, index) => {\n *       if (result.status === 'rejected') {\n *         console.error(`Failed to add \"${todos[index]}\":`, result.reason)\n *       }\n *     })\n *   }\n *\n *   return (\n *     <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>\n *       Add all\n *     </button>\n *   )\n * }\n * ```\n */\nexport function useMutation<\n  TData = unknown,\n  TError = DefaultError,\n  TVariables = void,\n  TOnMutateResult = unknown,\n>(\n  options: UseMutationOptions<TData, TError, TVariables, TOnMutateResult>,\n  queryClient?: QueryClient,\n): UseMutationResult<TData, TError, TVariables, TOnMutateResult> {\n  const client = useQueryClient(queryClient)\n\n  const [observer] = useState(\n    () =>\n      new MutationObserver<TData, TError, TVariables, TOnMutateResult>(\n        client,\n        options,\n      ),\n  )\n\n  useEffect(() => {\n    observer.setOptions(options)\n  }, [observer, options])\n\n  const result = useSyncExternalStore(\n    useCallback(\n      (onStoreChange) =>\n        observer.subscribe(notifyManager.batchCalls(onStoreChange)),\n      [observer],\n    ),\n    () => observer.getCurrentResult(),\n  )\n\n  const mutate = useCallback<\n    UseMutateFunction<TData, TError, TVariables, TOnMutateResult>\n  >(\n    (\n      ...args: Parameters<\n        UseMutateFunction<TData, TError, TVariables, TOnMutateResult>\n      >\n    ) => {\n      observer.mutate(args[0] as TVariables, args[1]).catch(noop)\n    },\n    [observer],\n  )\n\n  if (\n    result.error &&\n    shouldThrowError(observer.options.throwOnError, [result.error])\n  ) {\n    throw result.error\n  }\n\n  return { ...result, mutate, mutateAsync: result.mutate }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6LA,SAAgB,YAMd,SACA,aAC+D;CAC/D,MAAM,SAAS,eAAe,WAAW;CAEzC,MAAM,CAAC,YAAY,eAEf,IAAI,iBACF,QACA,OACF,CACJ;CAEA,gBAAgB;EACd,SAAS,WAAW,OAAO;CAC7B,GAAG,CAAC,UAAU,OAAO,CAAC;CAEtB,MAAM,SAAS,qBACb,aACG,kBACC,SAAS,UAAU,cAAc,WAAW,aAAa,CAAC,GAC5D,CAAC,QAAQ,CACX,SACM,SAAS,iBAAiB,CAClC;CAEA,MAAM,SAAS,aAIX,GAAG,SAGA;EACH,SAAS,OAAO,KAAK,IAAkB,KAAK,EAAE,CAAC,CAAC,MAAM,IAAI;CAC5D,GACA,CAAC,QAAQ,CACX;CAEA,IACE,OAAO,SACP,iBAAiB,SAAS,QAAQ,cAAc,CAAC,OAAO,KAAK,CAAC,GAE9D,MAAM,OAAO;CAGf,OAAO;EAAE,GAAG;EAAQ;EAAQ,aAAa,OAAO;CAAO;AACzD"}

package/build/modern/useQuery.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useQuery.cjs","names":["useBaseQuery","QueryObserver"],"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 */\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:\n * ```tsx\n * import { useQuery } from '@tanstack/preact-query'\n *\n * function Post({ postId }: { postId: number | undefined }) {\n *   const { data } = useQuery({\n *     queryKey: ['post', postId],\n *     queryFn: () => fetchPost(postId!),\n *     enabled: postId != null,\n *   })\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 */\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":";;;;AAkLA,SAAgB,SAAS,SAA0B,aAA2B;CAC5E,OAAOA,qBAAAA,aAAa,SAASC,qBAAAA,eAAe,WAAW;AACzD"}
+{"version":3,"file":"useQuery.cjs","names":["useBaseQuery","QueryObserver"],"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,OAAOA,qBAAAA,aAAa,SAASC,qBAAAA,eAAe,WAAW;AACzD"}

package/build/modern/useQuery.d.cts

@@ -64,6 +64,24 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
  *   )
  * }
  * ```
+ *
+ * @example
+ * The same query, checking `isPending`/`isError` instead of `status` — pick whichever reads better to you:
+ * ```tsx
+ * import { useQuery } from '@tanstack/preact-query'
+ *
+ * function Posts() {
+ *   const { isPending, isError, data, error } = useQuery({
+ *     queryKey: ['posts'],
+ *     queryFn: fetchPosts,
+ *   })
+ *
+ *   if (isPending) return 'Loading...'
+ *   if (isError) return <span>Error: {error.message}</span>
+ *
+ *   return <>{data.map((post) => <p key={post.id}>{post.title}</p>)}</>
+ * }
+ * ```
  */
 declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): UseQueryResult<TData, TError>;
 /**
@@ -102,17 +120,22 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
  * ```
  *
  * @example
- * A dependent query, only enabled once `postId` is set:
+ * 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
  * import { useQuery } from '@tanstack/preact-query'
  *
  * function Post({ postId }: { postId: number | undefined }) {
- *   const { data } = useQuery({
+ *   const { data, isLoading, isError, error } = useQuery({
  *     queryKey: ['post', postId],
  *     queryFn: () => fetchPost(postId!),
  *     enabled: postId != null,
  *   })
  *
+ *   if (postId == null) return 'Select a post'
+ *   if (isLoading) return 'Loading...'
+ *   if (isError) return <span>Error: {error.message}</span>
+ *
  *   return <h1>{data?.title}</h1>
  * }
  * ```
@@ -137,6 +160,35 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
  *   return <h1>{data?.title}</h1>
  * }
  * ```
+ *
+ * @example
+ * Paginated data, keeping the previous page's data visible while the next page loads:
+ * ```tsx
+ * import { keepPreviousData, useQuery } from '@tanstack/preact-query'
+ * import { useState } from 'preact/hooks'
+ *
+ * function Posts() {
+ *   const [page, setPage] = useState(0)
+ *
+ *   const { data, isPlaceholderData } = useQuery({
+ *     queryKey: ['posts', page],
+ *     queryFn: () => fetchPosts(page),
+ *     placeholderData: keepPreviousData,
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       {data?.map((post) => <p key={post.id}>{post.title}</p>)}
+ *       <button
+ *         disabled={isPlaceholderData}
+ *         onClick={() => setPage((old) => old + 1)}
+ *       >
+ *         Next Page
+ *       </button>
+ *     </div>
+ *   )
+ * }
+ * ```
  */
 declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): UseQueryResult<TData, TError>;
 //#endregion

package/build/modern/useQuery.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"useQuery.d.cts","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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAqChB,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,4BAA4B,cAAc,QAAQ,OAAO,YAClE,cAAc,cACb,eAAe,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA0ET,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,gBAAgB,cAAc,QAAQ,OAAO,YACtD,cAAc,cACb,eAAe,OAAO"}
+{"version":3,"file":"useQuery.d.cts","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"}

package/build/modern/useQuery.d.ts

@@ -64,6 +64,24 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
  *   )
  * }
  * ```
+ *
+ * @example
+ * The same query, checking `isPending`/`isError` instead of `status` — pick whichever reads better to you:
+ * ```tsx
+ * import { useQuery } from '@tanstack/preact-query'
+ *
+ * function Posts() {
+ *   const { isPending, isError, data, error } = useQuery({
+ *     queryKey: ['posts'],
+ *     queryFn: fetchPosts,
+ *   })
+ *
+ *   if (isPending) return 'Loading...'
+ *   if (isError) return <span>Error: {error.message}</span>
+ *
+ *   return <>{data.map((post) => <p key={post.id}>{post.title}</p>)}</>
+ * }
+ * ```
  */
 declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): UseQueryResult<TData, TError>;
 /**
@@ -102,17 +120,22 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
  * ```
  *
  * @example
- * A dependent query, only enabled once `postId` is set:
+ * 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
  * import { useQuery } from '@tanstack/preact-query'
  *
  * function Post({ postId }: { postId: number | undefined }) {
- *   const { data } = useQuery({
+ *   const { data, isLoading, isError, error } = useQuery({
  *     queryKey: ['post', postId],
  *     queryFn: () => fetchPost(postId!),
  *     enabled: postId != null,
  *   })
  *
+ *   if (postId == null) return 'Select a post'
+ *   if (isLoading) return 'Loading...'
+ *   if (isError) return <span>Error: {error.message}</span>
+ *
  *   return <h1>{data?.title}</h1>
  * }
  * ```
@@ -137,6 +160,35 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
  *   return <h1>{data?.title}</h1>
  * }
  * ```
+ *
+ * @example
+ * Paginated data, keeping the previous page's data visible while the next page loads:
+ * ```tsx
+ * import { keepPreviousData, useQuery } from '@tanstack/preact-query'
+ * import { useState } from 'preact/hooks'
+ *
+ * function Posts() {
+ *   const [page, setPage] = useState(0)
+ *
+ *   const { data, isPlaceholderData } = useQuery({
+ *     queryKey: ['posts', page],
+ *     queryFn: () => fetchPosts(page),
+ *     placeholderData: keepPreviousData,
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       {data?.map((post) => <p key={post.id}>{post.title}</p>)}
+ *       <button
+ *         disabled={isPlaceholderData}
+ *         onClick={() => setPage((old) => old + 1)}
+ *       >
+ *         Next Page
+ *       </button>
+ *     </div>
+ *   )
+ * }
+ * ```
  */
 declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): UseQueryResult<TData, TError>;
 //#endregion

package/build/modern/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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAqChB,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,4BAA4B,cAAc,QAAQ,OAAO,YAClE,cAAc,cACb,eAAe,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA0ET,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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/build/modern/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 */\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:\n * ```tsx\n * import { useQuery } from '@tanstack/preact-query'\n *\n * function Post({ postId }: { postId: number | undefined }) {\n *   const { data } = useQuery({\n *     queryKey: ['post', postId],\n *     queryFn: () => fetchPost(postId!),\n *     enabled: postId != null,\n *   })\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 */\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":";;;AAkLA,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`.\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"}

package/build/modern/useSuspenseInfiniteQuery.cjs

@@ -23,20 +23,28 @@ let _tanstack_query_core = require("@tanstack/query-core");
 *
 * function Projects() {
 *   // `data` is guaranteed to be defined here — no `isPending` check needed.
-*   const { data, fetchNextPage, hasNextPage } = useSuspenseInfiniteQuery({
-*     queryKey: ['projects'],
-*     queryFn: ({ pageParam }) => fetchProjects(pageParam),
-*     initialPageParam: 0,
-*     getNextPageParam: (lastPage) => lastPage.nextId,
-*   })
+*   const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
+*     useSuspenseInfiniteQuery({
+*       queryKey: ['projects'],
+*       queryFn: ({ pageParam }) => fetchProjects(pageParam),
+*       initialPageParam: 0,
+*       getNextPageParam: (lastPage) => lastPage.nextId,
+*     })
 *
 *   return (
 *     <div>
 *       {data.pages.map((page) =>
 *         page.projects.map((project) => <p key={project.id}>{project.name}</p>),
 *       )}
-*       <button onClick={() => fetchNextPage()} disabled={!hasNextPage}>
-*         Load More
+*       <button
+*         onClick={() => fetchNextPage()}
+*         disabled={!hasNextPage || isFetching}
+*       >
+*         {isFetchingNextPage
+*           ? 'Loading more...'
+*           : hasNextPage
+*             ? 'Load More'
+*             : 'Nothing more to load'}
 *       </button>
 *     </div>
 *   )

package/build/modern/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 } = 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 onClick={() => fetchNextPage()} disabled={!hasNextPage}>\n *         Load More\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,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 * @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"}

package/build/modern/useSuspenseInfiniteQuery.d.cts

@@ -21,20 +21,28 @@ import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/que
  *
  * function Projects() {
  *   // `data` is guaranteed to be defined here — no `isPending` check needed.
- *   const { data, fetchNextPage, hasNextPage } = useSuspenseInfiniteQuery({
- *     queryKey: ['projects'],
- *     queryFn: ({ pageParam }) => fetchProjects(pageParam),
- *     initialPageParam: 0,
- *     getNextPageParam: (lastPage) => lastPage.nextId,
- *   })
+ *   const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
+ *     useSuspenseInfiniteQuery({
+ *       queryKey: ['projects'],
+ *       queryFn: ({ pageParam }) => fetchProjects(pageParam),
+ *       initialPageParam: 0,
+ *       getNextPageParam: (lastPage) => lastPage.nextId,
+ *     })
  *
  *   return (
  *     <div>
  *       {data.pages.map((page) =>
  *         page.projects.map((project) => <p key={project.id}>{project.name}</p>),
  *       )}
- *       <button onClick={() => fetchNextPage()} disabled={!hasNextPage}>
- *         Load More
+ *       <button
+ *         onClick={() => fetchNextPage()}
+ *         disabled={!hasNextPage || isFetching}
+ *       >
+ *         {isFetchingNextPage
+ *           ? 'Loading more...'
+ *           : hasNextPage
+ *             ? 'Load More'
+ *             : 'Nothing more to load'}
  *       </button>
  *     </div>
  *   )

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

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