reactjrx 1.62.0 → 1.65.0

package/dist/index.cjs

@@ -74,6 +74,7 @@ function useObserve(source$, unsafeOptions, unsafeDeps) {
         sub.unsubscribe();
       };
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [...deps]
   );
   const getSnapshot = react.useCallback(() => {
@@ -100,7 +101,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 = react.useRef();
@@ -138,7 +144,7 @@ const useSubject = ({
         completed.current = true;
       }
     };
-  }, []);
+  }, [completeOnUnmountRef, onBeforeCompleteRef, subject]);
   return subject;
 };
 const useObserveCallback = (callback, deps) => {
@@ -146,7 +152,7 @@ const useObserveCallback = (callback, deps) => {
   useSubscribe(() => callback(trigger$.current), [trigger$, ...deps]);
   const trigger2 = react.useCallback((arg) => {
     trigger$.current.next(arg);
-  }, []);
+  }, [trigger$]);
   return [trigger2, trigger$];
 };
 function trigger(mapper = rxjs.identity) {
@@ -161,9 +167,10 @@ function trigger(mapper = rxjs.identity) {
 const useBehaviorSubject = (state) => {
   const subject = useConstant(() => new rxjs.BehaviorSubject(state));
   const completed = react.useRef(false);
+  const stateRef = react.useRef(state);
   react.useEffect(() => {
     if (completed.current) {
-      subject.current = new rxjs.BehaviorSubject(state);
+      subject.current = new rxjs.BehaviorSubject(stateRef.current);
       completed.current = false;
     }
     return () => {
@@ -172,7 +179,7 @@ const useBehaviorSubject = (state) => {
         completed.current = true;
       }
     };
-  }, []);
+  }, [subject]);
   return subject;
 };
 const SIGNAL_RESET = Symbol("SIGNAL_RESET");
@@ -401,27 +408,27 @@ function retryBackoff(config) {
 const Context = react.createContext({
   client: null
 });
-const ClientEffect = ({
-  client
-}) => {
+const ClientEffect = ({ client }) => {
   react.useEffect(() => {
-    const destroy = client.start();
+    const stop = client.mount();
     return () => {
-      destroy();
+      stop();
     };
   }, [client]);
   return null;
 };
 const QueryClientProvider = react.memo(
   ({ children, client }) => {
-    const value = react.useMemo(() => ({ client: client.client }), [client]);
+    const value = react.useMemo(() => ({ client }), [client]);
     return /* @__PURE__ */ jsxRuntime.jsxs(Context.Provider, { value, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ClientEffect, { client: value.client }),
       children
     ] });
   }
 );
