@tanstack/react-query 5.102.8 → 5.103.1

package/build/modern/useIsFetching.cjs

@@ -6,6 +6,42 @@ let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
 let _tanstack_query_core = require("@tanstack/query-core");
 //#region src/useIsFetching.ts
+/**
+* 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
+* be used.
+* @returns Will be the `number` of the queries that your application is currently loading or fetching in the
+* background.
+*
+* @example
+* ```tsx
+* import { useIsFetching } from '@tanstack/react-query'
+*
+* function PostsFetchingIndicator() {
+*   // How many queries matching the posts prefix are fetching?
+*   const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+*
+*   return isFetchingPosts ? <span>Refreshing posts...</span> : null
+* }
+* ```
+*
+* @example
+* A global loading indicator for any query fetching in the background, not just the ones on screen:
+* ```tsx
+* import { useIsFetching } from '@tanstack/react-query'
+*
+* function GlobalLoadingIndicator() {
+*   const isFetching = useIsFetching()
+*
+*   return isFetching ? (
+*     <div>Queries are fetching in the background...</div>
+*   ) : null
+* }
+* ```
+*/
 function useIsFetching(filters, queryClient) {
 	const client = require_QueryClientProvider.useQueryClient(queryClient);
 	const queryCache = client.getQueryCache();

package/build/modern/useIsFetching.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useIsFetching.cjs","names":["useQueryClient","React","notifyManager"],"sources":["../../src/useIsFetching.ts"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { notifyManager } from '@tanstack/query-core'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport type { QueryClient, QueryFilters } from '@tanstack/query-core'\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 React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) =>\n        queryCache.subscribe(notifyManager.batchCalls(onStoreChange)),\n      [queryCache],\n    ),\n    () => client.isFetching(filters),\n    () => client.isFetching(filters),\n  )\n}\n"],"mappings":";;;;;;;;AAOA,SAAgB,cACd,SACA,aACQ;CACR,MAAM,SAASA,4BAAAA,eAAe,WAAW;CACzC,MAAM,aAAa,OAAO,cAAc;CAExC,OAAOC,MAAM,qBACXA,MAAM,aACH,kBACC,WAAW,UAAUC,qBAAAA,cAAc,WAAW,aAAa,CAAC,GAC9D,CAAC,UAAU,CACb,SACM,OAAO,WAAW,OAAO,SACzB,OAAO,WAAW,OAAO,CACjC;AACF"}
+{"version":3,"file":"useIsFetching.cjs","names":["useQueryClient","React","notifyManager"],"sources":["../../src/useIsFetching.ts"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { notifyManager } from '@tanstack/query-core'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport type { QueryClient, QueryFilters } from '@tanstack/query-core'\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/react-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/react-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 React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) =>\n        queryCache.subscribe(notifyManager.batchCalls(onStoreChange)),\n      [queryCache],\n    ),\n    () => client.isFetching(filters),\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,MAAM,qBACXA,MAAM,aACH,kBACC,WAAW,UAAUC,qBAAAA,cAAc,WAAW,aAAa,CAAC,GAC9D,CAAC,UAAU,CACb,SACM,OAAO,WAAW,OAAO,SACzB,OAAO,WAAW,OAAO,CACjC;AACF"}

package/build/modern/useIsFetching.d.cts

@@ -1,5 +1,41 @@
 import { QueryClient, QueryFilters } from "@tanstack/query-core";
 //#region src/useIsFetching.d.ts
+/**
+ * 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
+ * be used.
+ * @returns Will be the `number` of the queries that your application is currently loading or fetching in the
+ * background.
+ *
+ * @example
+ * ```tsx
+ * import { useIsFetching } from '@tanstack/react-query'
+ *
+ * function PostsFetchingIndicator() {
+ *   // How many queries matching the posts prefix are fetching?
+ *   const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+ *
+ *   return isFetchingPosts ? <span>Refreshing posts...</span> : null
+ * }
+ * ```
+ *
+ * @example
+ * A global loading indicator for any query fetching in the background, not just the ones on screen:
+ * ```tsx
+ * import { useIsFetching } from '@tanstack/react-query'
+ *
+ * function GlobalLoadingIndicator() {
+ *   const isFetching = useIsFetching()
+ *
+ *   return isFetching ? (
+ *     <div>Queries are fetching in the background...</div>
+ *   ) : null
+ * }
+ * ```
+ */
 declare function useIsFetching(filters?: QueryFilters, queryClient?: QueryClient): number;
 //#endregion
 export { useIsFetching };

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

