reactjrx 1.61.0 → 1.65.0

package/dist/index.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { useRef, useMemo, useCallback, useSyncExternalStore, useEffect, createContext, memo, useContext } from "react";
-import { distinctUntilChanged, tap, finalize, catchError, EMPTY, Subject, identity, BehaviorSubject, map, of, zip, merge, throttleTime, asyncScheduler, switchMap, from, defer, iif, timer, throwError, fromEvent, filter, skip, withLatestFrom, scan, retry, shareReplay, endWith, delay, take, takeUntil, share, startWith, pairwise, mergeMap, NEVER, combineLatest, concatMap as concatMap$1, takeWhile } from "rxjs";
+import { distinctUntilChanged, tap, finalize, catchError, EMPTY, Subject, identity, BehaviorSubject, map, of, zip, merge, throttleTime, asyncScheduler, switchMap, from, defer, iif, timer, throwError, fromEvent, filter, skip, withLatestFrom, scan, retry, shareReplay, endWith, delay, take, takeUntil, share, startWith, pairwise, mergeMap, NEVER, combineLatest, concatMap as concatMap$1, last, Observable, concat, toArray, takeWhile } from "rxjs";
 import { retryWhen, concatMap, tap as tap$1 } from "rxjs/operators";
 import { jsxs, jsx } from "react/jsx-runtime";
 const useLiveRef = (value) => {
@@ -72,6 +72,7 @@ function useObserve(source$, unsafeOptions, unsafeDeps) {
         sub.unsubscribe();
       };
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [...deps]
   );
   const getSnapshot = useCallback(() => {
@@ -98,7 +99,12 @@ function useSubscribe(source, deps = []) {
     return () => {
       sub.unsubscribe();
     };
-  }, [...deps, sourceAsObservable]);
+  }, [
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    ...deps,
+    sourceAsObservable,
+    sourceRef
+  ]);
 }
 const useConstant = (fn) => {
   const ref = useRef();
@@ -136,7 +142,7 @@ const useSubject = ({
         completed.current = true;
       }
     };
-  }, []);
+  }, [completeOnUnmountRef, onBeforeCompleteRef, subject]);
   return subject;
 };
 const useObserveCallback = (callback, deps) => {
@@ -144,7 +150,7 @@ const useObserveCallback = (callback, deps) => {
   useSubscribe(() => callback(trigger$.current), [trigger$, ...deps]);
   const trigger2 = useCallback((arg) => {
     trigger$.current.next(arg);
-  }, []);
+  }, [trigger$]);
   return [trigger2, trigger$];
 };
 function trigger(mapper = identity) {
@@ -159,9 +165,10 @@ function trigger(mapper = identity) {
 const useBehaviorSubject = (state) => {
   const subject = useConstant(() => new BehaviorSubject(state));
   const completed = useRef(false);
+  const stateRef = useRef(state);
   useEffect(() => {
     if (completed.current) {
-      subject.current = new BehaviorSubject(state);
+      subject.current = new BehaviorSubject(stateRef.current);
       completed.current = false;
     }
     return () => {
@@ -170,7 +177,7 @@ const useBehaviorSubject = (state) => {
         completed.current = true;
       }
     };
-  }, []);
+  }, [subject]);
   return subject;
 };
 const SIGNAL_RESET = Symbol("SIGNAL_RESET");
