@tanstack/preact-query 5.102.8 → 5.103.1

package/build/modern/useMutationState.cjs

@@ -5,22 +5,24 @@ let _tanstack_query_core = require("@tanstack/query-core");
 let preact_hooks = require("preact/hooks");
 //#region src/useMutationState.ts
 /**
-* `useIsMutating` is an optional hook that returns the `number` of mutations that your application is fetching
+* The `useIsMutating` hook returns the `number` of mutations that your application currently has `pending`
 * (useful for app-wide loading indicators).
 *
 * @param filters - The {@link MutationFilters} to narrow down the matched mutations.
 * @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 mutations that your application is currently fetching.
+* @returns Will be the `number` of the mutations that your application currently has `pending`.
 *
 * @example
 * ```tsx
 * import { useIsMutating } from '@tanstack/preact-query'
 *
-* // How many mutations are fetching?
-* const isMutating = useIsMutating()
-* // How many mutations matching the posts prefix are fetching?
-* const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
+* function PostsMutatingIndicator() {
+*   // How many mutations matching the posts prefix are in progress?
+*   const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
+*
+*   return isMutatingPosts ? <span>Saving posts...</span> : null
+* }
 * ```
 */
 function useIsMutating(filters, queryClient) {
@@ -49,10 +51,14 @@ function getResult(mutationCache, options) {
 * ```tsx
 * import { useMutationState } from '@tanstack/preact-query'
 *
-* const variables = useMutationState({
-*   filters: { status: 'pending' },
-*   select: (mutation) => mutation.state.variables,
-* })
+* function PendingPosts() {
+*   const pendingVariables = useMutationState({
+*     filters: { status: 'pending' },
+*     select: (mutation) => mutation.state.variables,
+*   })
+*
+*   return <>{pendingVariables.length} posts saving...</>
+* }
 * ```
 *
 * @example
@@ -62,30 +68,44 @@ function getResult(mutationCache, options) {
 *
 * const mutationKey = ['posts']
 *
-* // Some mutation that we want to get the state for
-* const mutation = useMutation({
-*   mutationKey,
-*   mutationFn: createPosts,
-* })
-*
-* const data = useMutationState({
-*   // this mutation key needs to match the mutation key of the given mutation (see above)
-*   filters: { mutationKey },
-*   select: (mutation) => mutation.state.data,
-* })
+* function Posts() {
+*   // Some mutation that we want to get the state for
+*   const mutation = useMutation({
+*     mutationKey,
+*     mutationFn: createPosts,
+*   })
+*
+*   const savedPosts = useMutationState({
+*     // this mutation key needs to match the mutation key of the given mutation (see above)
+*     filters: { mutationKey, status: 'success' },
+*     select: (mutation) => mutation.state.data,
+*   })
+*
+*   return (
+*     <button onClick={() => mutation.mutate(['New Post'])}>
+*       Create post ({savedPosts.length} saved so far)
+*     </button>
+*   )
+* }
 * ```
 *
 * @example
-* Access the latest mutation data via the `mutationKey`. Each invocation of `mutate` adds a new entry to the
-* mutation cache for `gcTime` milliseconds — check the last item that `useMutationState` returns to get the
-* latest invocation:
+* Access the latest successful mutation data via the `mutationKey`. Each invocation of `mutate` adds a new
+* entry to the mutation cache for `gcTime` milliseconds — with the `status: 'success'` filter below, check the
+* last item that `useMutationState` returns to get the latest successful invocation:
 * ```tsx
-* const data = useMutationState({
-*   filters: { mutationKey: ['posts'] },
-*   select: (mutation) => mutation.state.data,
-* })
+* import { useMutationState } from '@tanstack/preact-query'
+*
+* function LatestPost() {
+*   const savedPosts = useMutationState({
+*     filters: { mutationKey: ['posts'], status: 'success' },
+*     select: (mutation) => mutation.state.data,
+*   })
+*
+*   const latestSavedPost = savedPosts[savedPosts.length - 1]
 *
-* const latest = data[data.length - 1]
+*   return <>{latestSavedPost ? 'Saved' : 'Nothing saved yet'}</>
+* }
 * ```
 */
 function useMutationState(options = {}, queryClient) {

package/build/modern/useMutationState.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useMutationState.cjs","names":["useQueryClient","useRef","useSyncExternalStore","useCallback","replaceEqualDeep"],"sources":["../../src/useMutationState.ts"],"sourcesContent":["import { notifyManager, replaceEqualDeep } from '@tanstack/query-core'\nimport type {\n  Mutation,\n  MutationCache,\n  MutationFilters,\n  MutationState,\n  QueryClient,\n} from '@tanstack/query-core'\nimport { useCallback, useEffect, useRef } from 'preact/hooks'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport { useSyncExternalStore } from './utils'\n\n/**\n * `useIsMutating` is an optional hook that returns the `number` of mutations that your application is fetching\n * (useful for app-wide loading indicators).\n *\n * @param filters - The {@link MutationFilters} to narrow down the matched mutations.\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 mutations that your application is currently fetching.\n *\n * @example\n * ```tsx\n * import { useIsMutating } from '@tanstack/preact-query'\n *\n * // How many mutations are fetching?\n * const isMutating = useIsMutating()\n * // How many mutations matching the posts prefix are fetching?\n * const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })\n * ```\n */\nexport function useIsMutating(\n  filters?: MutationFilters,\n  queryClient?: QueryClient,\n): number {\n  const client = useQueryClient(queryClient)\n  return useMutationState(\n    { filters: { ...filters, status: 'pending' } },\n    client,\n  ).length\n}\n\ntype MutationTypeFromResult<TResult> = [TResult] extends [\n  MutationState<\n    infer TData,\n    infer TError,\n    infer TVariables,\n    infer TOnMutateResult\n  >,\n]\n  ? Mutation<TData, TError, TVariables, TOnMutateResult>\n  : Mutation\n\ntype MutationStateOptions<\n  TResult = MutationState,\n  TMutation extends Mutation<any, any, any, any> =\n    MutationTypeFromResult<TResult>,\n> = {\n  filters?: MutationFilters\n  select?: (mutation: TMutation) => TResult\n}\n\nfunction getResult<\n  TResult = MutationState,\n  TMutation extends Mutation<any, any, any, any> =\n    MutationTypeFromResult<TResult>,\n>(\n  mutationCache: MutationCache,\n  options: MutationStateOptions<TResult, TMutation>,\n): Array<TResult> {\n  return mutationCache\n    .findAll(options.filters)\n    .map(\n      (mutation): TResult =>\n        (options.select\n          ? options.select(mutation as TMutation)\n          : mutation.state) as TResult,\n    )\n}\n\n/**\n * `useMutationState` is a hook that gives you access to all mutations in the `MutationCache`. You can pass\n * `filters` ({@link MutationFilters}) to narrow down your mutations, and `select` to transform the mutation\n * state.\n *\n * @param options - The `filters` to narrow down matched mutations, and an optional `select` to transform the\n * mutation state.\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 an Array of whatever `select` returns for each matching mutation.\n *\n * @example\n * Get all variables of all running mutations:\n * ```tsx\n * import { useMutationState } from '@tanstack/preact-query'\n *\n * const variables = useMutationState({\n *   filters: { status: 'pending' },\n *   select: (mutation) => mutation.state.variables,\n * })\n * ```\n *\n * @example\n * Get all data for specific mutations via the `mutationKey`:\n * ```tsx\n * import { useMutation, useMutationState } from '@tanstack/preact-query'\n *\n * const mutationKey = ['posts']\n *\n * // Some mutation that we want to get the state for\n * const mutation = useMutation({\n *   mutationKey,\n *   mutationFn: createPosts,\n * })\n *\n * const data = useMutationState({\n *   // this mutation key needs to match the mutation key of the given mutation (see above)\n *   filters: { mutationKey },\n *   select: (mutation) => mutation.state.data,\n * })\n * ```\n *\n * @example\n * Access the latest mutation data via the `mutationKey`. Each invocation of `mutate` adds a new entry to the\n * mutation cache for `gcTime` milliseconds — check the last item that `useMutationState` returns to get the\n * latest invocation:\n * ```tsx\n * const data = useMutationState({\n *   filters: { mutationKey: ['posts'] },\n *   select: (mutation) => mutation.state.data,\n * })\n *\n * const latest = data[data.length - 1]\n * ```\n */\nexport function useMutationState<\n  TResult = MutationState,\n  TMutation extends Mutation<any, any, any, any> =\n    MutationTypeFromResult<TResult>,\n>(\n  options: MutationStateOptions<TResult, TMutation> = {},\n  queryClient?: QueryClient,\n): Array<TResult> {\n  const mutationCache = useQueryClient(queryClient).getMutationCache()\n  const optionsRef = useRef(options)\n  const result = useRef<Array<TResult>>(null)\n  if (result.current === null) {\n    result.current = getResult(mutationCache, options)\n  }\n\n  useEffect(() => {\n    optionsRef.current = options\n  })\n\n  return useSyncExternalStore(\n    useCallback(\n      (onStoreChange) =>\n        mutationCache.subscribe(() => {\n          const nextResult = replaceEqualDeep(\n            result.current,\n            getResult(mutationCache, optionsRef.current),\n          )\n          if (result.current !== nextResult) {\n            result.current = nextResult\n            notifyManager.schedule(onStoreChange)\n          }\n        }),\n      [mutationCache],\n    ),\n    () => result.current,\n  )!\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAgB,cACd,SACA,aACQ;CACR,MAAM,SAASA,4BAAAA,eAAe,WAAW;CACzC,OAAO,iBACL,EAAE,SAAS;EAAE,GAAG;EAAS,QAAQ;CAAU,EAAE,GAC7C,MACF,CAAC,CAAC;AACJ;AAsBA,SAAS,UAKP,eACA,SACgB;CAChB,OAAO,cACJ,QAAQ,QAAQ,OAAO,CAAC,CACxB,KACE,aACE,QAAQ,SACL,QAAQ,OAAO,QAAqB,IACpC,SAAS,KACjB;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,iBAKd,UAAoD,CAAC,GACrD,aACgB;CAChB,MAAM,gBAAgBA,4BAAAA,eAAe,WAAW,CAAC,CAAC,iBAAiB;CACnE,MAAM,cAAA,GAAaC,aAAAA,OAAAA,CAAO,OAAO;CACjC,MAAM,UAAA,GAASA,aAAAA,OAAAA,CAAuB,IAAI;CAC1C,IAAI,OAAO,YAAY,MACrB,OAAO,UAAU,UAAU,eAAe,OAAO;CAGnD,CAAA,GAAA,aAAA,UAAA,OAAgB;EACd,WAAW,UAAU;CACvB,CAAC;CAED,OAAOC,cAAAA,sBAAAA,GACLC,aAAAA,YAAAA,EACG,kBACC,cAAc,gBAAgB;EAC5B,MAAM,cAAA,GAAaC,qBAAAA,iBAAAA,CACjB,OAAO,SACP,UAAU,eAAe,WAAW,OAAO,CAC7C;EACA,IAAI,OAAO,YAAY,YAAY;GACjC,OAAO,UAAU;GACjB,qBAAA,cAAc,SAAS,aAAa;EACtC;CACF,CAAC,GACH,CAAC,aAAa,CAChB,SACM,OAAO,OACf;AACF"}
+{"version":3,"file":"useMutationState.cjs","names":["useQueryClient","useRef","useSyncExternalStore","useCallback","replaceEqualDeep"],"sources":["../../src/useMutationState.ts"],"sourcesContent":["import { notifyManager, replaceEqualDeep } from '@tanstack/query-core'\nimport type {\n  Mutation,\n  MutationCache,\n  MutationFilters,\n  MutationState,\n  QueryClient,\n} from '@tanstack/query-core'\nimport { useCallback, useEffect, useRef } from 'preact/hooks'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport { useSyncExternalStore } from './utils'\n\n/**\n * The `useIsMutating` hook returns the `number` of mutations that your application currently has `pending`\n * (useful for app-wide loading indicators).\n *\n * @param filters - The {@link MutationFilters} to narrow down the matched mutations.\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 mutations that your application currently has `pending`.\n *\n * @example\n * ```tsx\n * import { useIsMutating } from '@tanstack/preact-query'\n *\n * function PostsMutatingIndicator() {\n *   // How many mutations matching the posts prefix are in progress?\n *   const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })\n *\n *   return isMutatingPosts ? <span>Saving posts...</span> : null\n * }\n * ```\n */\nexport function useIsMutating(\n  filters?: MutationFilters,\n  queryClient?: QueryClient,\n): number {\n  const client = useQueryClient(queryClient)\n  return useMutationState(\n    { filters: { ...filters, status: 'pending' } },\n    client,\n  ).length\n}\n\ntype MutationTypeFromResult<TResult> = [TResult] extends [\n  MutationState<\n    infer TData,\n    infer TError,\n    infer TVariables,\n    infer TOnMutateResult\n  >,\n]\n  ? Mutation<TData, TError, TVariables, TOnMutateResult>\n  : Mutation\n\ntype MutationStateOptions<\n  TResult = MutationState,\n  TMutation extends Mutation<any, any, any, any> =\n    MutationTypeFromResult<TResult>,\n> = {\n  filters?: MutationFilters\n  select?: (mutation: TMutation) => TResult\n}\n\nfunction getResult<\n  TResult = MutationState,\n  TMutation extends Mutation<any, any, any, any> =\n    MutationTypeFromResult<TResult>,\n>(\n  mutationCache: MutationCache,\n  options: MutationStateOptions<TResult, TMutation>,\n): Array<TResult> {\n  return mutationCache\n    .findAll(options.filters)\n    .map(\n      (mutation): TResult =>\n        (options.select\n          ? options.select(mutation as TMutation)\n          : mutation.state) as TResult,\n    )\n}\n\n/**\n * `useMutationState` is a hook that gives you access to all mutations in the `MutationCache`. You can pass\n * `filters` ({@link MutationFilters}) to narrow down your mutations, and `select` to transform the mutation\n * state.\n *\n * @param options - The `filters` to narrow down matched mutations, and an optional `select` to transform the\n * mutation state.\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 an Array of whatever `select` returns for each matching mutation.\n *\n * @example\n * Get all variables of all running mutations:\n * ```tsx\n * import { useMutationState } from '@tanstack/preact-query'\n *\n * function PendingPosts() {\n *   const pendingVariables = useMutationState({\n *     filters: { status: 'pending' },\n *     select: (mutation) => mutation.state.variables,\n *   })\n *\n *   return <>{pendingVariables.length} posts saving...</>\n * }\n * ```\n *\n * @example\n * Get all data for specific mutations via the `mutationKey`:\n * ```tsx\n * import { useMutation, useMutationState } from '@tanstack/preact-query'\n *\n * const mutationKey = ['posts']\n *\n * function Posts() {\n *   // Some mutation that we want to get the state for\n *   const mutation = useMutation({\n *     mutationKey,\n *     mutationFn: createPosts,\n *   })\n *\n *   const savedPosts = useMutationState({\n *     // this mutation key needs to match the mutation key of the given mutation (see above)\n *     filters: { mutationKey, status: 'success' },\n *     select: (mutation) => mutation.state.data,\n *   })\n *\n *   return (\n *     <button onClick={() => mutation.mutate(['New Post'])}>\n *       Create post ({savedPosts.length} saved so far)\n *     </button>\n *   )\n * }\n * ```\n *\n * @example\n * Access the latest successful mutation data via the `mutationKey`. Each invocation of `mutate` adds a new\n * entry to the mutation cache for `gcTime` milliseconds — with the `status: 'success'` filter below, check the\n * last item that `useMutationState` returns to get the latest successful invocation:\n * ```tsx\n * import { useMutationState } from '@tanstack/preact-query'\n *\n * function LatestPost() {\n *   const savedPosts = useMutationState({\n *     filters: { mutationKey: ['posts'], status: 'success' },\n *     select: (mutation) => mutation.state.data,\n *   })\n *\n *   const latestSavedPost = savedPosts[savedPosts.length - 1]\n *\n *   return <>{latestSavedPost ? 'Saved' : 'Nothing saved yet'}</>\n * }\n * ```\n */\nexport function useMutationState<\n  TResult = MutationState,\n  TMutation extends Mutation<any, any, any, any> =\n    MutationTypeFromResult<TResult>,\n>(\n  options: MutationStateOptions<TResult, TMutation> = {},\n  queryClient?: QueryClient,\n): Array<TResult> {\n  const mutationCache = useQueryClient(queryClient).getMutationCache()\n  const optionsRef = useRef(options)\n  const result = useRef<Array<TResult>>(null)\n  if (result.current === null) {\n    result.current = getResult(mutationCache, options)\n  }\n\n  useEffect(() => {\n    optionsRef.current = options\n  })\n\n  return useSyncExternalStore(\n    useCallback(\n      (onStoreChange) =>\n        mutationCache.subscribe(() => {\n          const nextResult = replaceEqualDeep(\n            result.current,\n            getResult(mutationCache, optionsRef.current),\n          )\n          if (result.current !== nextResult) {\n            result.current = nextResult\n            notifyManager.schedule(onStoreChange)\n          }\n        }),\n      [mutationCache],\n    ),\n    () => result.current,\n  )!\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,cACd,SACA,aACQ;CACR,MAAM,SAASA,4BAAAA,eAAe,WAAW;CACzC,OAAO,iBACL,EAAE,SAAS;EAAE,GAAG;EAAS,QAAQ;CAAU,EAAE,GAC7C,MACF,CAAC,CAAC;AACJ;AAsBA,SAAS,UAKP,eACA,SACgB;CAChB,OAAO,cACJ,QAAQ,QAAQ,OAAO,CAAC,CACxB,KACE,aACE,QAAQ,SACL,QAAQ,OAAO,QAAqB,IACpC,SAAS,KACjB;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,SAAgB,iBAKd,UAAoD,CAAC,GACrD,aACgB;CAChB,MAAM,gBAAgBA,4BAAAA,eAAe,WAAW,CAAC,CAAC,iBAAiB;CACnE,MAAM,cAAA,GAAaC,aAAAA,OAAAA,CAAO,OAAO;CACjC,MAAM,UAAA,GAASA,aAAAA,OAAAA,CAAuB,IAAI;CAC1C,IAAI,OAAO,YAAY,MACrB,OAAO,UAAU,UAAU,eAAe,OAAO;CAGnD,CAAA,GAAA,aAAA,UAAA,OAAgB;EACd,WAAW,UAAU;CACvB,CAAC;CAED,OAAOC,cAAAA,sBAAAA,GACLC,aAAAA,YAAAA,EACG,kBACC,cAAc,gBAAgB;EAC5B,MAAM,cAAA,GAAaC,qBAAAA,iBAAAA,CACjB,OAAO,SACP,UAAU,eAAe,WAAW,OAAO,CAC7C;EACA,IAAI,OAAO,YAAY,YAAY;GACjC,OAAO,UAAU;GACjB,qBAAA,cAAc,SAAS,aAAa;EACtC;CACF,CAAC,GACH,CAAC,aAAa,CAChB,SACM,OAAO,OACf;AACF"}

package/build/modern/useMutationState.d.cts

@@ -1,22 +1,24 @@
 import { Mutation, MutationFilters, MutationState, QueryClient } from "@tanstack/query-core";
 //#region src/useMutationState.d.ts
 /**
- * `useIsMutating` is an optional hook that returns the `number` of mutations that your application is fetching
+ * The `useIsMutating` hook returns the `number` of mutations that your application currently has `pending`
  * (useful for app-wide loading indicators).
  *
  * @param filters - The {@link MutationFilters} to narrow down the matched mutations.
  * @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 mutations that your application is currently fetching.
+ * @returns Will be the `number` of the mutations that your application currently has `pending`.
  *
  * @example
  * ```tsx
  * import { useIsMutating } from '@tanstack/preact-query'
  *
- * // How many mutations are fetching?
- * const isMutating = useIsMutating()
- * // How many mutations matching the posts prefix are fetching?
- * const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
+ * function PostsMutatingIndicator() {
+ *   // How many mutations matching the posts prefix are in progress?
+ *   const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
+ *
+ *   return isMutatingPosts ? <span>Saving posts...</span> : null
+ * }
  * ```
  */
 declare function useIsMutating(filters?: MutationFilters, queryClient?: QueryClient): number;
@@ -41,10 +43,14 @@ type MutationStateOptions<TResult = MutationState, TMutation extends Mutation<an
  * ```tsx
  * import { useMutationState } from '@tanstack/preact-query'
  *
- * const variables = useMutationState({
- *   filters: { status: 'pending' },
- *   select: (mutation) => mutation.state.variables,
- * })
+ * function PendingPosts() {
+ *   const pendingVariables = useMutationState({
+ *     filters: { status: 'pending' },
+ *     select: (mutation) => mutation.state.variables,
+ *   })
+ *
+ *   return <>{pendingVariables.length} posts saving...</>
+ * }
  * ```
  *
  * @example
@@ -54,30 +60,44 @@ type MutationStateOptions<TResult = MutationState, TMutation extends Mutation<an
  *
  * const mutationKey = ['posts']
  *
- * // Some mutation that we want to get the state for
- * const mutation = useMutation({
- *   mutationKey,
- *   mutationFn: createPosts,
- * })
- *
- * const data = useMutationState({
- *   // this mutation key needs to match the mutation key of the given mutation (see above)
- *   filters: { mutationKey },
- *   select: (mutation) => mutation.state.data,
- * })
+ * function Posts() {
+ *   // Some mutation that we want to get the state for
+ *   const mutation = useMutation({
+ *     mutationKey,
+ *     mutationFn: createPosts,
+ *   })
+ *
+ *   const savedPosts = useMutationState({
+ *     // this mutation key needs to match the mutation key of the given mutation (see above)
+ *     filters: { mutationKey, status: 'success' },
+ *     select: (mutation) => mutation.state.data,
+ *   })
+ *
+ *   return (
+ *     <button onClick={() => mutation.mutate(['New Post'])}>
+ *       Create post ({savedPosts.length} saved so far)
+ *     </button>
+ *   )
+ * }
  * ```
  *
  * @example
- * Access the latest mutation data via the `mutationKey`. Each invocation of `mutate` adds a new entry to the
- * mutation cache for `gcTime` milliseconds — check the last item that `useMutationState` returns to get the
- * latest invocation:
+ * Access the latest successful mutation data via the `mutationKey`. Each invocation of `mutate` adds a new
+ * entry to the mutation cache for `gcTime` milliseconds — with the `status: 'success'` filter below, check the
+ * last item that `useMutationState` returns to get the latest successful invocation:
  * ```tsx
- * const data = useMutationState({
- *   filters: { mutationKey: ['posts'] },
- *   select: (mutation) => mutation.state.data,
- * })
+ * import { useMutationState } from '@tanstack/preact-query'
+ *
+ * function LatestPost() {
+ *   const savedPosts = useMutationState({
+ *     filters: { mutationKey: ['posts'], status: 'success' },
+ *     select: (mutation) => mutation.state.data,
+ *   })
+ *
+ *   const latestSavedPost = savedPosts[savedPosts.length - 1]
  *
- * const latest = data[data.length - 1]
+ *   return <>{latestSavedPost ? 'Saved' : 'Nothing saved yet'}</>
+ * }
  * ```
  */
 declare function useMutationState<TResult = MutationState, TMutation extends Mutation<any, any, any, any> = MutationTypeFromResult<TResult>>(options?: MutationStateOptions<TResult, TMutation>, queryClient?: QueryClient): Array<TResult>;

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

@@ -1 +1 @@
-{"version":3,"file":"useMutationState.d.cts","names":[],"sources":["../../src/useMutationState.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBAgCgB,cACd,UAAU,iBACV,cAAc;KASX,uBAAuB,YAAY,kBACtC,oBACQ,aACA,cACA,kBACA,oBAGN,SAAS,OAAO,QAAQ,YAAY,mBACpC;KAEC,qBACH,UAAU,eACV,kBAAkB,+BAChB,uBAAuB;EAEzB,UAAU;EACV,UAAU,UAAU,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4EpB,iBACd,UAAU,eACV,kBAAkB,+BAChB,uBAAuB,UAEzB,UAAS,qBAAqB,SAAS,YACvC,cAAc,cACb,MAAM"}
+{"version":3,"file":"useMutationState.d.cts","names":[],"sources":["../../src/useMutationState.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAkCgB,cACd,UAAU,iBACV,cAAc;KASX,uBAAuB,YAAY,kBACtC,oBACQ,aACA,cACA,kBACA,oBAGN,SAAS,OAAO,QAAQ,YAAY,mBACpC;KAEC,qBACH,UAAU,eACV,kBAAkB,+BAChB,uBAAuB;EAEzB,UAAU;EACV,UAAU,UAAU,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8FpB,iBACd,UAAU,eACV,kBAAkB,+BAChB,uBAAuB,UAEzB,UAAS,qBAAqB,SAAS,YACvC,cAAc,cACb,MAAM"}

package/build/modern/useMutationState.d.ts

@@ -1,22 +1,24 @@
 import { Mutation, MutationFilters, MutationState, QueryClient } from "@tanstack/query-core";
 //#region src/useMutationState.d.ts
 /**
- * `useIsMutating` is an optional hook that returns the `number` of mutations that your application is fetching
+ * The `useIsMutating` hook returns the `number` of mutations that your application currently has `pending`
  * (useful for app-wide loading indicators).
  *
  * @param filters - The {@link MutationFilters} to narrow down the matched mutations.
  * @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 mutations that your application is currently fetching.
+ * @returns Will be the `number` of the mutations that your application currently has `pending`.
  *
  * @example
  * ```tsx
  * import { useIsMutating } from '@tanstack/preact-query'
  *
- * // How many mutations are fetching?
- * const isMutating = useIsMutating()
- * // How many mutations matching the posts prefix are fetching?
- * const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
+ * function PostsMutatingIndicator() {
+ *   // How many mutations matching the posts prefix are in progress?
+ *   const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
+ *
+ *   return isMutatingPosts ? <span>Saving posts...</span> : null
+ * }
  * ```
  */
 declare function useIsMutating(filters?: MutationFilters, queryClient?: QueryClient): number;
@@ -41,10 +43,14 @@ type MutationStateOptions<TResult = MutationState, TMutation extends Mutation<an
  * ```tsx
  * import { useMutationState } from '@tanstack/preact-query'
  *
- * const variables = useMutationState({
- *   filters: { status: 'pending' },
- *   select: (mutation) => mutation.state.variables,
- * })
+ * function PendingPosts() {
+ *   const pendingVariables = useMutationState({
+ *     filters: { status: 'pending' },
+ *     select: (mutation) => mutation.state.variables,
+ *   })
+ *
+ *   return <>{pendingVariables.length} posts saving...</>
+ * }
  * ```
  *
  * @example
@@ -54,30 +60,44 @@ type MutationStateOptions<TResult = MutationState, TMutation extends Mutation<an
  *
  * const mutationKey = ['posts']
  *
- * // Some mutation that we want to get the state for
- * const mutation = useMutation({
- *   mutationKey,
- *   mutationFn: createPosts,
- * })
- *
- * const data = useMutationState({
- *   // this mutation key needs to match the mutation key of the given mutation (see above)
- *   filters: { mutationKey },
- *   select: (mutation) => mutation.state.data,
- * })
+ * function Posts() {
+ *   // Some mutation that we want to get the state for
+ *   const mutation = useMutation({
+ *     mutationKey,
+ *     mutationFn: createPosts,
+ *   })
+ *
+ *   const savedPosts = useMutationState({
+ *     // this mutation key needs to match the mutation key of the given mutation (see above)
+ *     filters: { mutationKey, status: 'success' },
+ *     select: (mutation) => mutation.state.data,
+ *   })
+ *
+ *   return (
+ *     <button onClick={() => mutation.mutate(['New Post'])}>
+ *       Create post ({savedPosts.length} saved so far)
+ *     </button>
+ *   )
+ * }
  * ```
  *
  * @example
- * Access the latest mutation data via the `mutationKey`. Each invocation of `mutate` adds a new entry to the
- * mutation cache for `gcTime` milliseconds — check the last item that `useMutationState` returns to get the
- * latest invocation:
+ * Access the latest successful mutation data via the `mutationKey`. Each invocation of `mutate` adds a new
+ * entry to the mutation cache for `gcTime` milliseconds — with the `status: 'success'` filter below, check the
+ * last item that `useMutationState` returns to get the latest successful invocation:
  * ```tsx
- * const data = useMutationState({
- *   filters: { mutationKey: ['posts'] },
- *   select: (mutation) => mutation.state.data,
- * })
+ * import { useMutationState } from '@tanstack/preact-query'
+ *
+ * function LatestPost() {
+ *   const savedPosts = useMutationState({
+ *     filters: { mutationKey: ['posts'], status: 'success' },
+ *     select: (mutation) => mutation.state.data,
+ *   })
+ *
+ *   const latestSavedPost = savedPosts[savedPosts.length - 1]
  *
- * const latest = data[data.length - 1]
+ *   return <>{latestSavedPost ? 'Saved' : 'Nothing saved yet'}</>
+ * }
  * ```
  */
 declare function useMutationState<TResult = MutationState, TMutation extends Mutation<any, any, any, any> = MutationTypeFromResult<TResult>>(options?: MutationStateOptions<TResult, TMutation>, queryClient?: QueryClient): Array<TResult>;

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

@@ -1 +1 @@
-{"version":3,"file":"useMutationState.d.ts","names":[],"sources":["../../src/useMutationState.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;iBAgCgB,cACd,UAAU,iBACV,cAAc;KASX,uBAAuB,YAAY,kBACtC,oBACQ,aACA,cACA,kBACA,oBAGN,SAAS,OAAO,QAAQ,YAAY,mBACpC;KAEC,qBACH,UAAU,eACV,kBAAkB,+BAChB,uBAAuB;EAEzB,UAAU;EACV,UAAU,UAAU,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4EpB,iBACd,UAAU,eACV,kBAAkB,+BAChB,uBAAuB,UAEzB,UAAS,qBAAqB,SAAS,YACvC,cAAc,cACb,MAAM"}
+{"version":3,"file":"useMutationState.d.ts","names":[],"sources":["../../src/useMutationState.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;iBAkCgB,cACd,UAAU,iBACV,cAAc;KASX,uBAAuB,YAAY,kBACtC,oBACQ,aACA,cACA,kBACA,oBAGN,SAAS,OAAO,QAAQ,YAAY,mBACpC;KAEC,qBACH,UAAU,eACV,kBAAkB,+BAChB,uBAAuB;EAEzB,UAAU;EACV,UAAU,UAAU,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8FpB,iBACd,UAAU,eACV,kBAAkB,+BAChB,uBAAuB,UAEzB,UAAS,qBAAqB,SAAS,YACvC,cAAc,cACb,MAAM"}

package/build/modern/useMutationState.js

@@ -4,22 +4,24 @@ import { notifyManager, replaceEqualDeep } from "@tanstack/query-core";
 import { useCallback, useEffect, useRef } from "preact/hooks";
 //#region src/useMutationState.ts
 /**
-* `useIsMutating` is an optional hook that returns the `number` of mutations that your application is fetching
+* The `useIsMutating` hook returns the `number` of mutations that your application currently has `pending`
 * (useful for app-wide loading indicators).
 *
 * @param filters - The {@link MutationFilters} to narrow down the matched mutations.
 * @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 mutations that your application is currently fetching.
+* @returns Will be the `number` of the mutations that your application currently has `pending`.
 *
 * @example
 * ```tsx
 * import { useIsMutating } from '@tanstack/preact-query'
 *
-* // How many mutations are fetching?
-* const isMutating = useIsMutating()
-* // How many mutations matching the posts prefix are fetching?
-* const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
+* function PostsMutatingIndicator() {
+*   // How many mutations matching the posts prefix are in progress?
+*   const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
+*
+*   return isMutatingPosts ? <span>Saving posts...</span> : null
+* }
 * ```
 */
 function useIsMutating(filters, queryClient) {
@@ -48,10 +50,14 @@ function getResult(mutationCache, options) {
 * ```tsx
 * import { useMutationState } from '@tanstack/preact-query'
 *
-* const variables = useMutationState({
-*   filters: { status: 'pending' },
-*   select: (mutation) => mutation.state.variables,
-* })
+* function PendingPosts() {
+*   const pendingVariables = useMutationState({
+*     filters: { status: 'pending' },
+*     select: (mutation) => mutation.state.variables,
+*   })
+*
+*   return <>{pendingVariables.length} posts saving...</>
+* }
 * ```
 *
 * @example
@@ -61,30 +67,44 @@ function getResult(mutationCache, options) {
 *
 * const mutationKey = ['posts']
 *
-* // Some mutation that we want to get the state for
-* const mutation = useMutation({
-*   mutationKey,
-*   mutationFn: createPosts,
-* })
-*
-* const data = useMutationState({
-*   // this mutation key needs to match the mutation key of the given mutation (see above)
-*   filters: { mutationKey },
-*   select: (mutation) => mutation.state.data,
-* })
+* function Posts() {
+*   // Some mutation that we want to get the state for
+*   const mutation = useMutation({
+*     mutationKey,
+*     mutationFn: createPosts,
+*   })
+*
+*   const savedPosts = useMutationState({
+*     // this mutation key needs to match the mutation key of the given mutation (see above)
+*     filters: { mutationKey, status: 'success' },
+*     select: (mutation) => mutation.state.data,
+*   })
+*
+*   return (
+*     <button onClick={() => mutation.mutate(['New Post'])}>
+*       Create post ({savedPosts.length} saved so far)
+*     </button>
+*   )
+* }
 * ```
 *
 * @example
-* Access the latest mutation data via the `mutationKey`. Each invocation of `mutate` adds a new entry to the
-* mutation cache for `gcTime` milliseconds — check the last item that `useMutationState` returns to get the
-* latest invocation:
+* Access the latest successful mutation data via the `mutationKey`. Each invocation of `mutate` adds a new
+* entry to the mutation cache for `gcTime` milliseconds — with the `status: 'success'` filter below, check the
+* last item that `useMutationState` returns to get the latest successful invocation:
 * ```tsx
-* const data = useMutationState({
-*   filters: { mutationKey: ['posts'] },
-*   select: (mutation) => mutation.state.data,
-* })
+* import { useMutationState } from '@tanstack/preact-query'
+*
+* function LatestPost() {
+*   const savedPosts = useMutationState({
+*     filters: { mutationKey: ['posts'], status: 'success' },
+*     select: (mutation) => mutation.state.data,
+*   })
+*
+*   const latestSavedPost = savedPosts[savedPosts.length - 1]
 *
-* const latest = data[data.length - 1]
+*   return <>{latestSavedPost ? 'Saved' : 'Nothing saved yet'}</>
+* }
 * ```
 */
 function useMutationState(options = {}, queryClient) {

package/build/modern/useMutationState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMutationState.js","names":[],"sources":["../../src/useMutationState.ts"],"sourcesContent":["import { notifyManager, replaceEqualDeep } from '@tanstack/query-core'\nimport type {\n  Mutation,\n  MutationCache,\n  MutationFilters,\n  MutationState,\n  QueryClient,\n} from '@tanstack/query-core'\nimport { useCallback, useEffect, useRef } from 'preact/hooks'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport { useSyncExternalStore } from './utils'\n\n/**\n * `useIsMutating` is an optional hook that returns the `number` of mutations that your application is fetching\n * (useful for app-wide loading indicators).\n *\n * @param filters - The {@link MutationFilters} to narrow down the matched mutations.\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 mutations that your application is currently fetching.\n *\n * @example\n * ```tsx\n * import { useIsMutating } from '@tanstack/preact-query'\n *\n * // How many mutations are fetching?\n * const isMutating = useIsMutating()\n * // How many mutations matching the posts prefix are fetching?\n * const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })\n * ```\n */\nexport function useIsMutating(\n  filters?: MutationFilters,\n  queryClient?: QueryClient,\n): number {\n  const client = useQueryClient(queryClient)\n  return useMutationState(\n    { filters: { ...filters, status: 'pending' } },\n    client,\n  ).length\n}\n\ntype MutationTypeFromResult<TResult> = [TResult] extends [\n  MutationState<\n    infer TData,\n    infer TError,\n    infer TVariables,\n    infer TOnMutateResult\n  >,\n]\n  ? Mutation<TData, TError, TVariables, TOnMutateResult>\n  : Mutation\n\ntype MutationStateOptions<\n  TResult = MutationState,\n  TMutation extends Mutation<any, any, any, any> =\n    MutationTypeFromResult<TResult>,\n> = {\n  filters?: MutationFilters\n  select?: (mutation: TMutation) => TResult\n}\n\nfunction getResult<\n  TResult = MutationState,\n  TMutation extends Mutation<any, any, any, any> =\n    MutationTypeFromResult<TResult>,\n>(\n  mutationCache: MutationCache,\n  options: MutationStateOptions<TResult, TMutation>,\n): Array<TResult> {\n  return mutationCache\n    .findAll(options.filters)\n    .map(\n      (mutation): TResult =>\n        (options.select\n          ? options.select(mutation as TMutation)\n          : mutation.state) as TResult,\n    )\n}\n\n/**\n * `useMutationState` is a hook that gives you access to all mutations in the `MutationCache`. You can pass\n * `filters` ({@link MutationFilters}) to narrow down your mutations, and `select` to transform the mutation\n * state.\n *\n * @param options - The `filters` to narrow down matched mutations, and an optional `select` to transform the\n * mutation state.\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 an Array of whatever `select` returns for each matching mutation.\n *\n * @example\n * Get all variables of all running mutations:\n * ```tsx\n * import { useMutationState } from '@tanstack/preact-query'\n *\n * const variables = useMutationState({\n *   filters: { status: 'pending' },\n *   select: (mutation) => mutation.state.variables,\n * })\n * ```\n *\n * @example\n * Get all data for specific mutations via the `mutationKey`:\n * ```tsx\n * import { useMutation, useMutationState } from '@tanstack/preact-query'\n *\n * const mutationKey = ['posts']\n *\n * // Some mutation that we want to get the state for\n * const mutation = useMutation({\n *   mutationKey,\n *   mutationFn: createPosts,\n * })\n *\n * const data = useMutationState({\n *   // this mutation key needs to match the mutation key of the given mutation (see above)\n *   filters: { mutationKey },\n *   select: (mutation) => mutation.state.data,\n * })\n * ```\n *\n * @example\n * Access the latest mutation data via the `mutationKey`. Each invocation of `mutate` adds a new entry to the\n * mutation cache for `gcTime` milliseconds — check the last item that `useMutationState` returns to get the\n * latest invocation:\n * ```tsx\n * const data = useMutationState({\n *   filters: { mutationKey: ['posts'] },\n *   select: (mutation) => mutation.state.data,\n * })\n *\n * const latest = data[data.length - 1]\n * ```\n */\nexport function useMutationState<\n  TResult = MutationState,\n  TMutation extends Mutation<any, any, any, any> =\n    MutationTypeFromResult<TResult>,\n>(\n  options: MutationStateOptions<TResult, TMutation> = {},\n  queryClient?: QueryClient,\n): Array<TResult> {\n  const mutationCache = useQueryClient(queryClient).getMutationCache()\n  const optionsRef = useRef(options)\n  const result = useRef<Array<TResult>>(null)\n  if (result.current === null) {\n    result.current = getResult(mutationCache, options)\n  }\n\n  useEffect(() => {\n    optionsRef.current = options\n  })\n\n  return useSyncExternalStore(\n    useCallback(\n      (onStoreChange) =>\n        mutationCache.subscribe(() => {\n          const nextResult = replaceEqualDeep(\n            result.current,\n            getResult(mutationCache, optionsRef.current),\n          )\n          if (result.current !== nextResult) {\n            result.current = nextResult\n            notifyManager.schedule(onStoreChange)\n          }\n        }),\n      [mutationCache],\n    ),\n    () => result.current,\n  )!\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAgB,cACd,SACA,aACQ;CACR,MAAM,SAAS,eAAe,WAAW;CACzC,OAAO,iBACL,EAAE,SAAS;EAAE,GAAG;EAAS,QAAQ;CAAU,EAAE,GAC7C,MACF,CAAC,CAAC;AACJ;AAsBA,SAAS,UAKP,eACA,SACgB;CAChB,OAAO,cACJ,QAAQ,QAAQ,OAAO,CAAC,CACxB,KACE,aACE,QAAQ,SACL,QAAQ,OAAO,QAAqB,IACpC,SAAS,KACjB;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,iBAKd,UAAoD,CAAC,GACrD,aACgB;CAChB,MAAM,gBAAgB,eAAe,WAAW,CAAC,CAAC,iBAAiB;CACnE,MAAM,aAAa,OAAO,OAAO;CACjC,MAAM,SAAS,OAAuB,IAAI;CAC1C,IAAI,OAAO,YAAY,MACrB,OAAO,UAAU,UAAU,eAAe,OAAO;CAGnD,gBAAgB;EACd,WAAW,UAAU;CACvB,CAAC;CAED,OAAO,qBACL,aACG,kBACC,cAAc,gBAAgB;EAC5B,MAAM,aAAa,iBACjB,OAAO,SACP,UAAU,eAAe,WAAW,OAAO,CAC7C;EACA,IAAI,OAAO,YAAY,YAAY;GACjC,OAAO,UAAU;GACjB,cAAc,SAAS,aAAa;EACtC;CACF,CAAC,GACH,CAAC,aAAa,CAChB,SACM,OAAO,OACf;AACF"}
+{"version":3,"file":"useMutationState.js","names":[],"sources":["../../src/useMutationState.ts"],"sourcesContent":["import { notifyManager, replaceEqualDeep } from '@tanstack/query-core'\nimport type {\n  Mutation,\n  MutationCache,\n  MutationFilters,\n  MutationState,\n  QueryClient,\n} from '@tanstack/query-core'\nimport { useCallback, useEffect, useRef } from 'preact/hooks'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport { useSyncExternalStore } from './utils'\n\n/**\n * The `useIsMutating` hook returns the `number` of mutations that your application currently has `pending`\n * (useful for app-wide loading indicators).\n *\n * @param filters - The {@link MutationFilters} to narrow down the matched mutations.\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 mutations that your application currently has `pending`.\n *\n * @example\n * ```tsx\n * import { useIsMutating } from '@tanstack/preact-query'\n *\n * function PostsMutatingIndicator() {\n *   // How many mutations matching the posts prefix are in progress?\n *   const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })\n *\n *   return isMutatingPosts ? <span>Saving posts...</span> : null\n * }\n * ```\n */\nexport function useIsMutating(\n  filters?: MutationFilters,\n  queryClient?: QueryClient,\n): number {\n  const client = useQueryClient(queryClient)\n  return useMutationState(\n    { filters: { ...filters, status: 'pending' } },\n    client,\n  ).length\n}\n\ntype MutationTypeFromResult<TResult> = [TResult] extends [\n  MutationState<\n    infer TData,\n    infer TError,\n    infer TVariables,\n    infer TOnMutateResult\n  >,\n]\n  ? Mutation<TData, TError, TVariables, TOnMutateResult>\n  : Mutation\n\ntype MutationStateOptions<\n  TResult = MutationState,\n  TMutation extends Mutation<any, any, any, any> =\n    MutationTypeFromResult<TResult>,\n> = {\n  filters?: MutationFilters\n  select?: (mutation: TMutation) => TResult\n}\n\nfunction getResult<\n  TResult = MutationState,\n  TMutation extends Mutation<any, any, any, any> =\n    MutationTypeFromResult<TResult>,\n>(\n  mutationCache: MutationCache,\n  options: MutationStateOptions<TResult, TMutation>,\n): Array<TResult> {\n  return mutationCache\n    .findAll(options.filters)\n    .map(\n      (mutation): TResult =>\n        (options.select\n          ? options.select(mutation as TMutation)\n          : mutation.state) as TResult,\n    )\n}\n\n/**\n * `useMutationState` is a hook that gives you access to all mutations in the `MutationCache`. You can pass\n * `filters` ({@link MutationFilters}) to narrow down your mutations, and `select` to transform the mutation\n * state.\n *\n * @param options - The `filters` to narrow down matched mutations, and an optional `select` to transform the\n * mutation state.\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 an Array of whatever `select` returns for each matching mutation.\n *\n * @example\n * Get all variables of all running mutations:\n * ```tsx\n * import { useMutationState } from '@tanstack/preact-query'\n *\n * function PendingPosts() {\n *   const pendingVariables = useMutationState({\n *     filters: { status: 'pending' },\n *     select: (mutation) => mutation.state.variables,\n *   })\n *\n *   return <>{pendingVariables.length} posts saving...</>\n * }\n * ```\n *\n * @example\n * Get all data for specific mutations via the `mutationKey`:\n * ```tsx\n * import { useMutation, useMutationState } from '@tanstack/preact-query'\n *\n * const mutationKey = ['posts']\n *\n * function Posts() {\n *   // Some mutation that we want to get the state for\n *   const mutation = useMutation({\n *     mutationKey,\n *     mutationFn: createPosts,\n *   })\n *\n *   const savedPosts = useMutationState({\n *     // this mutation key needs to match the mutation key of the given mutation (see above)\n *     filters: { mutationKey, status: 'success' },\n *     select: (mutation) => mutation.state.data,\n *   })\n *\n *   return (\n *     <button onClick={() => mutation.mutate(['New Post'])}>\n *       Create post ({savedPosts.length} saved so far)\n *     </button>\n *   )\n * }\n * ```\n *\n * @example\n * Access the latest successful mutation data via the `mutationKey`. Each invocation of `mutate` adds a new\n * entry to the mutation cache for `gcTime` milliseconds — with the `status: 'success'` filter below, check the\n * last item that `useMutationState` returns to get the latest successful invocation:\n * ```tsx\n * import { useMutationState } from '@tanstack/preact-query'\n *\n * function LatestPost() {\n *   const savedPosts = useMutationState({\n *     filters: { mutationKey: ['posts'], status: 'success' },\n *     select: (mutation) => mutation.state.data,\n *   })\n *\n *   const latestSavedPost = savedPosts[savedPosts.length - 1]\n *\n *   return <>{latestSavedPost ? 'Saved' : 'Nothing saved yet'}</>\n * }\n * ```\n */\nexport function useMutationState<\n  TResult = MutationState,\n  TMutation extends Mutation<any, any, any, any> =\n    MutationTypeFromResult<TResult>,\n>(\n  options: MutationStateOptions<TResult, TMutation> = {},\n  queryClient?: QueryClient,\n): Array<TResult> {\n  const mutationCache = useQueryClient(queryClient).getMutationCache()\n  const optionsRef = useRef(options)\n  const result = useRef<Array<TResult>>(null)\n  if (result.current === null) {\n    result.current = getResult(mutationCache, options)\n  }\n\n  useEffect(() => {\n    optionsRef.current = options\n  })\n\n  return useSyncExternalStore(\n    useCallback(\n      (onStoreChange) =>\n        mutationCache.subscribe(() => {\n          const nextResult = replaceEqualDeep(\n            result.current,\n            getResult(mutationCache, optionsRef.current),\n          )\n          if (result.current !== nextResult) {\n            result.current = nextResult\n            notifyManager.schedule(onStoreChange)\n          }\n        }),\n      [mutationCache],\n    ),\n    () => result.current,\n  )!\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,cACd,SACA,aACQ;CACR,MAAM,SAAS,eAAe,WAAW;CACzC,OAAO,iBACL,EAAE,SAAS;EAAE,GAAG;EAAS,QAAQ;CAAU,EAAE,GAC7C,MACF,CAAC,CAAC;AACJ;AAsBA,SAAS,UAKP,eACA,SACgB;CAChB,OAAO,cACJ,QAAQ,QAAQ,OAAO,CAAC,CACxB,KACE,aACE,QAAQ,SACL,QAAQ,OAAO,QAAqB,IACpC,SAAS,KACjB;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,SAAgB,iBAKd,UAAoD,CAAC,GACrD,aACgB;CAChB,MAAM,gBAAgB,eAAe,WAAW,CAAC,CAAC,iBAAiB;CACnE,MAAM,aAAa,OAAO,OAAO;CACjC,MAAM,SAAS,OAAuB,IAAI;CAC1C,IAAI,OAAO,YAAY,MACrB,OAAO,UAAU,UAAU,eAAe,OAAO;CAGnD,gBAAgB;EACd,WAAW,UAAU;CACvB,CAAC;CAED,OAAO,qBACL,aACG,kBACC,cAAc,gBAAgB;EAC5B,MAAM,aAAa,iBACjB,OAAO,SACP,UAAU,eAAe,WAAW,OAAO,CAC7C;EACA,IAAI,OAAO,YAAY,YAAY;GACjC,OAAO,UAAU;GACjB,cAAc,SAAS,aAAa;EACtC;CACF,CAAC,GACH,CAAC,aAAa,CAChB,SACM,OAAO,OACf;AACF"}

package/build/modern/useQueries.cjs

@@ -11,8 +11,9 @@ let preact_hooks = require("preact/hooks");
 /**
 * The `useQueries` hook can be used to fetch a variable number of queries.
 *
-* The `queries` key accepts an array with query option objects identical to `useQuery` (excluding the
-* `queryClient` option - because the `QueryClient` can be passed in on the top level).
+* The `queries` key accepts an array with query option objects mostly identical to `useQuery` — see the
+* `queries` parameter below for the differences. A custom `QueryClient` is supplied once, as `useQueries`' own
+* top-level second argument, rather than per query.
 *
 * Having the same query key more than once in the array of query objects may cause some data to be shared
 * between queries. To avoid this, consider de-duplicating the queries and map the results back to the desired
@@ -30,32 +31,58 @@ let preact_hooks = require("preact/hooks");
 * ```tsx
 * import { useQueries } from '@tanstack/preact-query'
 *
-* const ids = [1, 2, 3]
-* const results = useQueries({
-*   queries: ids.map((id) => ({
-*     queryKey: ['post', id],
-*     queryFn: () => fetchPost(id),
-*     staleTime: Infinity,
-*   })),
-* })
+* function Posts({ ids }: { ids: Array<number> }) {
+*   const postQueries = useQueries({
+*     queries: ids.map((id) => ({
+*       queryKey: ['post', id],
+*       queryFn: () => fetchPost(id),
+*       staleTime: Infinity,
+*     })),
+*   })
+*
+*   return (
+*     <ul>
+*       {postQueries.map((query, index) => {
+*         if (query.isPending) return <li key={ids[index]}>Loading...</li>
+*         if (query.isError) return <li key={ids[index]}>Error: {query.error.message}</li>
+*         return <li key={ids[index]}>{query.data.title}</li>
+*       })}
+*     </ul>
+*   )
+* }
 * ```
 *
 * @example
 * Combining results into a single value:
 * ```tsx
-* const ids = [1, 2, 3]
-* const combinedQueries = useQueries({
-*   queries: ids.map((id) => ({
-*     queryKey: ['post', id],
-*     queryFn: () => fetchPost(id),
-*   })),
-*   combine: (results) => {
-*     return {
-*       data: results.map((result) => result.data),
-*       pending: results.some((result) => result.isPending),
-*     }
-*   },
-* })
+* import { useQueries } from '@tanstack/preact-query'
+*
+* function Posts({ ids }: { ids: Array<number> }) {
+*   const { data, isPending, isError } = useQueries({
+*     queries: ids.map((id) => ({
+*       queryKey: ['post', id],
+*       queryFn: () => fetchPost(id),
+*     })),
+*     combine: (postQueries) => {
+*       return {
+*         data: postQueries.map((query) => query.data),
+*         isPending: postQueries.some((query) => query.isPending),
+*         isError: postQueries.some((query) => query.isError),
+*       }
+*     },
+*   })
+*
+*   if (isPending) return 'Loading...'
+*   if (isError) return 'Error loading posts'
+*
+*   return (
+*     <ul>
+*       {data.map((post) => (
+*         <li key={post?.id}>{post?.title}</li>
+*       ))}
+*     </ul>
+*   )
+* }
 * ```
 */
 function useQueries({ queries, ...options }, queryClient) {