@@ -1 +1 @@
-{"version":3,"file":"useIsFetching.d.cts","names":[],"sources":["../../src/useIsFetching.ts"],"mappings":";;iBAOgB,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,5 +1,41 @@
 import { QueryClient, QueryFilters } from "@tanstack/query-core";
 //#region src/useIsFetching.d.ts
+/**
+ * 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
+ * be used.
+ * @returns Will be the `number` of the queries that your application is currently loading or fetching in the
+ * background.
+ *
+ * @example
+ * ```tsx
+ * import { useIsFetching } from '@tanstack/react-query'
+ *
+ * function PostsFetchingIndicator() {
+ *   // How many queries matching the posts prefix are fetching?
+ *   const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+ *
+ *   return isFetchingPosts ? <span>Refreshing posts...</span> : null
+ * }
+ * ```
+ *
+ * @example
+ * A global loading indicator for any query fetching in the background, not just the ones on screen:
+ * ```tsx
+ * import { useIsFetching } from '@tanstack/react-query'
+ *
+ * function GlobalLoadingIndicator() {
+ *   const isFetching = useIsFetching()
+ *
+ *   return isFetching ? (
+ *     <div>Queries are fetching in the background...</div>
+ *   ) : null
+ * }
+ * ```
+ */
 declare function useIsFetching(filters?: QueryFilters, queryClient?: QueryClient): number;
 //#endregion
 export { useIsFetching };

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

@@ -1 +1 @@
-{"version":3,"file":"useIsFetching.d.ts","names":[],"sources":["../../src/useIsFetching.ts"],"mappings":";;iBAOgB,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

@@ -3,6 +3,42 @@ import { useQueryClient } from "./QueryClientProvider.js";
 import * as React from "react";
 import { notifyManager } from "@tanstack/query-core";
 //#region src/useIsFetching.ts
+/**
+* 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
+* be used.
+* @returns Will be the `number` of the queries that your application is currently loading or fetching in the
+* background.
+*
+* @example
+* ```tsx
+* import { useIsFetching } from '@tanstack/react-query'
+*
+* function PostsFetchingIndicator() {
+*   // How many queries matching the posts prefix are fetching?
+*   const isFetchingPosts = useIsFetching({ queryKey: ['posts'] })
+*
+*   return isFetchingPosts ? <span>Refreshing posts...</span> : null
+* }
+* ```
+*
+* @example
+* A global loading indicator for any query fetching in the background, not just the ones on screen:
+* ```tsx
+* import { useIsFetching } from '@tanstack/react-query'
+*
+* function GlobalLoadingIndicator() {
+*   const isFetching = useIsFetching()
+*
+*   return isFetching ? (
+*     <div>Queries are fetching in the background...</div>
+*   ) : null
+* }
+* ```
+*/
 function useIsFetching(filters, queryClient) {
 	const client = useQueryClient(queryClient);
 	const queryCache = client.getQueryCache();

package/build/modern/useIsFetching.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIsFetching.js","names":[],"sources":["../../src/useIsFetching.ts"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { notifyManager } from '@tanstack/query-core'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport type { QueryClient, QueryFilters } from '@tanstack/query-core'\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 React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) =>\n        queryCache.subscribe(notifyManager.batchCalls(onStoreChange)),\n      [queryCache],\n    ),\n    () => client.isFetching(filters),\n    () => client.isFetching(filters),\n  )\n}\n"],"mappings":";;;;;AAOA,SAAgB,cACd,SACA,aACQ;CACR,MAAM,SAAS,eAAe,WAAW;CACzC,MAAM,aAAa,OAAO,cAAc;CAExC,OAAO,MAAM,qBACX,MAAM,aACH,kBACC,WAAW,UAAU,cAAc,WAAW,aAAa,CAAC,GAC9D,CAAC,UAAU,CACb,SACM,OAAO,WAAW,OAAO,SACzB,OAAO,WAAW,OAAO,CACjC;AACF"}
+{"version":3,"file":"useIsFetching.js","names":[],"sources":["../../src/useIsFetching.ts"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { notifyManager } from '@tanstack/query-core'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport type { QueryClient, QueryFilters } from '@tanstack/query-core'\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/react-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/react-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 React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) =>\n        queryCache.subscribe(notifyManager.batchCalls(onStoreChange)),\n      [queryCache],\n    ),\n    () => client.isFetching(filters),\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,MAAM,qBACX,MAAM,aACH,kBACC,WAAW,UAAU,cAAc,WAAW,aAAa,CAAC,GAC9D,CAAC,UAAU,CACb,SACM,OAAO,WAAW,OAAO,SACzB,OAAO,WAAW,OAAO,CACjC;AACF"}

package/build/modern/useMutation.cjs

@@ -6,6 +6,178 @@ let react = require("react");
 react = require_rolldown_runtime.__toESM(react, 1);
 let _tanstack_query_core = require("@tanstack/query-core");
 //#region src/useMutation.ts
+/**
+* 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, 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. 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
+* import { useMutation, useQueryClient } from '@tanstack/react-query'
+*
+* function AddTodo() {
+*   const queryClient = useQueryClient()
+*
+*   const addMutation = useMutation({
+*     mutationFn: addTodo,
+*     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+*   })
+*
+*   return (
+*     <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/react-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>
+*   )
+* }
+* ```
+*
+* @example
+* Optimistic update via `onMutate`, rolling back on `onError`:
+* ```tsx
+* import { useMutation, useQueryClient } from '@tanstack/react-query'
+*
+* function AddTodo() {
+*   const queryClient = useQueryClient()
+*
+*   const addMutation = useMutation({
+*     mutationFn: addTodo,
+*     onMutate: async (newTodo) => {
+*       await queryClient.cancelQueries({ queryKey: ['todos'] })
+*       const previousTodos = queryClient.getQueryData<Array<string>>(['todos'])
+*
+*       queryClient.setQueryData<Array<string>>(['todos'], (old) => [
+*         ...(old ?? []),
+*         newTodo,
+*       ])
+*
+*       // Passed to `onError` as `onMutateResult` if the mutation fails.
+*       return { previousTodos }
+*     },
+*     onError: (_err, _newTodo, onMutateResult) => {
+*       queryClient.setQueryData(['todos'], onMutateResult?.previousTodos)
+*     },
+*     onSettled: () => {
+*       queryClient.invalidateQueries({ queryKey: ['todos'] })
+*     },
+*   })
+*
+*   return (
+*     <button onClick={() => addMutation.mutate('Item')}>Add</button>
+*   )
+* }
+* ```
+*
+* @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 when they succeed:
+* ```tsx
+* import { useMutation, useQueryClient } from '@tanstack/react-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/react-query'
+*
+* function AddTodos() {
+*   const queryClient = useQueryClient()
+*
+*   const addMutation = useMutation({
+*     mutationFn: addTodo,
+*     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+*   })
+*
+*   async function handleAddAll(todos: Array<string>) {
+*     const addResults = await Promise.allSettled(
+*       todos.map((todo) => addMutation.mutateAsync(todo)),
+*     )
+*
+*     addResults.forEach((addResult, index) => {
+*       if (addResult.status === 'rejected') {
+*         console.error(`Failed to add "${todos[index]}":`, addResult.reason)
+*       }
+*     })
+*   }
+*
+*   return (
+*     <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>
+*       Add all
+*     </button>
+*   )
+* }
+* ```
+*/
 function useMutation(options, queryClient) {
 	const client = require_QueryClientProvider.useQueryClient(queryClient);
 	const [observer] = react.useState(() => new _tanstack_query_core.MutationObserver(client, options));

package/build/modern/useMutation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMutation.cjs","names":["useQueryClient","React","MutationObserver","notifyManager","noop","shouldThrowError"],"sources":["../../src/useMutation.ts"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport {\n  MutationObserver,\n  noop,\n  notifyManager,\n  shouldThrowError,\n} from '@tanstack/query-core'\nimport { useQueryClient } from './QueryClientProvider'\nimport type {\n  UseMutateFunction,\n  UseMutationOptions,\n  UseMutationResult,\n} from './types'\nimport type { DefaultError, QueryClient } from '@tanstack/query-core'\n\n// HOOK\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] = React.useState(\n    () =>\n      new MutationObserver<TData, TError, TVariables, TOnMutateResult>(\n        client,\n        options,\n      ),\n  )\n\n  React.useEffect(() => {\n    observer.setOptions(options)\n  }, [observer, options])\n\n  const result = React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) =>\n        observer.subscribe(notifyManager.batchCalls(onStoreChange)),\n      [observer],\n    ),\n    () => observer.getCurrentResult(),\n    () => observer.getCurrentResult(),\n  )\n\n  const mutate = React.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":";;;;;;;;AAkBA,SAAgB,YAMd,SACA,aAC+D;CAC/D,MAAM,SAASA,4BAAAA,eAAe,WAAW;CAEzC,MAAM,CAAC,YAAYC,MAAM,eAErB,IAAIC,qBAAAA,iBACF,QACA,OACF,CACJ;CAEA,MAAM,gBAAgB;EACpB,SAAS,WAAW,OAAO;CAC7B,GAAG,CAAC,UAAU,OAAO,CAAC;CAEtB,MAAM,SAASD,MAAM,qBACnBA,MAAM,aACH,kBACC,SAAS,UAAUE,qBAAAA,cAAc,WAAW,aAAa,CAAC,GAC5D,CAAC,QAAQ,CACX,SACM,SAAS,iBAAiB,SAC1B,SAAS,iBAAiB,CAClC;CAEA,MAAM,SAASF,MAAM,aAIjB,GAAG,SAGA;EACH,SAAS,OAAO,KAAK,IAAkB,KAAK,EAAE,CAAC,CAAC,MAAMG,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","React","MutationObserver","notifyManager","noop","shouldThrowError"],"sources":["../../src/useMutation.ts"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport {\n  MutationObserver,\n  noop,\n  notifyManager,\n  shouldThrowError,\n} from '@tanstack/query-core'\nimport { useQueryClient } from './QueryClientProvider'\nimport type {\n  UseMutateFunction,\n  UseMutationOptions,\n  UseMutationResult,\n} from './types'\nimport type { DefaultError, QueryClient } from '@tanstack/query-core'\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/react-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/react-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/react-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/react-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/react-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] = React.useState(\n    () =>\n      new MutationObserver<TData, TError, TVariables, TOnMutateResult>(\n        client,\n        options,\n      ),\n  )\n\n  React.useEffect(() => {\n    observer.setOptions(options)\n  }, [observer, options])\n\n  const result = React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) =>\n        observer.subscribe(notifyManager.batchCalls(onStoreChange)),\n      [observer],\n    ),\n    () => observer.getCurrentResult(),\n    () => observer.getCurrentResult(),\n  )\n\n  const mutate = React.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8LA,SAAgB,YAMd,SACA,aAC+D;CAC/D,MAAM,SAASA,4BAAAA,eAAe,WAAW;CAEzC,MAAM,CAAC,YAAYC,MAAM,eAErB,IAAIC,qBAAAA,iBACF,QACA,OACF,CACJ;CAEA,MAAM,gBAAgB;EACpB,SAAS,WAAW,OAAO;CAC7B,GAAG,CAAC,UAAU,OAAO,CAAC;CAEtB,MAAM,SAASD,MAAM,qBACnBA,MAAM,aACH,kBACC,SAAS,UAAUE,qBAAAA,cAAc,WAAW,aAAa,CAAC,GAC5D,CAAC,QAAQ,CACX,SACM,SAAS,iBAAiB,SAC1B,SAAS,iBAAiB,CAClC;CAEA,MAAM,SAASF,MAAM,aAIjB,GAAG,SAGA;EACH,SAAS,OAAO,KAAK,IAAkB,KAAK,EAAE,CAAC,CAAC,MAAMG,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