-const useQueryClient = ({ unsafe = false } = {}) => {
+const useQueryClient = ({
+  unsafe = false
+} = {}) => {
   const context = react.useContext(Context);
   if (!unsafe && context.client === null) {
     throw new Error("You forgot to register the provider");
@@ -458,45 +465,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 = react.useMemo(
-    () => finalQueryClient.mutationClient.mutationResultObserver.observe({
-      key
-    }),
-    [key]
-  );
+  const serializedKey = serializeKey(options.mutationKey ?? defaultKey.current);
+  const mutationsToCancel = react.useRef([]);
+  const observedMutation = react.useMemo(() => {
+    return finalQueryClient.mutationObserver.observeBy({
+      mutationKey: optionsRef.current.mutationKey ?? defaultKey.current
+    });
+  }, [serializedKey, defaultKey, finalQueryClient, optionsRef]);
   const result = useObserve(observedMutation.result$) ?? observedMutation.lastValue;
   const mutate = react.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 = react.useCallback(() => {
-    finalQueryClient.mutationClient.cancel({
-      key: optionsRef.current.mutationKey ?? defaultKey.current
+    mutationsToCancel.current.forEach((mutation) => {
+      mutation.cancel();
     });
-  }, [finalQueryClient]);
+  }, []);
   react.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]);
@@ -572,7 +585,7 @@ const useQueryParams = ({
       options,
       queryFn
     });
-  }, [queryKey, options, queryFn]);
+  }, [queryKey, options, queryFn, params$]);
   return params$;
 };
 const defaultValue = {
@@ -624,7 +637,7 @@ function useQuery({
       return newQueryTrigger$.pipe(
         rxjs.withLatestFrom(key$),
         rxjs.switchMap(([, key]) => {
-          const { result$ } = client.query({
+          const { result$ } = client.client.query({
             key,
             fn$,
             options$,
@@ -666,7 +679,7 @@ function useQuery({
   );
   const refetch = react.useCallback(() => {
     internalRefresh$.current.next({ type: "refetch", ignoreStale: true });
-  }, [client]);
+  }, [internalRefresh$]);
   return { ...result, refetch };
 }
 function useSubscribeEffect(source, unsafeOptions, deps = []) {
@@ -685,7 +698,7 @@ function useSubscribeEffect(source, unsafeOptions, deps = []) {
       }),
       retryOption ? rxjs.retry() : rxjs.identity
     ),
-    [makeObservable]
+    [makeObservable, retryOption]
   );
   useSubscribe(enhancerMakeObservable, deps);
 }
@@ -1491,88 +1504,25 @@ const mergeResults = (stream$) => stream$.pipe(
     ({ data: prevData, ...prev }, { data: currData, ...curr }) => shallowEqual(prev, curr) && shallowEqual(prevData, currData)
   )
 );
-class Mutation {
-  constructor({
-    args,
-    ...options
-  }) {
-    __publicField(this, "stateSubject", new rxjs.ReplaySubject(1));
-    /**
-     * @important
-     * convenience over usage of stateSubject for sync access
-     */
-    __publicField(this, "state", getDefaultMutationState());
-    __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" ? rxjs.defer(() => rxjs.from(mutationFn(args))) : mutationFn;
-    const queryRunner$ = mutationFnObservable.pipe(
-      retryOnError(options),
-      rxjs.take(1),
-      rxjs.map((data) => ({ data, isError: false })),
-      rxjs.catchError((error) => {
-        console.error(error);
-        if (options.onError != null) {
-          options.onError(error, args);
-        }
-        return rxjs.of({ data: error, isError: true });
-      })
-    );
-    const initState$ = rxjs.of({
-      ...this.state,
-      status: "pending",
-      submittedAt: (/* @__PURE__ */ new Date()).getTime()
-    });
-    this.mutation$ = rxjs.merge(
-      initState$,
-      queryRunner$.pipe(
-        rxjs.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,
-      rxjs.tap((value) => {
-        this.state = { ...this.state, ...value };
-        this.stateSubject.next(this.state);
-      }),
-      options.__queryRunnerHook ?? rxjs.identity,
-      rxjs.share()
-    );
-  }
-}
 const createMutationRunner = ({
   __queryFinalizeHook,
   __queryInitHook,
-  __queryTriggerHook
+  __queryTriggerHook,
+  mutationKey,
+  mutationCache
 }) => {
   const trigger$ = new rxjs.Subject();
   const cancel$ = new rxjs.Subject();
   let closed = false;
-  const mapOperator$ = new rxjs.BehaviorSubject("merge");
-  const mutationsSubject = new rxjs.BehaviorSubject([]);
+  const mapOperator$ = new rxjs.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();
@@ -1581,39 +1531,26 @@ const createMutationRunner = ({
     rxjs.filter(isDefined),
     rxjs.distinctUntilChanged()
   );
-  const mutation$ = stableMapOperator$.pipe(
+  const runner$ = stableMapOperator$.pipe(
     __queryInitHook ?? rxjs.identity,
     rxjs.mergeMap((mapOperator) => {
       const switchOperator = mapOperator === "concat" ? rxjs.concatMap : mapOperator === "switch" ? rxjs.switchMap : rxjs.mergeMap;
-      let mutationsForCurrentMapOperatorSubject = [];
-      const removeMutation = (mutation) => {
-        mutationsForCurrentMapOperatorSubject = mutationsForCurrentMapOperatorSubject.filter(
-          (item) => item !== mutation
-        );
-        mutationsSubject.next(
-          mutationsSubject.getValue().filter((item) => item !== mutation)
-        );
-      };
       return trigger$.pipe(
         rxjs.takeUntil(stableMapOperator$.pipe(rxjs.skip(1))),
-        rxjs.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 rxjs.of({});
-          const queryIsOver$ = mutation.mutation$.pipe(
-            rxjs.map(({ data, error }) => error || data)
+          }
+          const mutation$ = mutation.execute(args);
+          const queryIsOver$ = rxjs.merge(
+            cancel$,
+            mutation$.pipe(
+              rxjs.filter(({ status }) => status === "success" || status === "error")
+            )
           );
           const isThisCurrentFunctionLastOneCalled = trigger$.pipe(
             rxjs.take(1),
@@ -1622,7 +1559,7 @@ const createMutationRunner = ({
             rxjs.takeUntil(queryIsOver$)
           );
           const result$ = rxjs.combineLatest([
-            mutation.mutation$,
+            mutation$,
             isThisCurrentFunctionLastOneCalled
           ]).pipe(
             rxjs.map(([result, isLastMutationCalled]) => {
@@ -1631,11 +1568,7 @@ const createMutationRunner = ({
               }
               return result;
             }),
-            rxjs.takeUntil(cancel$.pipe()),
-            mergeResults,
-            rxjs.finalize(() => {
-              removeMutation(mutation);
-            })
+            mergeResults
           );
           return result$;
         }),
@@ -1647,12 +1580,17 @@ const createMutationRunner = ({
     rxjs.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
@@ -1662,115 +1600,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.state.status !== status)
-      return false;
-    return true;
-  };
-  const finalPredicate = predicate ?? defaultPredicate;
-  return finalPredicate;
-};
-class MutationResultObserver {
-  constructor(mutationRunnersByKey$) {
-    /**
-     * 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 rxjs.BehaviorSubject(/* @__PURE__ */ new Map()));
-    mutationRunnersByKey$.pipe(
-      rxjs.switchMap((mapItem) => {
-        const runners = Array.from(mapItem.values()).map((runner) => {
-          const serializedMutationKey = serializeKey(runner.mutationKey);
-          return runner.mutation$.pipe(
-            rxjs.tap((result) => {
-              this.updateResultForKey({
-                serializedMutationKey,
-                result
-              });
-            }),
-            rxjs.finalize(() => {
-              this.deleteResultForKey({ serializedMutationKey });
-            })
-          );
-        });
-        return rxjs.merge(...runners);
-      })
-    ).subscribe();
-  }
-  getDefaultResultValue() {
-    return {
-      ...getDefaultMutationState(),
-      isSuccess: false,
-      isPending: false,
-      isIdle: true,
-      isError: false
-    };
-  }
-  deleteResultForKey({
-    serializedMutationKey
-  }) {
-    const resultMap = this.mutationResults$.getValue();
-    resultMap.delete(serializedMutationKey);
-    this.mutationResults$.next(resultMap);
-  }
-  updateResultForKey({
-    serializedMutationKey,
-    result
-  }) {
-    const resultForKeySubject = this.mutationResults$.getValue().get(serializedMutationKey);
-    const valueForResult = {
-      ...this.getDefaultResultValue(),
-      ...result,
-      isSuccess: result.status === "success",
-      isPending: result.status === "pending",
-      isIdle: result.status === "idle",
-      isError: result.status === "error"
-    };
-    if (!resultForKeySubject) {
-      const resultMap = this.mutationResults$.getValue();
-      resultMap.set(
-        serializedMutationKey,
-        new rxjs.BehaviorSubject(valueForResult)
-      );
-      this.mutationResults$.next(resultMap);
-    } else {
-      resultForKeySubject == null ? void 0 : resultForKeySubject.next(valueForResult);
-    }
-  }
-  observe({ key }) {
-    var _a;
-    const currentResultValue = (_a = this.mutationResults$.getValue().get(key)) == null ? void 0 : _a.getValue();
-    const lastValue = currentResultValue ?? this.getDefaultResultValue();
-    const result$ = this.mutationResults$.pipe(
-      rxjs.switchMap((resultMap) => {
-        const subject = resultMap.get(key);
-        return subject ?? rxjs.EMPTY;
-      })
-    ).pipe(rxjs.filter(isDefined));
-    return { result$, lastValue };
-  }
-  destroy() {
-    this.mutationResults$.complete();
-  }
-}
-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)
@@ -1779,87 +1613,23 @@ class MutationClient {
      * - automatically cleaned as soon as the last mutation is done for a given key
      */
     __publicField(this, "mutationRunnersByKey$", new rxjs.BehaviorSubject(/* @__PURE__ */ new Map()));
-    __publicField(this, "mutate$", new rxjs.Subject());
-    __publicField(this, "cancel$", new rxjs.Subject());
-    /**
-     * Observable to track how many running mutations per runner
-     */
-    __publicField(this, "isMutatingSubject", new rxjs.BehaviorSubject([]));
-    /**
-     * List of all mutations running
-     */
-    __publicField(this, "mutationsSubject", new rxjs.BehaviorSubject([]));
-    __publicField(this, "mutationResultObserver", new MutationResultObserver(
-      this.mutationRunnersByKey$
-    ));
-    this.mutate$.pipe(
-      rxjs.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();
-          mutationForKey.mutationsSubject.pipe(
-            rxjs.distinctUntilChanged(shallowEqual),
-            rxjs.skip(1),
-            rxjs.filter((items) => items.length === 0)
-          ).subscribe(() => {
-            mutationForKey == null ? void 0 : mutationForKey.destroy();
-            this.deleteMutationRunnersByKey(serializedMutationKey);
-          });
-        }
-        mutationForKey.trigger({ args, options });
-      })
-    ).subscribe();
-    this.cancel$.pipe(
-      rxjs.tap(({ key }) => {
-        var _a;
-        const serializedKey = serializeKey(key);
-        (_a = this.mutationRunnersByKey$.getValue().get(serializedKey)) == null ? void 0 : _a.cancel$.next();
-      })
-    ).subscribe();
-    this.mutationRunnersByKey$.pipe(
-      rxjs.switchMap((mapItem) => {
-        const mutationRunners = Array.from(mapItem.values());
-        const mutations$ = rxjs.combineLatest(
-          mutationRunners.map(
-            (runner) => runner.mutationsSubject.pipe(
-              rxjs.map((mutations) => mutations.map((mutation) => mutation))
-            )
-          )
-        );
-        return mutations$.pipe(
-          rxjs.map(
-            (mutationsByKeys) => mutationsByKeys.reduce((acc, value) => [...acc, ...value], [])
-          )
-        );
-      }),
-      rxjs.startWith([]),
-      rxjs.distinctUntilChanged(shallowEqual)
-    ).subscribe(this.mutationsSubject);
+    this.client = client;
   }
   /**
    * @helper
    */
   setMutationRunnersByKey(key, value) {
-    const map2 = this.mutationRunnersByKey$.getValue();
-    map2.set(key, value);
-    this.mutationRunnersByKey$.next(map2);
+    const map = this.mutationRunnersByKey$.getValue();
+    map.set(key, value);
+    this.mutationRunnersByKey$.next(map);
   }
   /**
    * @helper
    */
   deleteMutationRunnersByKey(key) {
-    const map2 = this.mutationRunnersByKey$.getValue();
-    map2.delete(key);
-    this.mutationRunnersByKey$.next(map2);
+    const map = this.mutationRunnersByKey$.getValue();
+    map.delete(key);
+    this.mutationRunnersByKey$.next(map);
   }
   /**
    * @helper
@@ -1867,65 +1637,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.state.status === "pending" ? 1 + acc : acc;
-    }, 0);
-    const lastValue = reduceByNumber(this.mutationsSubject.getValue());
-    const value$ = this.mutationsSubject.pipe(
-      rxjs.switchMap((mutations) => {
-        const mutationsOnStateUpdate = mutations.map(
-          (mutation) => mutation.stateSubject.pipe(rxjs.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(
+        rxjs.distinctUntilChanged(shallowEqual),
+        rxjs.skip(1),
+        rxjs.filter((items) => items.length === 0),
+        rxjs.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(rxjs.last()).subscribe({
+        error: reject,
+        next: resolve
+      });
+    });
+  }
+  destroy() {
+    this.mutationRunnersByKey$.complete();
+  }
+}
+const functionAsObservable = (fn) => {
+  return rxjs.defer(() => {
+    const result = fn();
+    if (result instanceof Promise) {
+      return rxjs.from(result);
+    }
+    if (result instanceof rxjs.Observable) {
+      return result;
+    }
+    return rxjs.of(result);
+  });
+};
+class Mutation {
+  constructor({
+    options,
+    mutationCache
+  }) {
+    __publicField(this, "state", getDefaultMutationState());
+    __publicField(this, "state$");
+    __publicField(this, "options");
+    __publicField(this, "mutationCache");
+    __publicField(this, "observerCount", new rxjs.BehaviorSubject(0));
+    __publicField(this, "observerCount$", this.observerCount.asObservable());
+    __publicField(this, "cancelSubject", new rxjs.Subject());
+    __publicField(this, "executeSubject", new rxjs.Subject());
+    this.options = options;
+    this.mutationCache = mutationCache;
+    this.state$ = rxjs.merge(
+      rxjs.of(this.state),
+      this.executeSubject.pipe(
+        rxjs.switchMap((variables) => this.createMutation(variables)),
+        rxjs.tap((value) => {
+          this.state = { ...this.state, ...value };
+        }),
+        rxjs.takeUntil(this.cancelSubject)
+      ),
+      rxjs.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)
+       */
+      rxjs.shareReplay({ bufferSize: 1, refCount: true }),
+      rxjs.takeUntil(this.cancelSubject),
+      (source) => {
+        return new rxjs.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 ? rxjs.of([]) : rxjs.combineLatest(mutationsOnStateUpdate);
-      }),
-      rxjs.map(reduceByNumber),
-      rxjs.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 = rxjs.concat(
+      onCacheMutate$.pipe(
+        rxjs.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(
+      rxjs.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),
+          rxjs.take(1),
+          rxjs.map((data) => ({ data, context, isError: false })),
+          rxjs.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 rxjs.concat(onCacheError$, onError$).pipe(
+              rxjs.toArray(),
+              rxjs.map(() => ({ data: error, context, isError: true }))
+            );
+          })
+        );
+      })
+    );
+    const initState$ = rxjs.of({
+      ...this.state,
+      variables,
+      status: "pending",
+      submittedAt: (/* @__PURE__ */ new Date()).getTime()
+    });
+    const mutation$ = rxjs.merge(
+      initState$,
+      queryRunner$.pipe(
+        rxjs.switchMap(({ data: dataOrError, isError, context }) => {
+          const error = isError ? dataOrError : null;
+          const data = isError ? void 0 : dataOrError;
+          const onCacheSuccess$ = isError ? rxjs.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 ? rxjs.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$ = rxjs.concat(
+            onCacheSuccess$,
+            onSuccess$,
+            onCacheSettled$,
+            onSettled$
+          ).pipe(
+            rxjs.toArray(),
+            rxjs.map(
+              () => isError ? {
+                status: "error",
+                error,
+                data,
+                context,
+                variables
+              } : {
+                status: "success",
+                error,
+                data,
+                context,
+                variables
+              }
+            )
+          );
+          return result$;
+        })
+      )
+    ).pipe(
+      mergeResults,
+      this.options.__queryRunnerHook ?? rxjs.identity,
+      rxjs.takeUntil(this.cancelSubject)
+    );
+    return mutation$;
+  }
+  observeTillFinished() {
+    return this.state$.pipe(
+      rxjs.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 rxjs.BehaviorSubject([]));
+    __publicField(this, "mutations$", this.mutationsSubject.pipe(
+      rxjs.map((mutations) => mutations.map(({ mutation }) => mutation)),
+      rxjs.distinctUntilChanged(arrayEqual),
+      rxjs.share()
+    ));
+    __publicField(this, "added$", this.mutations$.pipe(
+      rxjs.pairwise(),
+      rxjs.map(
+        ([previous, current]) => current.filter((mutation) => !previous.includes(mutation))[0]
+      ),
+      rxjs.filter(isDefined),
+      rxjs.share()
+    ));
+    __publicField(this, "removed$", this.mutations$.pipe(
+      rxjs.pairwise(),
+      rxjs.map(
+        ([previous, current]) => previous.filter((mutation) => !current.includes(mutation))
+      ),
+      rxjs.mergeMap((removedItems) => rxjs.from(removedItems)),
+      rxjs.share()
+    ));
+    __publicField(this, "stateChange$", this.added$.pipe(
+      rxjs.mergeMap(
+        (mutation) => mutation.state$.pipe(
+          rxjs.map(() => mutation),
+          rxjs.takeUntil(
+            this.removed$.pipe(
+              rxjs.filter((removedMutation) => removedMutation === mutation)
+            )
+          )
+        )
+      ),
+      rxjs.share()
+    ));
+    this.config = config;
+  }
+  subscribe(listener) {
+    const sub = rxjs.merge(
+      this.added$.pipe(
+        rxjs.tap((mutation) => {
+          listener({
+            type: "added",
+            mutation
+          });
+        })
+      ),
+      this.removed$.pipe(
+        rxjs.tap((mutation) => {
+          listener({
+            type: "removed",
+            mutation
+          });
+        })
+      ),
+      this.stateChange$.pipe(
+        rxjs.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
+       */
+      rxjs.filter(({ status }) => status === "success" || status === "error"),
+      rxjs.switchMap(
+        () => mutation.observerCount$.pipe(
+          rxjs.filter((count) => count <= 1),
+          rxjs.take(1)
+        )
+      ),
+      rxjs.switchMap(() => rxjs.timer(mutation.options.gcTime ?? 0)),
+      rxjs.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(
+      rxjs.map((mutations) => mutations.filter(predicate)),
+      rxjs.distinctUntilChanged(arrayEqual)
+    );
+  }
+  mutationStateBy({
     filters,
     select
   } = {}) {
     const predicate = createPredicateForFilters(filters);
     const finalSelect = select ?? ((mutation) => mutation.state);
-    const lastValue = this.mutationsSubject.getValue().reduce((acc, mutation) => {
+    const lastValue = this.getAll().reduce((acc, mutation) => {
       const result = [...acc, mutation];
       return result;
     }, []).filter(predicate).map((mutation) => finalSelect(mutation));
-    const value$ = this.mutationsSubject.pipe(
-      rxjs.switchMap((mutations) => {
-        const mutationsOnStateUpdate = mutations.map(
-          (mutation) => mutation.stateSubject.pipe(
-            rxjs.filter(() => predicate(mutation)),
-            rxjs.map(() => finalSelect(mutation))
-          )
-        );
-        return mutationsOnStateUpdate.length === 0 ? rxjs.of([]) : rxjs.combineLatest(mutationsOnStateUpdate);
+    const value$ = this.stateChange$.pipe(
+      rxjs.startWith(),
+      rxjs.map(() => {
+        const filteredMutations = this.getAll().filter(predicate);
+        return filteredMutations.map(finalSelect);
       }),
       rxjs.distinctUntilChanged(shallowEqual)
     );
     return { value$, lastValue };
   }
-  mutate(params) {
-    this.mutate$.next(params);
+  cancelBy(filters) {
+    this.findAll(filters).forEach((mutation) => {
+      mutation.cancel();
+    });
   }
-  /**
-   * This will cancel any current mutation runnings.
-   * No discrimination process
-   */
-  cancel(params) {
-    this.cancel$.next(params);
+  clear() {
+    this.getAll().forEach((mutation) => {
+      this.remove(mutation);
+    });
+  }
+}
+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(
+      rxjs.switchMap(
+        (mutations2) => rxjs.combineLatest(
+          mutations2.map(
+            (mutation) => this.observe(mutation).pipe(
+              rxjs.map((state) => ({ state, options: mutation.options }))
+            )
+          )
+        )
+      ),
+      rxjs.map(reduceStateFromMutation),
+      rxjs.filter(isDefined),
+      rxjs.map(this.getDerivedState),
+      rxjs.distinctUntilChanged(shallowEqual)
+    );
+    return { result$, lastValue };
+  }
+  observe(mutation) {
+    return mutation.state$;
+  }
+  subscribe(subscription) {
+    const sub = this.client.getMutationCache().mutations$.pipe(
+      rxjs.mergeMap((mutations) => {
+        const observed$ = mutations.map(
+          (mutation) => this.observe(mutation).pipe(
+            // we only want next changes
+            rxjs.skip(1)
+          )
+        );
+        return rxjs.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.mutationResultObserver.destroy();
-    this.mutationRunnersByKey$.complete();
-    this.isMutatingSubject.complete();
-    this.mutationsSubject.complete();
   }
 }
 const createClient = () => {
@@ -1933,7 +2207,6 @@ const createClient = () => {
   const invalidationClient = createInvalidationClient({ queryStore });
   const cacheClient = createCacheClient({ queryStore });
   const refetchClient = createRefetchClient();
-  const mutationClient = new MutationClient();
   let hasCalledStart = false;
   const query = ({
     key,
@@ -2044,6 +2317,8 @@ const createClient = () => {
       })
     )
   );
+  const destroy = () => {
+  };
   const start = () => {
     hasCalledStart = true;
     const queryListenerSub = queryListener$.subscribe();
@@ -2055,14 +2330,10 @@ const createClient = () => {
       queryListenerSub.unsubscribe();
     };
   };
-  const destroy = () => {
-    mutationClient.destroy();
-  };
   return {
     start,
     query,
     queryStore,
-    mutationClient,
     ...invalidationClient,
     ...cacheClient,
     ...refetchClient,
@@ -2070,11 +2341,35 @@ 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() {
+  }
 }
+exports.MutationCache = MutationCache;
 exports.QueryClient = QueryClient;
 exports.QueryClientProvider = QueryClientProvider;
 exports.SIGNAL_RESET = SIGNAL_RESET;