@@ -399,27 +406,27 @@ function retryBackoff(config) {
 const Context = createContext({
   client: null
 });
-const ClientEffect = ({
-  client
-}) => {
+const ClientEffect = ({ client }) => {
   useEffect(() => {
-    const destroy = client.start();
+    const stop = client.mount();
     return () => {
-      destroy();
+      stop();
     };
   }, [client]);
   return null;
 };
 const QueryClientProvider = memo(
   ({ children, client }) => {
-    const value = useMemo(() => ({ client: client.client }), [client]);
+    const value = useMemo(() => ({ client }), [client]);
     return /* @__PURE__ */ jsxs(Context.Provider, { value, children: [
       /* @__PURE__ */ jsx(ClientEffect, { client: value.client }),
       children
     ] });
   }
 );
-const useQueryClient = ({ unsafe = false } = {}) => {
+const useQueryClient = ({
+  unsafe = false
+} = {}) => {
   const context = useContext(Context);
   if (!unsafe && context.client === null) {
     throw new Error("You forgot to register the provider");
@@ -456,43 +463,51 @@ const nanoid = (size = 21) => crypto.getRandomValues(new Uint8Array(size)).reduc
   }
   return id;
 }, "");
+function noop() {
+}
 function useMutation(options, queryClient) {
   const defaultQueryClient = useQueryClient({ unsafe: !!queryClient });
-  const finalQueryClient = (queryClient == null ? void 0 : queryClient.client) ?? defaultQueryClient;
+  const finalQueryClient = queryClient ?? defaultQueryClient;
   const optionsRef = useLiveRef(options);
   const defaultKey = useConstant(() => [nanoid()]);
-  const key = serializeKey(options.mutationKey ?? defaultKey.current);
-  const observedMutation = useMemo(
-    () => finalQueryClient.mutationClient.observe({ key }),
-    [key]
-  );
+  const serializedKey = serializeKey(options.mutationKey ?? defaultKey.current);
+  const mutationsToCancel = useRef([]);
+  const observedMutation = useMemo(() => {
+    return finalQueryClient.mutationObserver.observeBy({
+      mutationKey: optionsRef.current.mutationKey ?? defaultKey.current
+    });
+  }, [serializedKey, defaultKey, finalQueryClient, optionsRef]);
   const result = useObserve(observedMutation.result$) ?? observedMutation.lastValue;
   const mutate = useCallback(
     (mutationArgs) => {
-      finalQueryClient.mutationClient.mutate({
+      finalQueryClient.mutationRunners.mutate({
         options: {
           ...optionsRef.current,
           mutationKey: optionsRef.current.mutationKey ?? defaultKey.current
         },
         args: mutationArgs
+      }).catch(noop);
+      const mutation = finalQueryClient.getMutationCache().findLatest({
+        mutationKey: optionsRef.current.mutationKey ?? defaultKey.current
       });
+      if (mutation) {
+        mutationsToCancel.current.push(mutation);
+      }
     },
-    [finalQueryClient, key]
+    [finalQueryClient, serializedKey, defaultKey, optionsRef]
   );
   const cancel = useCallback(() => {
-    finalQueryClient.mutationClient.cancel({
-      key: optionsRef.current.mutationKey ?? defaultKey.current
+    mutationsToCancel.current.forEach((mutation) => {
+      mutation.cancel();
     });
-  }, [finalQueryClient]);
+  }, []);
   useEffect(() => {
     return () => {
       if (optionsRef.current.cancelOnUnMount) {
-        finalQueryClient.mutationClient.cancel({
-          key: optionsRef.current.mutationKey ?? defaultKey.current
-        });
+        cancel();
       }
     };
-  }, []);
+  }, [cancel, optionsRef]);
   return { mutate, cancel, ...result };
 }
 const arrayEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
@@ -568,7 +583,7 @@ const useQueryParams = ({
       options,
       queryFn
     });
-  }, [queryKey, options, queryFn]);
+  }, [queryKey, options, queryFn, params$]);
   return params$;
 };
 const defaultValue = {
@@ -620,7 +635,7 @@ function useQuery({
       return newQueryTrigger$.pipe(
         withLatestFrom(key$),
         switchMap(([, key]) => {
-          const { result$ } = client.query({
+          const { result$ } = client.client.query({
             key,
             fn$,
             options$,
@@ -662,7 +677,7 @@ function useQuery({
   );
   const refetch = useCallback(() => {
     internalRefresh$.current.next({ type: "refetch", ignoreStale: true });
-  }, [client]);
+  }, [internalRefresh$]);
   return { ...result, refetch };
 }
 function useSubscribeEffect(source, unsafeOptions, deps = []) {
@@ -681,7 +696,7 @@ function useSubscribeEffect(source, unsafeOptions, deps = []) {
       }),
       retryOption ? retry() : identity
     ),
-    [makeObservable]
+    [makeObservable, retryOption]
   );
   useSubscribe(enhancerMakeObservable, deps);
 }
@@ -1466,116 +1481,46 @@ const dispatchExternalRefetchToAllQueries = ({
   }),
   filter((trigger2) => trigger2.type !== "refetch")
 );
-const mergeResults = (stream$) => stream$.pipe(
-  scan(
-    (acc, current) => {
-      return {
-        ...acc,
-        ...current,
-        data: current.data ?? acc.data,
-        error: current.error ?? acc.error
-      };
-    },
-    {
-      data: void 0,
-      error: void 0,
-      status: "pending"
-    }
-  ),
-  distinctUntilChanged(
-    ({ data: prevData, ...prev }, { data: currData, ...curr }) => shallowEqual(prev, curr) && shallowEqual(prevData, currData)
-  )
-);
 const getDefaultMutationState = () => ({
-  context: {},
+  context: void 0,
   data: void 0,
   error: null,
   status: "idle",
   submittedAt: 0,
   variables: void 0
 });
-class Mutation {
-  constructor({
-    args,
-    ...options
-  }) {
-    __publicField(this, "stateSubject", new BehaviorSubject(
-      getDefaultMutationState()
-    ));
-    /**
-     * @important
-     * proxy for rect-query, not really useful
-     */
-    __publicField(this, "state", this.stateSubject.getValue());
-    __publicField(this, "options");
-    __publicField(this, "mutation$");
-    this.options = options;
-    const mutationFn = options.mutationFn;
-    this.state.variables = args;
-    this.stateSubject.next(this.state);
-    const mutationFnObservable = typeof mutationFn === "function" ? defer(() => from(mutationFn(args))) : mutationFn;
-    const queryRunner$ = mutationFnObservable.pipe(
-      retryOnError(options),
-      take(1),
-      map((data) => ({ data, isError: false })),
-      catchError((error) => {
-        console.error(error);
-        if (options.onError != null) {
-          options.onError(error, args);
-        }
-        return of({ data: error, isError: true });
-      })
-    );
-    const loading$ = of({
-      status: "pending"
-    });
-    this.mutation$ = merge(
-      loading$,
-      queryRunner$.pipe(
-        map(({ data, isError }) => {
-          if (!isError) {
-            if (options.onSuccess != null)
-              options.onSuccess(data, args);
-          }
-          return isError ? {
-            status: "error",
-            error: data,
-            data: void 0
-          } : {
-            status: "success",
-            error: null,
-            data
-          };
-        })
-      )
-    ).pipe(
-      mergeResults,
-      tap((value) => {
-        this.state = { ...this.state, ...value };
-        this.stateSubject.next(this.state);
-      }),
-      options.__queryRunnerHook ?? identity,
-      share()
-    );
-  }
-}
+const mergeResults = (stream$) => stream$.pipe(
+  scan((acc, current) => {
+    return {
+      ...acc,
+      ...current,
+      data: current.data ?? acc.data,
+      error: current.error ?? acc.error
+    };
+  }, getDefaultMutationState()),
+  distinctUntilChanged(
+    ({ data: prevData, ...prev }, { data: currData, ...curr }) => shallowEqual(prev, curr) && shallowEqual(prevData, currData)
+  )
+);
 const createMutationRunner = ({
   __queryFinalizeHook,
   __queryInitHook,
-  __queryTriggerHook
+  __queryTriggerHook,
+  mutationKey,
+  mutationCache
 }) => {
   const trigger$ = new Subject();
   const cancel$ = new Subject();
   let closed = false;
-  const mapOperator$ = new BehaviorSubject("merge");
-  const mutationsSubject = new BehaviorSubject([]);
+  const mapOperator$ = new BehaviorSubject(
+    "merge"
+  );
   const destroy = () => {
     if (closed) {
       throw new Error("Trying to close an already closed mutation");
     }
     closed = true;
     mapOperator$.complete();
-    mutationsSubject.complete();
     trigger$.complete();
     cancel$.next();
     cancel$.complete();
@@ -1584,39 +1529,26 @@ const createMutationRunner = ({
     filter(isDefined),
     distinctUntilChanged()
   );
-  const mutation$ = stableMapOperator$.pipe(
+  const runner$ = stableMapOperator$.pipe(
     __queryInitHook ?? identity,
     mergeMap((mapOperator) => {
       const switchOperator = mapOperator === "concat" ? concatMap$1 : mapOperator === "switch" ? switchMap : mergeMap;
-      let mutationsForCurrentMapOperatorSubject = [];
-      const removeMutation = (mutation) => {
-        mutationsForCurrentMapOperatorSubject = mutationsForCurrentMapOperatorSubject.filter(
-          (item) => item !== mutation
-        );
-        mutationsSubject.next(
-          mutationsSubject.getValue().filter((item) => item !== mutation)
-        );
-      };
       return trigger$.pipe(
         takeUntil(stableMapOperator$.pipe(skip(1))),
-        map(({ args, options }) => {
-          const mutation = new Mutation({
-            args,
-            ...options,
-            mapOperator
+        switchOperator(({ args }) => {
+          const mutation = mutationCache.findLatest({
+            exact: true,
+            mutationKey
           });
-          mutationsForCurrentMapOperatorSubject = [
-            ...mutationsForCurrentMapOperatorSubject,
-            mutation
-          ];
-          mutationsSubject.next([...mutationsSubject.getValue(), mutation]);
-          return mutation;
-        }),
-        switchOperator((mutation) => {
-          if (!mutationsSubject.getValue().includes(mutation))
+          if (!mutation) {
             return of({});
-          const queryIsOver$ = mutation.mutation$.pipe(
-            map(({ data, error }) => error || data)
+          }
+          const mutation$ = mutation.execute(args);
+          const queryIsOver$ = merge(
+            cancel$,
+            mutation$.pipe(
+              filter(({ status }) => status === "success" || status === "error")
+            )
           );
           const isThisCurrentFunctionLastOneCalled = trigger$.pipe(
             take(1),
@@ -1625,7 +1557,7 @@ const createMutationRunner = ({
             takeUntil(queryIsOver$)
           );
           const result$ = combineLatest([
-            mutation.mutation$,
+            mutation$,
             isThisCurrentFunctionLastOneCalled
           ]).pipe(
             map(([result, isLastMutationCalled]) => {
@@ -1634,11 +1566,7 @@ const createMutationRunner = ({
               }
               return result;
             }),
-            takeUntil(cancel$.pipe()),
-            mergeResults,
-            finalize(() => {
-              removeMutation(mutation);
-            })
+            mergeResults
           );
           return result$;
         }),
@@ -1646,15 +1574,21 @@ const createMutationRunner = ({
         __queryTriggerHook ?? identity
       );
     }),
-    __queryFinalizeHook ?? identity
+    __queryFinalizeHook ?? identity,
+    shareReplay(1)
   );
   cancel$.subscribe(() => {
-    if (mutationsSubject.getValue().length === 0)
-      return;
-    mutationsSubject.next([]);
+    var _a;
+    (_a = mutationCache.findAll({
+      mutationKey,
+      exact: true
+    })) == null ? void 0 : _a.forEach((mutation) => {
+      mutation.cancel();
+    });
   });
   return {
-    mutation$,
+    mutationKey,
+    runner$,
     trigger: ({
       args,
       options
@@ -1664,29 +1598,11 @@ const createMutationRunner = ({
     },
     cancel$,
     destroy,
-    mutationsSubject,
     getClosed: () => closed
   };
 };
-const createPredicateForFilters = ({
-  mutationKey,
-  status,
-  predicate
-} = {}) => {
-  const defaultPredicate = (mutation) => {
-    if (mutationKey !== void 0 && // @todo optimize
-    serializeKey(mutation.options.mutationKey) !== serializeKey(mutationKey)) {
-      return false;
-    }
-    if (status && mutation.stateSubject.getValue().status !== status)
-      return false;
-    return true;
-  };
-  const finalPredicate = predicate ?? defaultPredicate;
-  return finalPredicate;
-};
-class MutationClient {
-  constructor() {
+class MutationRunners {
+  constructor(client) {
     /**
      * Contain all active mutation for a given key.
      * A mutation ca have several triggers running (it is not necessarily one function running)
@@ -1695,89 +1611,7 @@ class MutationClient {
      * - automatically cleaned as soon as the last mutation is done for a given key
      */
     __publicField(this, "mutationRunnersByKey$", new BehaviorSubject(/* @__PURE__ */ new Map()));
-    /**
-     * Mutation result subject. It can be used whether there is a mutation
-     * running or not and can be directly observed.
-     *
-     * @important
-     * - automatically cleaned as soon as the last mutation is done for a given key
-     */
-    __publicField(this, "mutationResults$", new BehaviorSubject(/* @__PURE__ */ new Map()));
-    __publicField(this, "mutate$", new Subject());
-    __publicField(this, "cancel$", new Subject());
-    /**
-     * Observable to track how many running mutations per runner
-     */
-    __publicField(this, "isMutatingSubject", new BehaviorSubject([]));
-    /**
-     * List of all mutations running
-     */
-    __publicField(this, "mutationsSubject", new BehaviorSubject([]));
-    this.mutate$.pipe(
-      tap(({ options, args }) => {
-        const { mutationKey } = options;
-        const serializedMutationKey = serializeKey(mutationKey);
-        let mutationForKey = this.getMutationRunnersByKey(
-          serializedMutationKey
-        );
-        if (!mutationForKey) {
-          mutationForKey = {
-            ...createMutationRunner(options),
-            mutationKey
-          };
-          this.setMutationRunnersByKey(serializedMutationKey, mutationForKey);
-          mutationForKey.mutation$.subscribe((result) => {
-            let resultForKeySubject = this.mutationResults$.getValue().get(serializedMutationKey);
-            if (!resultForKeySubject) {
-              resultForKeySubject = new BehaviorSubject(result);
-              const resultMap = this.mutationResults$.getValue();
-              resultMap.set(serializedMutationKey, resultForKeySubject);
-              this.mutationResults$.next(resultMap);
-            } else {
-              resultForKeySubject == null ? void 0 : resultForKeySubject.next(result);
-            }
-          });
-          mutationForKey.mutationsSubject.pipe(
-            distinctUntilChanged(shallowEqual),
-            skip(1),
-            filter((items) => items.length === 0)
-          ).subscribe(() => {
-            mutationForKey == null ? void 0 : mutationForKey.destroy();
-            const resultMap = this.mutationResults$.getValue();
-            resultMap.delete(serializedMutationKey);
-            this.mutationResults$.next(resultMap);
-            this.deleteMutationRunnersByKey(serializedMutationKey);
-          });
-        }
-        mutationForKey.trigger({ args, options });
-      })
-    ).subscribe();
-    this.cancel$.pipe(
-      tap(({ key }) => {
-        var _a;
-        const serializedKey = serializeKey(key);
-        (_a = this.mutationRunnersByKey$.getValue().get(serializedKey)) == null ? void 0 : _a.cancel$.next();
-      })
-    ).subscribe();
-    this.mutationRunnersByKey$.pipe(
-      switchMap((mapItem) => {
-        const mutationRunners = Array.from(mapItem.values());
-        const mutations$ = combineLatest(
-          mutationRunners.map(
-            (runner) => runner.mutationsSubject.pipe(
-              map((mutations) => mutations.map((mutation) => mutation))
-            )
-          )
-        );
-        return mutations$.pipe(
-          map(
-            (mutationsByKeys) => mutationsByKeys.reduce((acc, value) => [...acc, ...value], [])
-          )
-        );
-      }),
-      startWith([]),
-      distinctUntilChanged(shallowEqual)
-    ).subscribe(this.mutationsSubject);
+    this.client = client;
   }
   /**
    * @helper
@@ -1801,99 +1635,569 @@ class MutationClient {
   getMutationRunnersByKey(key) {
     return this.mutationRunnersByKey$.getValue().get(key);
   }
-  useIsMutating(filters = {}) {
-    const predicate = createPredicateForFilters(filters);
-    const reduceByNumber = (entries) => entries.reduce((acc, mutation) => {
-      return predicate(mutation) && mutation.stateSubject.getValue().status === "pending" ? 1 + acc : acc;
-    }, 0);
-    const lastValue = reduceByNumber(this.mutationsSubject.getValue());
-    const value$ = this.mutationsSubject.pipe(
-      switchMap((mutations) => {
-        const mutationsOnStateUpdate = mutations.map(
-          (mutation) => mutation.stateSubject.pipe(map(() => mutation))
+  async mutate(params) {
+    const { mutationKey } = params.options;
+    const serializedMutationKey = serializeKey(mutationKey);
+    let mutationForKey = this.getMutationRunnersByKey(serializedMutationKey);
+    if (!mutationForKey) {
+      mutationForKey = {
+        ...createMutationRunner({
+          ...params.options,
+          client: this.client,
+          mutationCache: this.client.getMutationCache()
+        }),
+        mutationKey
+      };
+      this.setMutationRunnersByKey(serializedMutationKey, mutationForKey);
+      mutationForKey.runner$.subscribe();
+      this.client.getMutationCache().mutationsBy({
+        exact: true,
+        mutationKey
+      }).pipe(
+        distinctUntilChanged(shallowEqual),
+        skip(1),
+        filter((items) => items.length === 0),
+        take(1)
+      ).subscribe(() => {
+        mutationForKey == null ? void 0 : mutationForKey.destroy();
+        this.deleteMutationRunnersByKey(serializedMutationKey);
+      });
+    }
+    const mutation = this.client.getMutationCache().build(this.client, params.options);
+    mutationForKey.trigger(params);
+    return await new Promise((resolve, reject) => {
+      mutation.observeTillFinished().pipe(last()).subscribe({
+        error: reject,
+        next: resolve
+      });
+    });
+  }
+  destroy() {
+    this.mutationRunnersByKey$.complete();
+  }
+}
+const functionAsObservable = (fn) => {
+  return defer(() => {
+    const result = fn();
+    if (result instanceof Promise) {
+      return from(result);
+    }
+    if (result instanceof Observable) {
+      return result;
+    }
+    return of(result);
+  });
+};
+class Mutation {
+  constructor({
+    options,
+    mutationCache
+  }) {
+    __publicField(this, "state", getDefaultMutationState());
+    __publicField(this, "state$");
+    __publicField(this, "options");
+    __publicField(this, "mutationCache");
+    __publicField(this, "observerCount", new BehaviorSubject(0));
+    __publicField(this, "observerCount$", this.observerCount.asObservable());
+    __publicField(this, "cancelSubject", new Subject());
+    __publicField(this, "executeSubject", new Subject());
+    this.options = options;
+    this.mutationCache = mutationCache;
+    this.state$ = merge(
+      of(this.state),
+      this.executeSubject.pipe(
+        switchMap((variables) => this.createMutation(variables)),
+        tap((value) => {
+          this.state = { ...this.state, ...value };
+        }),
+        takeUntil(this.cancelSubject)
+      ),
+      NEVER
+    ).pipe(
+      /**
+       * refCount as true somewhat make NEVER complete when there are
+       * no more observers. I thought I should have to complete manually (which is
+       * why we still cancel the observable when we remove it from cache)
+       */
+      shareReplay({ bufferSize: 1, refCount: true }),
+      takeUntil(this.cancelSubject),
+      (source) => {
+        return new Observable(
+          (observer) => {
+            this.observerCount.next(this.observerCount.getValue() + 1);
+            const sub = source.subscribe(observer);
+            return () => {
+              this.observerCount.next(this.observerCount.getValue() - 1);
+              sub.unsubscribe();
+            };
+          }
         );
-        return mutationsOnStateUpdate.length === 0 ? of([]) : combineLatest(mutationsOnStateUpdate);
-      }),
-      map(reduceByNumber),
-      distinctUntilChanged()
+      }
     );
-    return { value$, lastValue };
   }
-  mutationState({
+  createMutation(variables) {
+    const mutationFn = this.options.mutationFn;
+    const onCacheMutate$ = functionAsObservable(
+      () => {
+        var _a, _b;
+        return (_b = (_a = this.mutationCache.config).onMutate) == null ? void 0 : _b.call(
+          _a,
+          variables,
+          this
+        );
+      }
+    );
+    const onMutate = concat(
+      onCacheMutate$.pipe(
+        mergeMap(() => {
+          const onMutate$ = functionAsObservable(
+            // eslint-disable-next-line @typescript-eslint/promise-function-async
+            () => {
+              var _a, _b;
+              return ((_b = (_a = this.options).onMutate) == null ? void 0 : _b.call(_a, variables)) ?? void 0;
+            }
+          );
+          return onMutate$;
+        })
+      )
+    );
+    const queryRunner$ = onMutate.pipe(
+      switchMap((context) => {
+        const fn$ = typeof mutationFn === "function" ? (
+          // eslint-disable-next-line @typescript-eslint/promise-function-async
+          functionAsObservable(() => mutationFn(variables))
+        ) : mutationFn;
+        return fn$.pipe(
+          retryOnError(this.options),
+          take(1),
+          map((data) => ({ data, context, isError: false })),
+          catchError((error) => {
+            console.error(error);
+            const onCacheError$ = functionAsObservable(
+              () => {
+                var _a, _b;
+                return (_b = (_a = this.mutationCache.config).onError) == null ? void 0 : _b.call(_a, error, variables, context, this);
+              }
+            );
+            const onError$ = functionAsObservable(
+              () => {
+                var _a, _b;
+                return (_b = (_a = this.options).onError) == null ? void 0 : _b.call(_a, error, variables, context);
+              }
+            );
+            return concat(onCacheError$, onError$).pipe(
+              toArray(),
+              map(() => ({ data: error, context, isError: true }))
+            );
+          })
+        );
+      })
+    );
+    const initState$ = of({
+      ...this.state,
+      variables,
+      status: "pending",
+      submittedAt: (/* @__PURE__ */ new Date()).getTime()
+    });
+    const mutation$ = merge(
+      initState$,
+      queryRunner$.pipe(
+        switchMap(({ data: dataOrError, isError, context }) => {
+          const error = isError ? dataOrError : null;
+          const data = isError ? void 0 : dataOrError;
+          const onCacheSuccess$ = isError ? of(null) : functionAsObservable(
+            () => {
+              var _a, _b;
+              return (_b = (_a = this.mutationCache.config).onSuccess) == null ? void 0 : _b.call(
+                _a,
+                data,
+                variables,
+                context,
+                this
+              );
+            }
+          );
+          const onSuccess$ = isError ? of(null) : functionAsObservable(
+            () => {
+              var _a, _b;
+              return (_b = (_a = this.options).onSuccess) == null ? void 0 : _b.call(_a, data, variables, context);
+            }
+          );
+          const onCacheSettled$ = functionAsObservable(
+            () => {
+              var _a, _b;
+              return (_b = (_a = this.mutationCache.config).onSettled) == null ? void 0 : _b.call(
+                _a,
+                data,
+                error,
+                variables,
+                context,
+                this
+              );
+            }
+          );
+          const onSettled$ = functionAsObservable(
+            () => {
+              var _a, _b;
+              return (_b = (_a = this.options).onSettled) == null ? void 0 : _b.call(_a, data, error, variables, context);
+            }
+          );
+          const result$ = concat(
+            onCacheSuccess$,
+            onSuccess$,
+            onCacheSettled$,
+            onSettled$
+          ).pipe(
+            toArray(),
+            map(
+              () => isError ? {
+                status: "error",
+                error,
+                data,
+                context,
+                variables
+              } : {
+                status: "success",
+                error,
+                data,
+                context,
+                variables
+              }
+            )
+          );
+          return result$;
+        })
+      )
+    ).pipe(
+      mergeResults,
+      this.options.__queryRunnerHook ?? identity,
+      takeUntil(this.cancelSubject)
+    );
+    return mutation$;
+  }
+  observeTillFinished() {
+    return this.state$.pipe(
+      takeWhile(
+        (result) => result.status !== "error" && result.status !== "success",
+        true
+      )
+    );
+  }
+  /**
+   * @important
+   * The resulting observable will complete as soon as the mutation
+   * is over, unlike the state which can be re-subscribed later.
+   */
+  execute(variables) {
+    this.executeSubject.next(variables);
+    this.executeSubject.complete();
+    return this.observeTillFinished();
+  }
+  cancel() {
+    this.cancelSubject.next();
+    this.cancelSubject.complete();
+    this.executeSubject.complete();
+  }
+}
+const createPredicateForFilters = ({
+  mutationKey,
+  status,
+  predicate,
+  exact = true
+} = {}) => {
+  const finalPredicate = (mutation) => {
+    if (exact && mutationKey !== void 0 && !compareKeys(mutation.options.mutationKey, mutationKey, { exact })) {
+      return false;
+    }
+    if (!exact && mutationKey !== void 0 && !compareKeys(mutationKey, mutation.options.mutationKey, { exact })) {
+      return false;
+    }
+    if (status && mutation.state.status !== status)
+      return false;
+    if (predicate) {
+      return predicate(mutation);
+    }
+    return true;
+  };
+  return finalPredicate;
+};
+class MutationCache {
+  constructor(config = {}) {
+    __publicField(this, "mutationsSubject", new BehaviorSubject([]));
+    __publicField(this, "mutations$", this.mutationsSubject.pipe(
+      map((mutations) => mutations.map(({ mutation }) => mutation)),
+      distinctUntilChanged(arrayEqual),
+      share()
+    ));
+    __publicField(this, "added$", this.mutations$.pipe(
+      pairwise(),
+      map(
+        ([previous, current]) => current.filter((mutation) => !previous.includes(mutation))[0]
+      ),
+      filter(isDefined),
+      share()
+    ));
+    __publicField(this, "removed$", this.mutations$.pipe(
+      pairwise(),
+      map(
+        ([previous, current]) => previous.filter((mutation) => !current.includes(mutation))
+      ),
+      mergeMap((removedItems) => from(removedItems)),
+      share()
+    ));
+    __publicField(this, "stateChange$", this.added$.pipe(
+      mergeMap(
+        (mutation) => mutation.state$.pipe(
+          map(() => mutation),
+          takeUntil(
+            this.removed$.pipe(
+              filter((removedMutation) => removedMutation === mutation)
+            )
+          )
+        )
+      ),
+      share()
+    ));
+    this.config = config;
+  }
+  subscribe(listener) {
+    const sub = merge(
+      this.added$.pipe(
+        tap((mutation) => {
+          listener({
+            type: "added",
+            mutation
+          });
+        })
+      ),
+      this.removed$.pipe(
+        tap((mutation) => {
+          listener({
+            type: "removed",
+            mutation
+          });
+        })
+      ),
+      this.stateChange$.pipe(
+        tap((mutation) => {
+          listener({
+            type: "updated",
+            action: {
+              ...mutation.state,
+              // @todo
+              type: "success"
+            },
+            mutation
+          });
+        })
+      )
+    ).subscribe();
+    return () => {
+      sub.unsubscribe();
+    };
+  }
+  build(client, options) {
+    const mutation = new Mutation({
+      mutationCache: this,
+      // mutationId: ++this.#mutationId,
+      options: client.defaultMutationOptions(options)
+      // state
+    });
+    const sub = mutation.state$.pipe(
+      /**
+       * Once a mutation is finished and there are no more observers than us
+       * we start the process of cleaning it up based on gc settings
+       */
+      filter(({ status }) => status === "success" || status === "error"),
+      switchMap(
+        () => mutation.observerCount$.pipe(
+          filter((count) => count <= 1),
+          take(1)
+        )
+      ),
+      switchMap(() => timer(mutation.options.gcTime ?? 0)),
+      take(1)
+    ).subscribe({
+      complete: () => {
+        this.remove(mutation);
+      }
+    });
+    this.mutationsSubject.next([
+      ...this.mutationsSubject.getValue(),
+      { mutation, sub }
+    ]);
+    return mutation;
+  }
+  getAll() {
+    return this.findAll();
+  }
+  remove(mutation) {
+    this.removeBy({ predicate: (item) => item === mutation });
+  }
+  removeBy(filters) {
+    const defaultedFilters = { exact: true, ...filters };
+    const predicate = createPredicateForFilters(defaultedFilters);
+    const toRemove = this.mutationsSubject.getValue().filter(({ mutation }) => {
+      return predicate(mutation);
+    }).map(({ mutation, sub }) => {
+      mutation.cancel();
+      sub.unsubscribe();
+      return mutation;
+    });
+    this.mutationsSubject.next(
+      this.mutationsSubject.getValue().filter(({ mutation }) => !toRemove.includes(mutation))
+    );
+  }
+  find(filters) {
+    var _a;
+    const defaultedFilters = { exact: true, ...filters };
+    const predicate = createPredicateForFilters(defaultedFilters);
+    return (_a = this.mutationsSubject.getValue().find(({ mutation }) => predicate(mutation))) == null ? void 0 : _a.mutation;
+  }
+  findLatest(filters) {
+    var _a;
+    const defaultedFilters = { exact: true, ...filters };
+    const predicate = createPredicateForFilters(defaultedFilters);
+    return (_a = this.mutationsSubject.getValue().slice().reverse().find(({ mutation }) => predicate(mutation))) == null ? void 0 : _a.mutation;
+  }
+  findAll(filters = {}) {
+    const defaultedFilters = { exact: true, ...filters };
+    const predicate = createPredicateForFilters(defaultedFilters);
+    return this.mutationsSubject.getValue().filter(({ mutation }) => predicate(mutation)).map(({ mutation }) => mutation);
+  }
+  mutationsBy(filters) {
+    const defaultedFilters = { exact: true, ...filters };
+    const predicate = createPredicateForFilters(defaultedFilters);
+    return this.mutations$.pipe(
+      map((mutations) => mutations.filter(predicate)),
+      distinctUntilChanged(arrayEqual)
+    );
+  }
+  mutationStateBy({
     filters,
     select
   } = {}) {
     const predicate = createPredicateForFilters(filters);
-    const finalSelect = select ?? ((mutation) => mutation.stateSubject.getValue());
-    const lastValue = this.mutationsSubject.getValue().reduce((acc, mutation) => {
+    const finalSelect = select ?? ((mutation) => mutation.state);
+    const lastValue = this.getAll().reduce((acc, mutation) => {
       const result = [...acc, mutation];
       return result;
     }, []).filter(predicate).map((mutation) => finalSelect(mutation));
-    const value$ = this.mutationsSubject.pipe(
-      switchMap((mutations) => {
-        const mutationsOnStateUpdate = mutations.map(
-          (mutation) => mutation.stateSubject.pipe(
-            filter(() => predicate(mutation)),
-            map(() => finalSelect(mutation))
-          )
-        );
-        return mutationsOnStateUpdate.length === 0 ? of([]) : combineLatest(mutationsOnStateUpdate);
+    const value$ = this.stateChange$.pipe(
+      startWith(),
+      map(() => {
+        const filteredMutations = this.getAll().filter(predicate);
+        return filteredMutations.map(finalSelect);
       }),
       distinctUntilChanged(shallowEqual)
     );
     return { value$, lastValue };
   }
-  observe({ key }) {
-    var _a;
-    const currentResultValue = (_a = this.mutationResults$.getValue().get(key)) == null ? void 0 : _a.getValue();
-    const mapResultToObservedResult = (value) => ({
-      ...value,
-      isIdle: value.status === "idle",
-      isPaused: false,
-      isError: value.error !== void 0,
-      isPending: false,
-      isSuccess: value.status === "success"
+  cancelBy(filters) {
+    this.findAll(filters).forEach((mutation) => {
+      mutation.cancel();
     });
-    const lastValue = currentResultValue ? mapResultToObservedResult(currentResultValue) : mapResultToObservedResult({
-      data: void 0,
-      error: void 0,
-      status: "idle"
+  }
+  clear() {
+    this.getAll().forEach((mutation) => {
+      this.remove(mutation);
     });
-    const result$ = this.mutationResults$.pipe(
-      switchMap((resultMap) => {
-        const subject = resultMap.get(key);
-        return subject ?? EMPTY;
-      })
-    ).pipe(
+  }
+}
+class MutationObserver {
+  constructor(client, options) {
+    __publicField(this, "getDerivedState", (state) => {
+      return {
+        ...getDefaultMutationState(),
+        ...state,
+        isSuccess: state.status === "success",
+        isPending: state.status === "pending",
+        isIdle: state.status === "idle",
+        isError: state.status === "error"
+      };
+    });
+    this.client = client;
+    this.options = options;
+  }
+  observeBy(filters) {
+    const reduceStateFromMutation = (values) => {
+      var _a;
+      return values.reduce(
+        (acc, { state, options }) => {
+          if (options.mapOperator === "switch")
+            return state;
+          if (acc && state.submittedAt >= acc.submittedAt) {
+            return {
+              ...state,
+              data: state.data ?? acc.data,
+              error: state.error ?? acc.error
+            };
+          }
+          return acc;
+        },
+        ((_a = values[0]) == null ? void 0 : _a.state) ?? getDefaultMutationState()
+      );
+    };
+    const mutations = this.client.getMutationCache().findAll(filters);
+    const lastValue = this.getDerivedState(
+      reduceStateFromMutation(mutations)
+    );
+    const result$ = this.client.getMutationCache().mutationsBy(filters).pipe(
+      switchMap(
+        (mutations2) => combineLatest(
+          mutations2.map(
+            (mutation) => this.observe(mutation).pipe(
+              map((state) => ({ state, options: mutation.options }))
+            )
+          )
+        )
+      ),
+      map(reduceStateFromMutation),
       filter(isDefined),
-      map((value) => ({
-        ...value,
-        isIdle: value.status === "idle",
-        isPaused: false,
-        isError: value.error !== void 0,
-        isPending: false,
-        isSuccess: value.status === "success"
-      }))
+      map(this.getDerivedState),
+      distinctUntilChanged(shallowEqual)
     );
     return { result$, lastValue };
   }
-  mutate(params) {
-    this.mutate$.next(params);
+  observe(mutation) {
+    return mutation.state$;
   }
-  /**
-   * This will cancel any current mutation runnings.
-   * No discrimination process
-   */
-  cancel(params) {
-    this.cancel$.next(params);
+  subscribe(subscription) {
+    const sub = this.client.getMutationCache().mutations$.pipe(
+      mergeMap((mutations) => {
+        const observed$ = mutations.map(
+          (mutation) => this.observe(mutation).pipe(
+            // we only want next changes
+            skip(1)
+          )
+        );
+        return merge(...observed$);
+      })
+    ).subscribe(subscription);
+    return () => {
+      sub.unsubscribe();
+    };
+  }
+  async mutate(variables, options) {
+    const mergedOptions = {
+      ...this.options,
+      ...options
+    };
+    return await this.client.mutationRunners.mutate({
+      args: variables,
+      options: {
+        mutationFn: async () => void 0,
+        ...mergedOptions,
+        mutationKey: mergedOptions.mutationKey ?? [nanoid()]
+      }
+    });
+  }
+  reset() {
+    this.client.getMutationCache().getAll().forEach((mutation) => {
+      mutation.cancel();
+    });
   }
   destroy() {
-    this.cancel$.complete();
-    this.mutate$.complete();
-    this.mutationResults$.complete();
-    this.mutationRunnersByKey$.complete();
-    this.isMutatingSubject.complete();
-    this.mutationsSubject.complete();
   }
 }
 const createClient = () => {
@@ -1901,7 +2205,6 @@ const createClient = () => {
   const invalidationClient = createInvalidationClient({ queryStore });
   const cacheClient = createCacheClient({ queryStore });
   const refetchClient = createRefetchClient();
-  const mutationClient = new MutationClient();
   let hasCalledStart = false;
   const query = ({
     key,
@@ -2012,6 +2315,8 @@ const createClient = () => {
       })
     )
   );
+  const destroy = () => {
+  };
   const start = () => {
     hasCalledStart = true;
     const queryListenerSub = queryListener$.subscribe();
@@ -2023,14 +2328,10 @@ const createClient = () => {
       queryListenerSub.unsubscribe();
     };
   };
-  const destroy = () => {
-    mutationClient.destroy();
-  };
   return {
     start,
     query,
     queryStore,
-    mutationClient,
     ...invalidationClient,
     ...cacheClient,
     ...refetchClient,
@@ -2038,12 +2339,36 @@ const createClient = () => {
   };
 };
 class QueryClient {
-  constructor() {
+  constructor({ mutationCache } = {
+    mutationCache: new MutationCache()
+  }) {
     __publicField(this, "client");
+    __publicField(this, "mutationCache");
+    __publicField(this, "mutationRunners");
+    __publicField(this, "mutationObserver");
+    this.mutationCache = mutationCache;
+    this.mutationRunners = new MutationRunners(this);
+    this.mutationObserver = new MutationObserver(this);
     this.client = createClient();
   }
+  mount() {
+    const stop = this.client.start();
+    return () => {
+      this.mutationRunners.destroy();
+      stop();
+    };
+  }
+  getMutationCache() {
+    return this.mutationCache;
+  }
+  defaultMutationOptions(options) {
+    return options;
+  }
+  clear() {
+  }
 }
 export {
+  MutationCache,
   QueryClient,
   QueryClientProvider,
   SIGNAL_RESET,