@tanstack/preact-query 5.102.8 → 5.103.1

package/build/modern/useInfiniteQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInfiniteQuery.js","names":[],"sources":["../../src/useInfiniteQuery.ts"],"sourcesContent":["import { InfiniteQueryObserver } from '@tanstack/query-core'\nimport type {\n  DefaultError,\n  InfiniteData,\n  QueryClient,\n  QueryKey,\n  QueryObserver,\n} from '@tanstack/query-core'\n\nimport type {\n  DefinedInitialDataInfiniteOptions,\n  UndefinedInitialDataInfiniteOptions,\n} from './infiniteQueryOptions'\nimport type {\n  DefinedUseInfiniteQueryResult,\n  UseInfiniteQueryOptions,\n  UseInfiniteQueryResult,\n} from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of `queryFn`,\n * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.\n *\n * This overload is selected when `initialData` is set.\n *\n * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default\n * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user\n * actions, or add conditions like `hasNextPage && !isFetching`.\n * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.\n * @param options - The {@link DefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`, 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 same properties as `useQuery`, with the addition of `data.pages`, `data.pageParams`,\n * `fetchNextPage`, `fetchPreviousPage`, `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and\n * `isFetchingPreviousPage`.\n *\n * @example\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n *   const { data } = useInfiniteQuery({\n *     queryKey: ['projects'],\n *     queryFn: ({ pageParam }) => fetchProjects(pageParam),\n *     initialPageParam: 0,\n *     getNextPageParam: (lastPage) => lastPage.nextId,\n *     initialData: { pages: [], pageParams: [] },\n *   })\n *\n *   return <>{data.pages.map((page) => page.projects.map((p) => <p key={p.id}>{p.name}</p>))}</>\n * }\n * ```\n */\nexport function useInfiniteQuery<\n  TQueryFnData,\n  TError = DefaultError,\n  TData = InfiniteData<TQueryFnData>,\n  TQueryKey extends QueryKey = QueryKey,\n  TPageParam = unknown,\n>(\n  options: DefinedInitialDataInfiniteOptions<\n    TQueryFnData,\n    TError,\n    TData,\n    TQueryKey,\n    TPageParam\n  >,\n  queryClient?: QueryClient,\n): DefinedUseInfiniteQueryResult<TData, TError>\n\n/**\n * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of `queryFn`,\n * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.\n *\n * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default\n * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user\n * actions, or add conditions like `hasNextPage && !isFetching`.\n * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.\n * @param options - The {@link UndefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`.\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 properties as `useQuery`, with the addition of `data.pages`, `data.pageParams`,\n * `fetchNextPage`, `fetchPreviousPage`, `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and\n * `isFetchingPreviousPage`.\n *\n * @example\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n *   const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =\n *     useInfiniteQuery({\n *       queryKey: ['projects'],\n *       queryFn: ({ pageParam }) => fetchProjects(pageParam),\n *       initialPageParam: 0,\n *       getNextPageParam: (lastPage) => lastPage.nextId,\n *     })\n *\n *   return (\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 *   )\n * }\n * ```\n */\nexport function useInfiniteQuery<\n  TQueryFnData,\n  TError = DefaultError,\n  TData = InfiniteData<TQueryFnData>,\n  TQueryKey extends QueryKey = QueryKey,\n  TPageParam = unknown,\n>(\n  options: UndefinedInitialDataInfiniteOptions<\n    TQueryFnData,\n    TError,\n    TData,\n    TQueryKey,\n    TPageParam\n  >,\n  queryClient?: QueryClient,\n): UseInfiniteQueryResult<TData, TError>\n\n/**\n * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of `queryFn`,\n * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.\n *\n * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default\n * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user\n * actions, or add conditions like `hasNextPage && !isFetching`.\n * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.\n * @param options - The {@link UseInfiniteQueryOptions} to use — everything you can pass to `useInfiniteQuery`.\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 properties as `useQuery`, with the addition of `data.pages`, `data.pageParams`,\n * `fetchNextPage`, `fetchPreviousPage`, `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and\n * `isFetchingPreviousPage`.\n *\n * @example\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n *   const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =\n *     useInfiniteQuery({\n *       queryKey: ['projects'],\n *       queryFn: ({ pageParam }) => fetchProjects(pageParam),\n *       initialPageParam: 0,\n *       getNextPageParam: (lastPage) => lastPage.nextId,\n *     })\n *\n *   return (\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 *   )\n * }\n * ```\n */\nexport function useInfiniteQuery<\n  TQueryFnData,\n  TError = DefaultError,\n  TData = InfiniteData<TQueryFnData>,\n  TQueryKey extends QueryKey = QueryKey,\n  TPageParam = unknown,\n>(\n  options: UseInfiniteQueryOptions<\n    TQueryFnData,\n    TError,\n    TData,\n    TQueryKey,\n    TPageParam\n  >,\n  queryClient?: QueryClient,\n): UseInfiniteQueryResult<TData, TError>\n\nexport function useInfiniteQuery(\n  options: UseInfiniteQueryOptions,\n  queryClient?: QueryClient,\n) {\n  return useBaseQuery(\n    options,\n    InfiniteQueryObserver as typeof QueryObserver,\n    queryClient,\n  )\n}\n"],"mappings":";;;AA+LA,SAAgB,iBACd,SACA,aACA;CACA,OAAO,aACL,SACA,uBACA,WACF;AACF"}
+{"version":3,"file":"useInfiniteQuery.js","names":[],"sources":["../../src/useInfiniteQuery.ts"],"sourcesContent":["import { InfiniteQueryObserver } from '@tanstack/query-core'\nimport type {\n  DefaultError,\n  InfiniteData,\n  QueryClient,\n  QueryKey,\n  QueryObserver,\n} from '@tanstack/query-core'\n\nimport type {\n  DefinedInitialDataInfiniteOptions,\n  UndefinedInitialDataInfiniteOptions,\n} from './infiniteQueryOptions'\nimport type {\n  DefinedUseInfiniteQueryResult,\n  UseInfiniteQueryOptions,\n  UseInfiniteQueryResult,\n} from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of\n * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.\n *\n * This overload is selected when `initialData` is set.\n *\n * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default\n * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user\n * actions, or add conditions like `hasNextPage && !isFetching`.\n * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.\n * @param options - The {@link DefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`, 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 same properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,\n * `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and\n * `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default\n * `InfiniteData<TQueryFnData>` shape.\n *\n * @example\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n *   // `data` is never `undefined`, thanks to `initialData` — even if a refetch fails, so the\n *   // list stays visible alongside the error.\n *   const { data, isError, error } = useInfiniteQuery({\n *     queryKey: ['projects'],\n *     queryFn: ({ pageParam }) => fetchProjects(pageParam),\n *     initialPageParam: 0,\n *     getNextPageParam: (lastPage) => lastPage.nextId,\n *     initialData: { pages: [], pageParams: [] },\n *   })\n *\n *   return (\n *     <div>\n *       {isError ? <span>Error: {error.message}</span> : null}\n *       <ul>\n *         {data.pages.map((page) => page.projects.map((p) => <li key={p.id}>{p.name}</li>))}\n *       </ul>\n *     </div>\n *   )\n * }\n * ```\n */\nexport function useInfiniteQuery<\n  TQueryFnData,\n  TError = DefaultError,\n  TData = InfiniteData<TQueryFnData>,\n  TQueryKey extends QueryKey = QueryKey,\n  TPageParam = unknown,\n>(\n  options: DefinedInitialDataInfiniteOptions<\n    TQueryFnData,\n    TError,\n    TData,\n    TQueryKey,\n    TPageParam\n  >,\n  queryClient?: QueryClient,\n): DefinedUseInfiniteQueryResult<TData, TError>\n\n/**\n * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of\n * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.\n *\n * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default\n * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user\n * actions, or add conditions like `hasNextPage && !isFetching`.\n * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.\n * @param options - The {@link UndefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`.\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 properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,\n * `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and\n * `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default\n * `InfiniteData<TQueryFnData>` shape.\n *\n * @example\n * Fetching the next page from a \"Load More\" button click:\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n *   const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =\n *     useInfiniteQuery({\n *       queryKey: ['projects'],\n *       queryFn: ({ pageParam }) => fetchProjects(pageParam),\n *       initialPageParam: 0,\n *       getNextPageParam: (lastPage) => lastPage.nextId,\n *     })\n *\n *   if (isPending) return 'Loading...'\n *   if (isError) return <span>Error: {error.message}</span>\n *\n *   return (\n *     <>\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 *     </>\n *   )\n * }\n * ```\n *\n * @example\n * Fetching the next page automatically as the user scrolls, using an `IntersectionObserver` on a\n * sentinel element after the list:\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/preact-query'\n * import { useEffect, useRef } from 'preact/hooks'\n *\n * function Projects() {\n *   const {\n *     data,\n *     isPending,\n *     isError,\n *     error,\n *     fetchNextPage,\n *     hasNextPage,\n *     isFetching,\n *     isFetchingNextPage,\n *   } = useInfiniteQuery({\n *     queryKey: ['projects'],\n *     queryFn: ({ pageParam }) => fetchProjects(pageParam),\n *     initialPageParam: 0,\n *     getNextPageParam: (lastPage) => lastPage.nextId,\n *   })\n *\n *   const sentinelRef = useRef<HTMLDivElement>(null)\n *\n *   useEffect(() => {\n *     const sentinel = sentinelRef.current\n *     if (sentinel == null || !hasNextPage || isFetching) return\n *\n *     const observer = new IntersectionObserver(([entry]) => {\n *       if (entry?.isIntersecting) fetchNextPage()\n *     })\n *     observer.observe(sentinel)\n *\n *     return () => observer.disconnect()\n *   }, [hasNextPage, isFetching, fetchNextPage])\n *\n *   if (isPending) return 'Loading...'\n *   if (isError) return <span>Error: {error.message}</span>\n *\n *   return (\n *     <>\n *       <ul>\n *         {data.pages.map((page) =>\n *           page.projects.map((project) => <li key={project.id}>{project.name}</li>),\n *         )}\n *       </ul>\n *       <div ref={sentinelRef}>{isFetchingNextPage ? 'Loading more...' : null}</div>\n *     </>\n *   )\n * }\n * ```\n */\nexport function useInfiniteQuery<\n  TQueryFnData,\n  TError = DefaultError,\n  TData = InfiniteData<TQueryFnData>,\n  TQueryKey extends QueryKey = QueryKey,\n  TPageParam = unknown,\n>(\n  options: UndefinedInitialDataInfiniteOptions<\n    TQueryFnData,\n    TError,\n    TData,\n    TQueryKey,\n    TPageParam\n  >,\n  queryClient?: QueryClient,\n): UseInfiniteQueryResult<TData, TError>\n\n/**\n * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of\n * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.\n *\n * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default\n * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user\n * actions, or add conditions like `hasNextPage && !isFetching`.\n * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.\n * @param options - The {@link UseInfiniteQueryOptions} to use — everything you can pass to `useInfiniteQuery`.\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 properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,\n * `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and\n * `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default\n * `InfiniteData<TQueryFnData>` shape.\n *\n * @example\n * Fetching the next page from a \"Load More\" button click:\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n *   const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =\n *     useInfiniteQuery({\n *       queryKey: ['projects'],\n *       queryFn: ({ pageParam }) => fetchProjects(pageParam),\n *       initialPageParam: 0,\n *       getNextPageParam: (lastPage) => lastPage.nextId,\n *     })\n *\n *   if (isPending) return 'Loading...'\n *   if (isError) return <span>Error: {error.message}</span>\n *\n *   return (\n *     <>\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 *     </>\n *   )\n * }\n * ```\n *\n * @example\n * Fetching the next page automatically as the user scrolls, using an `IntersectionObserver` on a\n * sentinel element after the list:\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/preact-query'\n * import { useEffect, useRef } from 'preact/hooks'\n *\n * function Projects() {\n *   const {\n *     data,\n *     isPending,\n *     isError,\n *     error,\n *     fetchNextPage,\n *     hasNextPage,\n *     isFetching,\n *     isFetchingNextPage,\n *   } = useInfiniteQuery({\n *     queryKey: ['projects'],\n *     queryFn: ({ pageParam }) => fetchProjects(pageParam),\n *     initialPageParam: 0,\n *     getNextPageParam: (lastPage) => lastPage.nextId,\n *   })\n *\n *   const sentinelRef = useRef<HTMLDivElement>(null)\n *\n *   useEffect(() => {\n *     const sentinel = sentinelRef.current\n *     if (sentinel == null || !hasNextPage || isFetching) return\n *\n *     const observer = new IntersectionObserver(([entry]) => {\n *       if (entry?.isIntersecting) fetchNextPage()\n *     })\n *     observer.observe(sentinel)\n *\n *     return () => observer.disconnect()\n *   }, [hasNextPage, isFetching, fetchNextPage])\n *\n *   if (isPending) return 'Loading...'\n *   if (isError) return <span>Error: {error.message}</span>\n *\n *   return (\n *     <>\n *       <ul>\n *         {data.pages.map((page) =>\n *           page.projects.map((project) => <li key={project.id}>{project.name}</li>),\n *         )}\n *       </ul>\n *       <div ref={sentinelRef}>{isFetchingNextPage ? 'Loading more...' : null}</div>\n *     </>\n *   )\n * }\n * ```\n *\n * @example\n * A query that's disabled, type safe, until `postId` is set — pass `skipToken` as `queryFn`\n * instead of setting `enabled: false`:\n * ```tsx\n * import { skipToken, useInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Comments({ postId }: { postId: string | undefined }) {\n *   // Use `isLoading`, not `isPending`, so the loading state doesn't show while the query is disabled.\n *   const { data, isLoading, isError, error } = useInfiniteQuery({\n *     queryKey: ['post', postId, 'comments'],\n *     queryFn:\n *       postId != null\n *         ? ({ pageParam }) => fetchComments(postId, pageParam)\n *         : skipToken,\n *     initialPageParam: 0,\n *     getNextPageParam: (lastPage) => lastPage.nextId,\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 (\n *     <ul>\n *       {data?.pages.map((page) => page.comments.map((c) => <li key={c.id}>{c.text}</li>))}\n *     </ul>\n *   )\n * }\n * ```\n */\nexport function useInfiniteQuery<\n  TQueryFnData,\n  TError = DefaultError,\n  TData = InfiniteData<TQueryFnData>,\n  TQueryKey extends QueryKey = QueryKey,\n  TPageParam = unknown,\n>(\n  options: UseInfiniteQueryOptions<\n    TQueryFnData,\n    TError,\n    TData,\n    TQueryKey,\n    TPageParam\n  >,\n  queryClient?: QueryClient,\n): UseInfiniteQueryResult<TData, TError>\n\nexport function useInfiniteQuery(\n  options: UseInfiniteQueryOptions,\n  queryClient?: QueryClient,\n) {\n  return useBaseQuery(\n    options,\n    InfiniteQueryObserver as typeof QueryObserver,\n    queryClient,\n  )\n}\n"],"mappings":";;;AA2WA,SAAgB,iBACd,SACA,aACA;CACA,OAAO,aACL,SACA,uBACA,WACF;AACF"}