@@ -1,6 +1,178 @@
 import { UseMutationOptions, UseMutationResult } from "./types.cjs";
 import { DefaultError, QueryClient } from "@tanstack/query-core";
 //#region src/useMutation.d.ts
+/**
+ * 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, 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. 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
+ * import { useMutation, useQueryClient } from '@tanstack/react-query'
+ *
+ * function AddTodo() {
+ *   const queryClient = useQueryClient()
+ *
+ *   const addMutation = useMutation({
+ *     mutationFn: addTodo,
+ *     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+ *   })
+ *
+ *   return (
+ *     <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/react-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>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * Optimistic update via `onMutate`, rolling back on `onError`:
+ * ```tsx
+ * import { useMutation, useQueryClient } from '@tanstack/react-query'
+ *
+ * function AddTodo() {
+ *   const queryClient = useQueryClient()
+ *
+ *   const addMutation = useMutation({
+ *     mutationFn: addTodo,
+ *     onMutate: async (newTodo) => {
+ *       await queryClient.cancelQueries({ queryKey: ['todos'] })
+ *       const previousTodos = queryClient.getQueryData<Array<string>>(['todos'])
+ *
+ *       queryClient.setQueryData<Array<string>>(['todos'], (old) => [
+ *         ...(old ?? []),
+ *         newTodo,
+ *       ])
+ *
+ *       // Passed to `onError` as `onMutateResult` if the mutation fails.
+ *       return { previousTodos }
+ *     },
+ *     onError: (_err, _newTodo, onMutateResult) => {
+ *       queryClient.setQueryData(['todos'], onMutateResult?.previousTodos)
+ *     },
+ *     onSettled: () => {
+ *       queryClient.invalidateQueries({ queryKey: ['todos'] })
+ *     },
+ *   })
+ *
+ *   return (
+ *     <button onClick={() => addMutation.mutate('Item')}>Add</button>
+ *   )
+ * }
+ * ```
+ *
+ * @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 when they succeed:
+ * ```tsx
+ * import { useMutation, useQueryClient } from '@tanstack/react-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/react-query'
+ *
+ * function AddTodos() {
+ *   const queryClient = useQueryClient()
+ *
+ *   const addMutation = useMutation({
+ *     mutationFn: addTodo,
+ *     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
+ *   })
+ *
+ *   async function handleAddAll(todos: Array<string>) {
+ *     const addResults = await Promise.allSettled(
+ *       todos.map((todo) => addMutation.mutateAsync(todo)),
+ *     )
+ *
+ *     addResults.forEach((addResult, index) => {
+ *       if (addResult.status === 'rejected') {
+ *         console.error(`Failed to add "${todos[index]}":`, addResult.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
 export { useMutation };

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

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