package/build/modern/useIsFetching.cjs

@@ -5,8 +5,8 @@ let _tanstack_query_core = require("@tanstack/query-core");
 let preact_hooks = require("preact/hooks");
 //#region src/useIsFetching.ts
 /**
-* `useIsFetching` is an optional hook that returns the `number` of the queries that your application is loading or
-* fetching in the background (useful for app-wide loading indicators).
+* The `useIsFetching` hook returns the `number` of the queries that your application is loading or fetching in
+* the background (useful for app-wide loading indicators).
 *
 * @param filters - The {@link QueryFilters} to narrow down the matched queries.
 * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
@@ -18,10 +18,12 @@ let preact_hooks = require("preact/hooks");
 * ```tsx
 * import { useIsFetching } from '@tanstack/preact-query'
 *
-* // How many queries are fetching?
-* const isFetching = useIsFetching()
-* // How many queries matching the posts prefix are fetching?
-* const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+* function PostsFetchingIndicator() {
+*   // How many queries matching the posts prefix are fetching?
+*   const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+*
+*   return isFetchingPosts ? <span>Refreshing posts...</span> : null
+* }
 * ```
 *
 * @example

package/build/modern/useIsFetching.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useIsFetching.cjs","names":["useQueryClient","useSyncExternalStore","useCallback","notifyManager"],"sources":["../../src/useIsFetching.ts"],"sourcesContent":["import { notifyManager } from '@tanstack/query-core'\nimport type { QueryClient, QueryFilters } from '@tanstack/query-core'\nimport { useCallback } from 'preact/hooks'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport { useSyncExternalStore } from './utils'\n\n/**\n * `useIsFetching` is an optional hook that returns the `number` of the queries that your application is loading or\n * fetching in the background (useful for app-wide loading indicators).\n *\n * @param filters - The {@link QueryFilters} to narrow down the matched queries.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns Will be the `number` of the queries that your application is currently loading or fetching in the\n * background.\n *\n * @example\n * ```tsx\n * import { useIsFetching } from '@tanstack/preact-query'\n *\n * // How many queries are fetching?\n * const isFetching = useIsFetching()\n * // How many queries matching the posts prefix are fetching?\n * const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })\n * ```\n *\n * @example\n * A global loading indicator for any query fetching in the background, not just the ones on screen:\n * ```tsx\n * import { useIsFetching } from '@tanstack/preact-query'\n *\n * function GlobalLoadingIndicator() {\n *   const isFetching = useIsFetching()\n *\n *   return isFetching ? (\n *     <div>Queries are fetching in the background...</div>\n *   ) : null\n * }\n * ```\n */\nexport function useIsFetching(\n  filters?: QueryFilters,\n  queryClient?: QueryClient,\n): number {\n  const client = useQueryClient(queryClient)\n  const queryCache = client.getQueryCache()\n\n  return useSyncExternalStore(\n    useCallback(\n      (onStoreChange) =>\n        queryCache.subscribe(notifyManager.batchCalls(onStoreChange)),\n      [queryCache],\n    ),\n    () => client.isFetching(filters),\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,cACd,SACA,aACQ;CACR,MAAM,SAASA,4BAAAA,eAAe,WAAW;CACzC,MAAM,aAAa,OAAO,cAAc;CAExC,OAAOC,cAAAA,sBAAAA,GACLC,aAAAA,YAAAA,EACG,kBACC,WAAW,UAAUC,qBAAAA,cAAc,WAAW,aAAa,CAAC,GAC9D,CAAC,UAAU,CACb,SACM,OAAO,WAAW,OAAO,CACjC;AACF"}
+{"version":3,"file":"useIsFetching.cjs","names":["useQueryClient","useSyncExternalStore","useCallback","notifyManager"],"sources":["../../src/useIsFetching.ts"],"sourcesContent":["import { notifyManager } from '@tanstack/query-core'\nimport type { QueryClient, QueryFilters } from '@tanstack/query-core'\nimport { useCallback } from 'preact/hooks'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport { useSyncExternalStore } from './utils'\n\n/**\n * The `useIsFetching` hook returns the `number` of the queries that your application is loading or fetching in\n * the background (useful for app-wide loading indicators).\n *\n * @param filters - The {@link QueryFilters} to narrow down the matched queries.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns Will be the `number` of the queries that your application is currently loading or fetching in the\n * background.\n *\n * @example\n * ```tsx\n * import { useIsFetching } from '@tanstack/preact-query'\n *\n * function PostsFetchingIndicator() {\n *   // How many queries matching the posts prefix are fetching?\n *   const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })\n *\n *   return isFetchingPosts ? <span>Refreshing posts...</span> : null\n * }\n * ```\n *\n * @example\n * A global loading indicator for any query fetching in the background, not just the ones on screen:\n * ```tsx\n * import { useIsFetching } from '@tanstack/preact-query'\n *\n * function GlobalLoadingIndicator() {\n *   const isFetching = useIsFetching()\n *\n *   return isFetching ? (\n *     <div>Queries are fetching in the background...</div>\n *   ) : null\n * }\n * ```\n */\nexport function useIsFetching(\n  filters?: QueryFilters,\n  queryClient?: QueryClient,\n): number {\n  const client = useQueryClient(queryClient)\n  const queryCache = client.getQueryCache()\n\n  return useSyncExternalStore(\n    useCallback(\n      (onStoreChange) =>\n        queryCache.subscribe(notifyManager.batchCalls(onStoreChange)),\n      [queryCache],\n    ),\n    () => client.isFetching(filters),\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,SAAgB,cACd,SACA,aACQ;CACR,MAAM,SAASA,4BAAAA,eAAe,WAAW;CACzC,MAAM,aAAa,OAAO,cAAc;CAExC,OAAOC,cAAAA,sBAAAA,GACLC,aAAAA,YAAAA,EACG,kBACC,WAAW,UAAUC,qBAAAA,cAAc,WAAW,aAAa,CAAC,GAC9D,CAAC,UAAU,CACb,SACM,OAAO,WAAW,OAAO,CACjC;AACF"}

package/build/modern/useIsFetching.d.cts

@@ -1,8 +1,8 @@
 import { QueryClient, QueryFilters } from "@tanstack/query-core";
 //#region src/useIsFetching.d.ts
 /**
- * `useIsFetching` is an optional hook that returns the `number` of the queries that your application is loading or
- * fetching in the background (useful for app-wide loading indicators).
+ * The `useIsFetching` hook returns the `number` of the queries that your application is loading or fetching in
+ * the background (useful for app-wide loading indicators).
  *
  * @param filters - The {@link QueryFilters} to narrow down the matched queries.
  * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
@@ -14,10 +14,12 @@ import { QueryClient, QueryFilters } from "@tanstack/query-core";
  * ```tsx
  * import { useIsFetching } from '@tanstack/preact-query'
  *
- * // How many queries are fetching?
- * const isFetching = useIsFetching()
- * // How many queries matching the posts prefix are fetching?
- * const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+ * function PostsFetchingIndicator() {
+ *   // How many queries matching the posts prefix are fetching?
+ *   const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+ *
+ *   return isFetchingPosts ? <span>Refreshing posts...</span> : null
+ * }
  * ```
  *
  * @example

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

@@ -1 +1 @@
-{"version":3,"file":"useIsFetching.d.cts","names":[],"sources":["../../src/useIsFetching.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyCgB,cACd,UAAU,cACV,cAAc"}
+{"version":3,"file":"useIsFetching.d.cts","names":[],"sources":["../../src/useIsFetching.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA2CgB,cACd,UAAU,cACV,cAAc"}

package/build/modern/useIsFetching.d.ts

@@ -1,8 +1,8 @@
 import { QueryClient, QueryFilters } from "@tanstack/query-core";
 //#region src/useIsFetching.d.ts
 /**
- * `useIsFetching` is an optional hook that returns the `number` of the queries that your application is loading or
- * fetching in the background (useful for app-wide loading indicators).
+ * The `useIsFetching` hook returns the `number` of the queries that your application is loading or fetching in
+ * the background (useful for app-wide loading indicators).
  *
  * @param filters - The {@link QueryFilters} to narrow down the matched queries.
  * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
@@ -14,10 +14,12 @@ import { QueryClient, QueryFilters } from "@tanstack/query-core";
  * ```tsx
  * import { useIsFetching } from '@tanstack/preact-query'
  *
- * // How many queries are fetching?
- * const isFetching = useIsFetching()
- * // How many queries matching the posts prefix are fetching?
- * const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+ * function PostsFetchingIndicator() {
+ *   // How many queries matching the posts prefix are fetching?
+ *   const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+ *
+ *   return isFetchingPosts ? <span>Refreshing posts...</span> : null
+ * }
  * ```
  *
  * @example

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

@@ -1 +1 @@
-{"version":3,"file":"useIsFetching.d.ts","names":[],"sources":["../../src/useIsFetching.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyCgB,cACd,UAAU,cACV,cAAc"}
+{"version":3,"file":"useIsFetching.d.ts","names":[],"sources":["../../src/useIsFetching.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA2CgB,cACd,UAAU,cACV,cAAc"}

package/build/modern/useIsFetching.js

@@ -4,8 +4,8 @@ import { notifyManager } from "@tanstack/query-core";
 import { useCallback } from "preact/hooks";
 //#region src/useIsFetching.ts
 /**
-* `useIsFetching` is an optional hook that returns the `number` of the queries that your application is loading or
-* fetching in the background (useful for app-wide loading indicators).
+* The `useIsFetching` hook returns the `number` of the queries that your application is loading or fetching in
+* the background (useful for app-wide loading indicators).
 *
 * @param filters - The {@link QueryFilters} to narrow down the matched queries.
 * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
@@ -17,10 +17,12 @@ import { useCallback } from "preact/hooks";
 * ```tsx
 * import { useIsFetching } from '@tanstack/preact-query'
 *
-* // How many queries are fetching?
-* const isFetching = useIsFetching()
-* // How many queries matching the posts prefix are fetching?
-* const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+* function PostsFetchingIndicator() {
+*   // How many queries matching the posts prefix are fetching?
+*   const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+*
+*   return isFetchingPosts ? <span>Refreshing posts...</span> : null
+* }
 * ```
 *
 * @example

package/build/modern/useIsFetching.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIsFetching.js","names":[],"sources":["../../src/useIsFetching.ts"],"sourcesContent":["import { notifyManager } from '@tanstack/query-core'\nimport type { QueryClient, QueryFilters } from '@tanstack/query-core'\nimport { useCallback } from 'preact/hooks'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport { useSyncExternalStore } from './utils'\n\n/**\n * `useIsFetching` is an optional hook that returns the `number` of the queries that your application is loading or\n * fetching in the background (useful for app-wide loading indicators).\n *\n * @param filters - The {@link QueryFilters} to narrow down the matched queries.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns Will be the `number` of the queries that your application is currently loading or fetching in the\n * background.\n *\n * @example\n * ```tsx\n * import { useIsFetching } from '@tanstack/preact-query'\n *\n * // How many queries are fetching?\n * const isFetching = useIsFetching()\n * // How many queries matching the posts prefix are fetching?\n * const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })\n * ```\n *\n * @example\n * A global loading indicator for any query fetching in the background, not just the ones on screen:\n * ```tsx\n * import { useIsFetching } from '@tanstack/preact-query'\n *\n * function GlobalLoadingIndicator() {\n *   const isFetching = useIsFetching()\n *\n *   return isFetching ? (\n *     <div>Queries are fetching in the background...</div>\n *   ) : null\n * }\n * ```\n */\nexport function useIsFetching(\n  filters?: QueryFilters,\n  queryClient?: QueryClient,\n): number {\n  const client = useQueryClient(queryClient)\n  const queryCache = client.getQueryCache()\n\n  return useSyncExternalStore(\n    useCallback(\n      (onStoreChange) =>\n        queryCache.subscribe(notifyManager.batchCalls(onStoreChange)),\n      [queryCache],\n    ),\n    () => client.isFetching(filters),\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,cACd,SACA,aACQ;CACR,MAAM,SAAS,eAAe,WAAW;CACzC,MAAM,aAAa,OAAO,cAAc;CAExC,OAAO,qBACL,aACG,kBACC,WAAW,UAAU,cAAc,WAAW,aAAa,CAAC,GAC9D,CAAC,UAAU,CACb,SACM,OAAO,WAAW,OAAO,CACjC;AACF"}
+{"version":3,"file":"useIsFetching.js","names":[],"sources":["../../src/useIsFetching.ts"],"sourcesContent":["import { notifyManager } from '@tanstack/query-core'\nimport type { QueryClient, QueryFilters } from '@tanstack/query-core'\nimport { useCallback } from 'preact/hooks'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport { useSyncExternalStore } from './utils'\n\n/**\n * The `useIsFetching` hook returns the `number` of the queries that your application is loading or fetching in\n * the background (useful for app-wide loading indicators).\n *\n * @param filters - The {@link QueryFilters} to narrow down the matched queries.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns Will be the `number` of the queries that your application is currently loading or fetching in the\n * background.\n *\n * @example\n * ```tsx\n * import { useIsFetching } from '@tanstack/preact-query'\n *\n * function PostsFetchingIndicator() {\n *   // How many queries matching the posts prefix are fetching?\n *   const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })\n *\n *   return isFetchingPosts ? <span>Refreshing posts...</span> : null\n * }\n * ```\n *\n * @example\n * A global loading indicator for any query fetching in the background, not just the ones on screen:\n * ```tsx\n * import { useIsFetching } from '@tanstack/preact-query'\n *\n * function GlobalLoadingIndicator() {\n *   const isFetching = useIsFetching()\n *\n *   return isFetching ? (\n *     <div>Queries are fetching in the background...</div>\n *   ) : null\n * }\n * ```\n */\nexport function useIsFetching(\n  filters?: QueryFilters,\n  queryClient?: QueryClient,\n): number {\n  const client = useQueryClient(queryClient)\n  const queryCache = client.getQueryCache()\n\n  return useSyncExternalStore(\n    useCallback(\n      (onStoreChange) =>\n        queryCache.subscribe(notifyManager.batchCalls(onStoreChange)),\n      [queryCache],\n    ),\n    () => client.isFetching(filters),\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,SAAgB,cACd,SACA,aACQ;CACR,MAAM,SAAS,eAAe,WAAW;CACzC,MAAM,aAAa,OAAO,cAAc;CAExC,OAAO,qBACL,aACG,kBACC,WAAW,UAAU,cAAc,WAAW,aAAa,CAAC,GAC9D,CAAC,UAAU,CACb,SACM,OAAO,WAAW,OAAO,CACjC;AACF"}

package/build/modern/useMutation.cjs

@@ -8,14 +8,16 @@ let preact_hooks = require("preact/hooks");
 * Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects.
 * `useMutation` is the hook for that.
 *
-* @see {@link mutationOptions} to share these options across multiple `useMutation` call sites.
+* @see {@link mutationOptions} to share these options across multiple `useMutation` call sites, or to look
+* the mutation up elsewhere via its `mutationKey` (e.g. with `useMutationState`).
 * @param options - The {@link UseMutationOptions} to use — everything you can pass to `useMutation`.
 * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
 * be used.
 * @returns `mutate`/`mutateAsync` also accept per-call `onSuccess`/`onError`/`onSettled` callbacks as a second
 * argument, useful for triggering call-site side effects (e.g. navigation) without coupling them to the shared
-* mutation definition. If you make multiple requests, `onSuccess` will fire only after the latest call you've
-* made.
+* mutation definition. Hook-level callbacks (passed to `options`) fire for every mutation; per-call callbacks
+* fire only for the latest call you've made, and only while the component is still mounted — unmounting before
+* the mutation settles removes the subscription and prevents them from firing.
 *
 * @example
 * ```tsx
@@ -92,11 +94,11 @@ let preact_hooks = require("preact/hooks");
 *         newTodo,
 *       ])
 *
-*       // Passed to `onError` as `context` if the mutation fails.
+*       // Passed to `onError` as `onMutateResult` if the mutation fails.
 *       return { previousTodos }
 *     },
-*     onError: (_err, _newTodo, context) => {
-*       queryClient.setQueryData(['todos'], context?.previousTodos)
+*     onError: (_err, _newTodo, onMutateResult) => {
+*       queryClient.setQueryData(['todos'], onMutateResult?.previousTodos)
 *     },
 *     onSettled: () => {
 *       queryClient.invalidateQueries({ queryKey: ['todos'] })
@@ -111,7 +113,7 @@ let preact_hooks = require("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:
+* promise per call instead, so you can wait for all of them when they succeed:
 * ```tsx
 * import { useMutation, useQueryClient } from '@tanstack/preact-query'
 *
@@ -155,13 +157,13 @@ let preact_hooks = require("preact/hooks");
 *   })
 *
 *   async function handleAddAll(todos: Array<string>) {
-*     const results = await Promise.allSettled(
+*     const addResults = 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)
+*     addResults.forEach((addResult, index) => {
+*       if (addResult.status === 'rejected') {
+*         console.error(`Failed to add "${todos[index]}":`, addResult.reason)
 *       }
 *     })
 *   }

package/build/modern/useMutation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMutation.cjs","names":["useQueryClient","useState","MutationObserver","useSyncExternalStore","useCallback","notifyManager","noop","shouldThrowError"],"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,SAASA,4BAAAA,eAAe,WAAW;CAEzC,MAAM,CAAC,aAAA,GAAYC,aAAAA,SAAAA,OAEf,IAAIC,qBAAAA,iBACF,QACA,OACF,CACJ;CAEA,CAAA,GAAA,aAAA,UAAA,OAAgB;EACd,SAAS,WAAW,OAAO;CAC7B,GAAG,CAAC,UAAU,OAAO,CAAC;CAEtB,MAAM,SAASC,cAAAA,sBAAAA,GACbC,aAAAA,YAAAA,EACG,kBACC,SAAS,UAAUC,qBAAAA,cAAc,WAAW,aAAa,CAAC,GAC5D,CAAC,QAAQ,CACX,SACM,SAAS,iBAAiB,CAClC;CAEA,MAAM,UAAA,GAASD,aAAAA,YAAAA,EAIX,GAAG,SAGA;EACH,SAAS,OAAO,KAAK,IAAkB,KAAK,EAAE,CAAC,CAAC,MAAME,qBAAAA,IAAI;CAC5D,GACA,CAAC,QAAQ,CACX;CAEA,IACE,OAAO,UAAA,GACPC,qBAAAA,iBAAAA,CAAiB,SAAS,QAAQ,cAAc,CAAC,OAAO,KAAK,CAAC,GAE9D,MAAM,OAAO;CAGf,OAAO;EAAE,GAAG;EAAQ;EAAQ,aAAa,OAAO;CAAO;AACzD"}
+{"version":3,"file":"useMutation.cjs","names":["useQueryClient","useState","MutationObserver","useSyncExternalStore","useCallback","notifyManager","noop","shouldThrowError"],"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, or to look\n * the mutation up elsewhere via its `mutationKey` (e.g. with `useMutationState`).\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. Hook-level callbacks (passed to `options`) fire for every mutation; per-call callbacks\n * fire only for the latest call you've made, and only while the component is still mounted — unmounting before\n * the mutation settles removes the subscription and prevents them from firing.\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 `onMutateResult` if the mutation fails.\n *       return { previousTodos }\n *     },\n *     onError: (_err, _newTodo, onMutateResult) => {\n *       queryClient.setQueryData(['todos'], onMutateResult?.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 when they succeed:\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 addResults = await Promise.allSettled(\n *       todos.map((todo) => addMutation.mutateAsync(todo)),\n *     )\n *\n *     addResults.forEach((addResult, index) => {\n *       if (addResult.status === 'rejected') {\n *         console.error(`Failed to add \"${todos[index]}\":`, addResult.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+LA,SAAgB,YAMd,SACA,aAC+D;CAC/D,MAAM,SAASA,4BAAAA,eAAe,WAAW;CAEzC,MAAM,CAAC,aAAA,GAAYC,aAAAA,SAAAA,OAEf,IAAIC,qBAAAA,iBACF,QACA,OACF,CACJ;CAEA,CAAA,GAAA,aAAA,UAAA,OAAgB;EACd,SAAS,WAAW,OAAO;CAC7B,GAAG,CAAC,UAAU,OAAO,CAAC;CAEtB,MAAM,SAASC,cAAAA,sBAAAA,GACbC,aAAAA,YAAAA,EACG,kBACC,SAAS,UAAUC,qBAAAA,cAAc,WAAW,aAAa,CAAC,GAC5D,CAAC,QAAQ,CACX,SACM,SAAS,iBAAiB,CAClC;CAEA,MAAM,UAAA,GAASD,aAAAA,YAAAA,EAIX,GAAG,SAGA;EACH,SAAS,OAAO,KAAK,IAAkB,KAAK,EAAE,CAAC,CAAC,MAAME,qBAAAA,IAAI;CAC5D,GACA,CAAC,QAAQ,CACX;CAEA,IACE,OAAO,UAAA,GACPC,qBAAAA,iBAAAA,CAAiB,SAAS,QAAQ,cAAc,CAAC,OAAO,KAAK,CAAC,GAE9D,MAAM,OAAO;CAGf,OAAO;EAAE,GAAG;EAAQ;EAAQ,aAAa,OAAO;CAAO;AACzD"}

package/build/modern/useMutation.d.cts

@@ -5,14 +5,16 @@ import { DefaultError, QueryClient } from "@tanstack/query-core";
  * Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects.
  * `useMutation` is the hook for that.
  *
- * @see {@link mutationOptions} to share these options across multiple `useMutation` call sites.
+ * @see {@link mutationOptions} to share these options across multiple `useMutation` call sites, or to look
+ * the mutation up elsewhere via its `mutationKey` (e.g. with `useMutationState`).
  * @param options - The {@link UseMutationOptions} to use — everything you can pass to `useMutation`.
  * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
  * be used.
  * @returns `mutate`/`mutateAsync` also accept per-call `onSuccess`/`onError`/`onSettled` callbacks as a second
  * argument, useful for triggering call-site side effects (e.g. navigation) without coupling them to the shared
- * mutation definition. If you make multiple requests, `onSuccess` will fire only after the latest call you've
- * made.
+ * mutation definition. Hook-level callbacks (passed to `options`) fire for every mutation; per-call callbacks
+ * fire only for the latest call you've made, and only while the component is still mounted — unmounting before
+ * the mutation settles removes the subscription and prevents them from firing.
  *
  * @example
  * ```tsx
@@ -89,11 +91,11 @@ import { DefaultError, QueryClient } from "@tanstack/query-core";
  *         newTodo,
  *       ])
  *
- *       // Passed to `onError` as `context` if the mutation fails.
+ *       // Passed to `onError` as `onMutateResult` if the mutation fails.
  *       return { previousTodos }
  *     },
- *     onError: (_err, _newTodo, context) => {
- *       queryClient.setQueryData(['todos'], context?.previousTodos)
+ *     onError: (_err, _newTodo, onMutateResult) => {
+ *       queryClient.setQueryData(['todos'], onMutateResult?.previousTodos)
  *     },
  *     onSettled: () => {
  *       queryClient.invalidateQueries({ queryKey: ['todos'] })
@@ -108,7 +110,7 @@ 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:
+ * promise per call instead, so you can wait for all of them when they succeed:
  * ```tsx
  * import { useMutation, useQueryClient } from '@tanstack/preact-query'
  *
@@ -152,13 +154,13 @@ import { DefaultError, QueryClient } from "@tanstack/query-core";
  *   })
  *
  *   async function handleAddAll(todos: Array<string>) {
- *     const results = await Promise.allSettled(
+ *     const addResults = 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)
+ *     addResults.forEach((addResult, index) => {
+ *       if (addResult.status === 'rejected') {
+ *         console.error(`Failed to add "${todos[index]}":`, addResult.reason)
  *       }
  *     })
  *   }

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

@@ -1 +1 @@
-{"version":3,"file":"useMutation.d.cts","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"}
+{"version":3,"file":"useMutation.d.cts","names":[],"sources":["../../src/useMutation.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+LgB,YACd,iBACA,SAAS,cACT,mBACA,2BAEA,SAAS,mBAAmB,OAAO,QAAQ,YAAY,kBACvD,cAAc,cACb,kBAAkB,OAAO,QAAQ,YAAY"}

package/build/modern/useMutation.d.ts

@@ -5,14 +5,16 @@ import { DefaultError, QueryClient } from "@tanstack/query-core";
  * Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects.
  * `useMutation` is the hook for that.
  *
- * @see {@link mutationOptions} to share these options across multiple `useMutation` call sites.
+ * @see {@link mutationOptions} to share these options across multiple `useMutation` call sites, or to look
+ * the mutation up elsewhere via its `mutationKey` (e.g. with `useMutationState`).
  * @param options - The {@link UseMutationOptions} to use — everything you can pass to `useMutation`.
  * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
  * be used.
  * @returns `mutate`/`mutateAsync` also accept per-call `onSuccess`/`onError`/`onSettled` callbacks as a second
  * argument, useful for triggering call-site side effects (e.g. navigation) without coupling them to the shared
- * mutation definition. If you make multiple requests, `onSuccess` will fire only after the latest call you've
- * made.
+ * mutation definition. Hook-level callbacks (passed to `options`) fire for every mutation; per-call callbacks
+ * fire only for the latest call you've made, and only while the component is still mounted — unmounting before
+ * the mutation settles removes the subscription and prevents them from firing.
  *
  * @example
  * ```tsx
@@ -89,11 +91,11 @@ import { DefaultError, QueryClient } from "@tanstack/query-core";
  *         newTodo,
  *       ])
  *
- *       // Passed to `onError` as `context` if the mutation fails.
+ *       // Passed to `onError` as `onMutateResult` if the mutation fails.
  *       return { previousTodos }
  *     },
- *     onError: (_err, _newTodo, context) => {
- *       queryClient.setQueryData(['todos'], context?.previousTodos)
+ *     onError: (_err, _newTodo, onMutateResult) => {
+ *       queryClient.setQueryData(['todos'], onMutateResult?.previousTodos)
  *     },
  *     onSettled: () => {
  *       queryClient.invalidateQueries({ queryKey: ['todos'] })
@@ -108,7 +110,7 @@ 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:
+ * promise per call instead, so you can wait for all of them when they succeed:
  * ```tsx
  * import { useMutation, useQueryClient } from '@tanstack/preact-query'
  *
@@ -152,13 +154,13 @@ import { DefaultError, QueryClient } from "@tanstack/query-core";
  *   })
  *
  *   async function handleAddAll(todos: Array<string>) {
- *     const results = await Promise.allSettled(
+ *     const addResults = 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)
+ *     addResults.forEach((addResult, index) => {
+ *       if (addResult.status === 'rejected') {
+ *         console.error(`Failed to add "${todos[index]}":`, addResult.reason)
  *       }
  *     })
  *   }

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"useMutation.d.ts","names":[],"sources":["../../src/useMutation.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+LgB,YACd,iBACA,SAAS,cACT,mBACA,2BAEA,SAAS,mBAAmB,OAAO,QAAQ,YAAY,kBACvD,cAAc,cACb,kBAAkB,OAAO,QAAQ,YAAY"}

package/build/modern/useMutation.js

@@ -7,14 +7,16 @@ import { useCallback, useEffect, useState } from "preact/hooks";
 * Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects.
 * `useMutation` is the hook for that.
 *
-* @see {@link mutationOptions} to share these options across multiple `useMutation` call sites.
+* @see {@link mutationOptions} to share these options across multiple `useMutation` call sites, or to look
+* the mutation up elsewhere via its `mutationKey` (e.g. with `useMutationState`).
 * @param options - The {@link UseMutationOptions} to use — everything you can pass to `useMutation`.
 * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
 * be used.
 * @returns `mutate`/`mutateAsync` also accept per-call `onSuccess`/`onError`/`onSettled` callbacks as a second
 * argument, useful for triggering call-site side effects (e.g. navigation) without coupling them to the shared
-* mutation definition. If you make multiple requests, `onSuccess` will fire only after the latest call you've
-* made.
+* mutation definition. Hook-level callbacks (passed to `options`) fire for every mutation; per-call callbacks
+* fire only for the latest call you've made, and only while the component is still mounted — unmounting before
+* the mutation settles removes the subscription and prevents them from firing.
 *
 * @example
 * ```tsx
@@ -91,11 +93,11 @@ import { useCallback, useEffect, useState } from "preact/hooks";
 *         newTodo,
 *       ])
 *
-*       // Passed to `onError` as `context` if the mutation fails.
+*       // Passed to `onError` as `onMutateResult` if the mutation fails.
 *       return { previousTodos }
 *     },
-*     onError: (_err, _newTodo, context) => {
-*       queryClient.setQueryData(['todos'], context?.previousTodos)
+*     onError: (_err, _newTodo, onMutateResult) => {
+*       queryClient.setQueryData(['todos'], onMutateResult?.previousTodos)
 *     },
 *     onSettled: () => {
 *       queryClient.invalidateQueries({ queryKey: ['todos'] })
@@ -110,7 +112,7 @@ 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:
+* promise per call instead, so you can wait for all of them when they succeed:
 * ```tsx
 * import { useMutation, useQueryClient } from '@tanstack/preact-query'
 *
@@ -154,13 +156,13 @@ import { useCallback, useEffect, useState } from "preact/hooks";
 *   })
 *
 *   async function handleAddAll(todos: Array<string>) {
-*     const results = await Promise.allSettled(
+*     const addResults = 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)
+*     addResults.forEach((addResult, index) => {
+*       if (addResult.status === 'rejected') {
+*         console.error(`Failed to add "${todos[index]}":`, addResult.reason)
 *       }
 *     })
 *   }

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\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"}
+{"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, or to look\n * the mutation up elsewhere via its `mutationKey` (e.g. with `useMutationState`).\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. Hook-level callbacks (passed to `options`) fire for every mutation; per-call callbacks\n * fire only for the latest call you've made, and only while the component is still mounted — unmounting before\n * the mutation settles removes the subscription and prevents them from firing.\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 `onMutateResult` if the mutation fails.\n *       return { previousTodos }\n *     },\n *     onError: (_err, _newTodo, onMutateResult) => {\n *       queryClient.setQueryData(['todos'], onMutateResult?.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 when they succeed:\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 addResults = await Promise.allSettled(\n *       todos.map((todo) => addMutation.mutateAsync(todo)),\n *     )\n *\n *     addResults.forEach((addResult, index) => {\n *       if (addResult.status === 'rejected') {\n *         console.error(`Failed to add \"${todos[index]}\":`, addResult.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+LA,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"}