reactjrx 1.55.0 → 1.57.0

package/dist/index.cjs

@@ -428,67 +428,69 @@ const useQueryClient = () => {
   }
   return context.client;
 };
+const serializeObject = (object) => {
+  if (Array.isArray(object)) {
+    return object.reduce((acc, value, index) => {
+      if (index === object.length - 1)
+        return `${acc}${serializeObject(value)}]`;
+      return `${acc}${serializeObject(value)},`;
+    }, "[");
+  }
+  if (object === void 0)
+    return "";
+  return JSON.stringify(object, Object.keys(object).sort());
+};
+const serializeKey = (key) => {
+  if (key.length === 0)
+    return "[]";
+  return serializeObject(key);
+};
+const nanoid = (size = 21) => crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {
+  byte &= 63;
+  if (byte < 36) {
+    id += byte.toString(36);
+  } else if (byte < 62) {
+    id += (byte - 26).toString(36).toUpperCase();
+  } else if (byte > 62) {
+    id += "-";
+  } else {
+    id += "_";
+  }
+  return id;
+}, "");
 function useMutation(options) {
   const client = useQueryClient();
   const optionsRef = useLiveRef(options);
-  const optionsSubject = useBehaviorSubject(options);
-  const [bufferTriggers, setBufferTriggers] = react.useState([]);
-  const createMutation = react.useCallback(
-    () => client.createMutation(
-      optionsSubject.current.pipe(
-        rxjs.map((options2) => ({
-          mutationKey: ["none"],
-          ...options2
-        }))
-      )
-    ),
-    []
-  );
-  const [mutation, setMutation] = react.useState(void 0);
-  const { mutation$, trigger$, reset$ } = mutation ?? {};
-  react.useEffect(() => {
-    const mutation2 = createMutation();
-    setMutation(mutation2);
-    return () => {
-      mutation2.destroy();
-    };
-  }, []);
-  const result = useObserve(
-    () => !mutation$ ? rxjs.NEVER : mutation$.pipe(
-      optionsRef.current.__triggerHook ?? rxjs.identity,
-      rxjs.finalize(() => {
-        console.log("finalize");
-      })
-    ),
-    {
-      defaultValue: {
-        data: void 0,
-        error: void 0,
-        status: "idle"
-      },
-      unsubscribeOnUnmount: optionsRef.current.cancelOnUnMount ?? false
-    },
-    [mutation$]
+  const defaultKey = useConstant(() => [nanoid()]);
+  const key = serializeKey(options.mutationKey ?? defaultKey.current);
+  const observedMutation = react.useMemo(
+    () => client.mutationClient.observe({ key }),
+    [key]
   );
+  const result = useObserve(observedMutation.result$) ?? observedMutation.lastValue;
   const mutate = react.useCallback(
     (mutationArgs) => {
-      if (!trigger$) {
-        setBufferTriggers((value) => [...value, mutationArgs]);
-      }
-      trigger$ == null ? void 0 : trigger$.next(mutationArgs);
+      client.mutationClient.mutate({
+        options: { ...optionsRef.current, mutationKey: key },
+        args: mutationArgs
+      });
     },
-    [trigger$]
+    [client, key]
   );
-  react.useEffect(() => {
-    if (mutation && !mutation.getClosed()) {
-      bufferTriggers.forEach((args) => {
-        mutation.trigger$.next(args);
-      });
-    }
-  }, [bufferTriggers, mutation]);
   const reset = react.useCallback(() => {
-    reset$ == null ? void 0 : reset$.next();
-  }, [reset$]);
+    client.mutationClient.reset({
+      key: optionsRef.current.mutationKey ?? defaultKey.current
+    });
+  }, [client]);
+  react.useEffect(() => {
+    return () => {
+      if (optionsRef.current.cancelOnUnMount) {
+        client.mutationClient.reset({
+          key: optionsRef.current.mutationKey ?? defaultKey.current
+        });
+      }
+    };
+  }, []);
   return { mutate, reset, ...result };
 }
 const arrayEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
@@ -681,23 +683,6 @@ function useSubscribeEffect(source, unsafeOptions, deps = []) {
   );
   useSubscribe(enhancerMakeObservable, deps);
 }
-const serializeObject = (object) => {
-  if (Array.isArray(object)) {
-    return object.reduce((acc, value, index) => {
-      if (index === object.length - 1)
-        return `${acc}${serializeObject(value)}]`;
-      return `${acc}${serializeObject(value)},`;
-    }, "[");
-  }
-  if (object === void 0)
-    return "";
-  return JSON.stringify(object, Object.keys(object).sort());
-};
-const serializeKey = (key) => {
-  if (key.length === 0)
-    return "[]";
-  return serializeObject(key);
-};
 const retryOnError = (options) => retryBackoff({
   initialInterval: 100,
   ...typeof options.retry === "function" ? {
@@ -1490,120 +1475,237 @@ const mergeResults = (stream$) => stream$.pipe(
     {
       data: void 0,
       error: void 0,
-      // fetchStatus: "idle",
-      status: "loading"
+      status: "pending"
     }
   ),
   rxjs.distinctUntilChanged(
     ({ data: prevData, ...prev }, { data: currData, ...curr }) => shallowEqual(prev, curr) && shallowEqual(prevData, currData)
   )
 );
-class MutationClient {
-  constructor() {
-    __publicField(this, "createMutation", (options$) => {
-      const trigger$ = new rxjs.Subject();
-      const reset$ = new rxjs.Subject();
-      let closed = false;
-      const destroy = () => {
-        if (closed) {
-          throw new Error("Trying to close an already closed mutation");
-        }
-        closed = true;
-        trigger$.complete();
-        reset$.complete();
-      };
-      const initOptions = options$.pipe(
-        rxjs.tap(({ mutationKey }) => {
-          const serializedKey = serializeKey(mutationKey);
-          Logger.log("query$", serializedKey);
+const createMutationRunner = ({
+  __queryFinalizeHook,
+  __queryInitHook,
+  __queryTriggerHook
+}) => {
+  const trigger$ = new rxjs.Subject();
+  const reset$ = new rxjs.Subject();
+  let closed = false;
+  const mapOperator$ = new rxjs.BehaviorSubject("merge");
+  const mutationsRunning$ = new rxjs.BehaviorSubject(0);
+  const destroy = () => {
+    if (closed) {
+      throw new Error("Trying to close an already closed mutation");
+    }
+    closed = true;
+    mapOperator$.complete();
+    mutationsRunning$.complete();
+    trigger$.complete();
+    reset$.complete();
+  };
+  const stableMapOperator$ = mapOperator$.pipe(
+    rxjs.filter(isDefined),
+    rxjs.distinctUntilChanged()
+  );
+  const mutation$ = stableMapOperator$.pipe(
+    __queryInitHook ?? rxjs.identity,
+    rxjs.mergeMap((mapOperator) => {
+      const switchOperator = mapOperator === "concat" ? rxjs.concatMap : mapOperator === "switch" ? rxjs.switchMap : rxjs.mergeMap;
+      return trigger$.pipe(
+        rxjs.takeUntil(stableMapOperator$.pipe(rxjs.skip(1))),
+        rxjs.tap(() => {
+          mutationsRunning$.next(mutationsRunning$.getValue() + 1);
         }),
-        rxjs.take(1)
-      );
-      const mutation$ = initOptions.pipe(
-        rxjs.mergeMap(
-          (options) => rxjs.of(options).pipe(
-            options.__queryInitHook ?? rxjs.identity
-          )
-        ),
-        rxjs.mergeMap((options) => {
-          const { mapOperator } = options;
-          const switchOperator = mapOperator === "concat" ? rxjs.concatMap : mapOperator === "switch" ? rxjs.switchMap : rxjs.mergeMap;
-          return trigger$.pipe(
-            rxjs.withLatestFrom(options$),
-            switchOperator(([mutationArg, { mutationFn }]) => {
-              const queryRunner$ = rxjs.defer(
-                () => rxjs.from(mutationFn(mutationArg))
-              ).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, mutationArg);
-                  }
-                  return rxjs.of({ data: error, isError: true });
-                }),
-                rxjs.share()
-              );
-              const queryIsOver$ = queryRunner$.pipe(
-                rxjs.map(({ data, isError }) => isError || data)
-              );
-              const isThisCurrentFunctionLastOneCalled = trigger$.pipe(
-                rxjs.take(1),
-                rxjs.map(() => mapOperator === "concat"),
-                rxjs.startWith(true),
-                rxjs.takeUntil(queryIsOver$)
-              );
-              const loading$ = rxjs.of({
-                status: "loading"
-              });
-              return rxjs.merge(
-                loading$,
-                rxjs.combineLatest([
-                  queryRunner$,
-                  isThisCurrentFunctionLastOneCalled
-                ]).pipe(
-                  rxjs.map(([{ data, isError }, isLastMutationCalled]) => {
-                    if (!isError) {
-                      if (options.onSuccess != null)
-                        options.onSuccess(data, mutationArg);
-                    }
-                    if (isLastMutationCalled) {
-                      return isError ? {
-                        status: "error",
-                        error: data,
-                        data: void 0
-                      } : {
-                        status: "success",
-                        error: void 0,
-                        data
-                      };
-                    }
-                    return {};
-                  }),
-                  rxjs.takeUntil(reset$)
-                )
-              ).pipe(options.__queryRunnerHook ?? rxjs.identity);
+        switchOperator(({ args, options }) => {
+          const queryRunner$ = rxjs.defer(() => rxjs.from(options.mutationFn(args))).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 });
             }),
-            options.__queryTriggerHook ?? rxjs.identity,
-            mergeResults
+            rxjs.share()
+          );
+          const queryIsOver$ = queryRunner$.pipe(
+            rxjs.map(({ data, isError }) => isError || data)
+          );
+          const isThisCurrentFunctionLastOneCalled = trigger$.pipe(
+            rxjs.take(1),
+            rxjs.map(() => mapOperator === "concat"),
+            rxjs.startWith(true),
+            rxjs.takeUntil(queryIsOver$)
+          );
+          const loading$ = rxjs.of({
+            status: "pending"
+          });
+          return rxjs.merge(
+            loading$,
+            rxjs.combineLatest([
+              queryRunner$,
+              isThisCurrentFunctionLastOneCalled
+            ]).pipe(
+              rxjs.map(([{ data, isError }, isLastMutationCalled]) => {
+                if (!isError) {
+                  if (options.onSuccess != null)
+                    options.onSuccess(data, args);
+                }
+                if (isLastMutationCalled) {
+                  return isError ? {
+                    status: "error",
+                    error: data,
+                    data: void 0
+                  } : {
+                    status: "success",
+                    error: void 0,
+                    data
+                  };
+                }
+                return {};
+              }),
+              rxjs.takeUntil(reset$)
+            )
+          ).pipe(
+            options.__queryRunnerHook ?? rxjs.identity,
+            rxjs.finalize(() => {
+              mutationsRunning$.next(mutationsRunning$.getValue() - 1);
+            })
           );
         }),
-        rxjs.finalize(() => {
-          if (!closed) {
-            destroy();
-          }
-        })
+        __queryTriggerHook ?? rxjs.identity,
+        mergeResults
       );
-      return {
-        mutation$,
-        trigger$,
-        reset$,
-        destroy,
-        getClosed: () => closed
-      };
+    }),
+    __queryFinalizeHook ?? rxjs.identity
+  );
+  return {
+    mutation$,
+    trigger: ({
+      args,
+      options
+    }) => {
+      mapOperator$.next(options.mapOperator);
+      trigger$.next({ args, options });
+    },
+    reset$,
+    destroy,
+    mutationsRunning$,
+    getClosed: () => closed
+  };
+};
+class MutationClient {
+  constructor() {
+    /**
+     * Contain all active mutation for a given key.
+     * A mutation ca have several triggers running (it is not necessarily one function running)
+     *
+     * @important
+     * - automatically cleaned as soon as the last mutation is done for a given key
+     */
+    __publicField(this, "mutationRunners$", new rxjs.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 rxjs.BehaviorSubject(/* @__PURE__ */ new Map()));
+    __publicField(this, "mutate$", new rxjs.Subject());
+    __publicField(this, "reset$", new rxjs.Subject());
+    this.mutate$.pipe(
+      rxjs.tap(({ options, args }) => {
+        const { mutationKey } = options;
+        let mutationForKey = this.mutationRunners$.getValue().get(mutationKey);
+        if (!mutationForKey) {
+          mutationForKey = createMutationRunner(options);
+          this.mutationRunners$.getValue().set(mutationKey, mutationForKey);
+          mutationForKey.mutation$.subscribe((result) => {
+            let resultForKeySubject = this.mutationResults$.getValue().get(mutationKey);
+            if (!resultForKeySubject) {
+              resultForKeySubject = new rxjs.BehaviorSubject(result);
+              const resultMap = this.mutationResults$.getValue();
+              resultMap.set(mutationKey, resultForKeySubject);
+              this.mutationResults$.next(resultMap);
+            } else {
+              resultForKeySubject == null ? void 0 : resultForKeySubject.next(result);
+            }
+          });
+          mutationForKey.mutationsRunning$.pipe(
+            rxjs.skip(1),
+            rxjs.filter((number) => number === 0)
+          ).subscribe(() => {
+            mutationForKey == null ? void 0 : mutationForKey.destroy();
+            const resultMap = this.mutationResults$.getValue();
+            resultMap.delete(mutationKey);
+            this.mutationResults$.next(resultMap);
+            const mutationsMap = this.mutationRunners$.getValue();
+            mutationsMap.delete(mutationKey);
+            this.mutationRunners$.next(mutationsMap);
+          });
+        }
+        mutationForKey.trigger({ args, options });
+      })
+    ).subscribe();
+    this.reset$.pipe(
+      rxjs.tap(({ key }) => {
+        var _a;
+        const serializedKey = serializeKey(key);
+        (_a = this.mutationRunners$.getValue().get(serializedKey)) == null ? void 0 : _a.reset$.next();
+      })
+    ).subscribe();
+  }
+  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"
     });
+    const lastValue = currentResultValue ? mapResultToObservedResult(currentResultValue) : mapResultToObservedResult({
+      data: void 0,
+      error: void 0,
+      status: "idle"
+    });
+    const result$ = this.mutationResults$.pipe(
+      rxjs.switchMap((resultMap) => {
+        const subject = resultMap.get(key);
+        return subject ?? rxjs.EMPTY;
+      })
+    ).pipe(
+      rxjs.filter(isDefined),
+      rxjs.map((value) => ({
+        ...value,
+        isIdle: value.status === "idle",
+        isPaused: false,
+        isError: value.error !== void 0,
+        isPending: false,
+        isSuccess: value.status === "success"
+      }))
+    );
+    return { result$, lastValue };
+  }
+  mutate(params) {
+    this.mutate$.next(params);
+  }
+  /**
+   * This will reset any current mutation runnings.
+   * No discrimination process
+   */
+  reset(params) {
+    this.reset$.next(params);
+  }
+  destroy() {
+    this.reset$.complete();
+    this.mutate$.complete();
+    this.mutationResults$.complete();
+    this.mutationRunners$.complete();
   }
 }
 const createClient = () => {
@@ -1727,20 +1829,24 @@ const createClient = () => {
     const queryListenerSub = queryListener$.subscribe();
     const started = [queryStore.start()];
     return () => {
-      started.forEach((destroy) => {
-        destroy();
+      started.forEach((destroy2) => {
+        destroy2();
       });
       queryListenerSub.unsubscribe();
     };
   };
+  const destroy = () => {
+    mutationClient.destroy();
+  };
   return {
     start,
     query,
     queryStore,
-    ...mutationClient,
+    mutationClient,
     ...invalidationClient,
     ...cacheClient,
-    ...refetchClient
+    ...refetchClient,
+    destroy
   };
 };
 class QueryClient {

package/dist/index.js

@@ -4,8 +4,8 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { useRef, useMemo, useCallback, useSyncExternalStore, useEffect, createContext, memo, useContext, useState } from "react";
-import { distinctUntilChanged, tap, finalize, catchError, EMPTY, Subject, identity, BehaviorSubject, map, of, zip, merge, throttleTime, asyncScheduler, switchMap, from, defer, iif, timer, throwError, NEVER, fromEvent, filter, skip, withLatestFrom, scan, retry, shareReplay, endWith, delay, take, takeUntil, share, startWith, pairwise, mergeMap, combineLatest, concatMap as concatMap$1, takeWhile } from "rxjs";
+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 { retryWhen, concatMap, tap as tap$1 } from "rxjs/operators";
 import { jsxs, jsx } from "react/jsx-runtime";
 const useLiveRef = (value) => {
@@ -426,67 +426,69 @@ const useQueryClient = () => {
   }
   return context.client;
 };
+const serializeObject = (object) => {
+  if (Array.isArray(object)) {
+    return object.reduce((acc, value, index) => {
+      if (index === object.length - 1)
+        return `${acc}${serializeObject(value)}]`;
+      return `${acc}${serializeObject(value)},`;
+    }, "[");
+  }
+  if (object === void 0)
+    return "";
+  return JSON.stringify(object, Object.keys(object).sort());
+};
+const serializeKey = (key) => {
+  if (key.length === 0)
+    return "[]";
+  return serializeObject(key);
+};
+const nanoid = (size = 21) => crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {
+  byte &= 63;
+  if (byte < 36) {
+    id += byte.toString(36);
+  } else if (byte < 62) {
+    id += (byte - 26).toString(36).toUpperCase();
+  } else if (byte > 62) {
+    id += "-";
+  } else {
+    id += "_";
+  }
+  return id;
+}, "");
 function useMutation(options) {
   const client = useQueryClient();
   const optionsRef = useLiveRef(options);
-  const optionsSubject = useBehaviorSubject(options);
-  const [bufferTriggers, setBufferTriggers] = useState([]);
-  const createMutation = useCallback(
-    () => client.createMutation(
-      optionsSubject.current.pipe(
-        map((options2) => ({
-          mutationKey: ["none"],
-          ...options2
-        }))
-      )
-    ),
-    []
-  );
-  const [mutation, setMutation] = useState(void 0);
-  const { mutation$, trigger$, reset$ } = mutation ?? {};
-  useEffect(() => {
-    const mutation2 = createMutation();
-    setMutation(mutation2);
-    return () => {
-      mutation2.destroy();
-    };
-  }, []);
-  const result = useObserve(
-    () => !mutation$ ? NEVER : mutation$.pipe(
-      optionsRef.current.__triggerHook ?? identity,
-      finalize(() => {
-        console.log("finalize");
-      })
-    ),
-    {
-      defaultValue: {
-        data: void 0,
-        error: void 0,
-        status: "idle"
-      },
-      unsubscribeOnUnmount: optionsRef.current.cancelOnUnMount ?? false
-    },
-    [mutation$]
+  const defaultKey = useConstant(() => [nanoid()]);
+  const key = serializeKey(options.mutationKey ?? defaultKey.current);
+  const observedMutation = useMemo(
+    () => client.mutationClient.observe({ key }),
+    [key]
   );
+  const result = useObserve(observedMutation.result$) ?? observedMutation.lastValue;
   const mutate = useCallback(
     (mutationArgs) => {
-      if (!trigger$) {
-        setBufferTriggers((value) => [...value, mutationArgs]);
-      }
-      trigger$ == null ? void 0 : trigger$.next(mutationArgs);
+      client.mutationClient.mutate({
+        options: { ...optionsRef.current, mutationKey: key },
+        args: mutationArgs
+      });
     },
-    [trigger$]
+    [client, key]
   );
-  useEffect(() => {
-    if (mutation && !mutation.getClosed()) {
-      bufferTriggers.forEach((args) => {
-        mutation.trigger$.next(args);
-      });
-    }
-  }, [bufferTriggers, mutation]);
   const reset = useCallback(() => {
-    reset$ == null ? void 0 : reset$.next();
-  }, [reset$]);
+    client.mutationClient.reset({
+      key: optionsRef.current.mutationKey ?? defaultKey.current
+    });
+  }, [client]);
+  useEffect(() => {
+    return () => {
+      if (optionsRef.current.cancelOnUnMount) {
+        client.mutationClient.reset({
+          key: optionsRef.current.mutationKey ?? defaultKey.current
+        });
+      }
+    };
+  }, []);
   return { mutate, reset, ...result };
 }
 const arrayEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
@@ -679,23 +681,6 @@ function useSubscribeEffect(source, unsafeOptions, deps = []) {
   );
   useSubscribe(enhancerMakeObservable, deps);
 }
-const serializeObject = (object) => {
-  if (Array.isArray(object)) {
-    return object.reduce((acc, value, index) => {
-      if (index === object.length - 1)
-        return `${acc}${serializeObject(value)}]`;
-      return `${acc}${serializeObject(value)},`;
-    }, "[");
-  }
-  if (object === void 0)
-    return "";
-  return JSON.stringify(object, Object.keys(object).sort());
-};
-const serializeKey = (key) => {
-  if (key.length === 0)
-    return "[]";
-  return serializeObject(key);
-};
 const retryOnError = (options) => retryBackoff({
   initialInterval: 100,
   ...typeof options.retry === "function" ? {
@@ -1488,120 +1473,237 @@ const mergeResults = (stream$) => stream$.pipe(
     {
       data: void 0,
       error: void 0,
-      // fetchStatus: "idle",
-      status: "loading"
+      status: "pending"
     }
   ),
   distinctUntilChanged(
     ({ data: prevData, ...prev }, { data: currData, ...curr }) => shallowEqual(prev, curr) && shallowEqual(prevData, currData)
   )
 );
-class MutationClient {
-  constructor() {
-    __publicField(this, "createMutation", (options$) => {
-      const trigger$ = new Subject();
-      const reset$ = new Subject();
-      let closed = false;
-      const destroy = () => {
-        if (closed) {
-          throw new Error("Trying to close an already closed mutation");
-        }
-        closed = true;
-        trigger$.complete();
-        reset$.complete();
-      };
-      const initOptions = options$.pipe(
-        tap(({ mutationKey }) => {
-          const serializedKey = serializeKey(mutationKey);
-          Logger.log("query$", serializedKey);
+const createMutationRunner = ({
+  __queryFinalizeHook,
+  __queryInitHook,
+  __queryTriggerHook
+}) => {
+  const trigger$ = new Subject();
+  const reset$ = new Subject();
+  let closed = false;
+  const mapOperator$ = new BehaviorSubject("merge");
+  const mutationsRunning$ = new BehaviorSubject(0);
+  const destroy = () => {
+    if (closed) {
+      throw new Error("Trying to close an already closed mutation");
+    }
+    closed = true;
+    mapOperator$.complete();
+    mutationsRunning$.complete();
+    trigger$.complete();
+    reset$.complete();
+  };
+  const stableMapOperator$ = mapOperator$.pipe(
+    filter(isDefined),
+    distinctUntilChanged()
+  );
+  const mutation$ = stableMapOperator$.pipe(
+    __queryInitHook ?? identity,
+    mergeMap((mapOperator) => {
+      const switchOperator = mapOperator === "concat" ? concatMap$1 : mapOperator === "switch" ? switchMap : mergeMap;
+      return trigger$.pipe(
+        takeUntil(stableMapOperator$.pipe(skip(1))),
+        tap(() => {
+          mutationsRunning$.next(mutationsRunning$.getValue() + 1);
         }),
-        take(1)
-      );
-      const mutation$ = initOptions.pipe(
-        mergeMap(
-          (options) => of(options).pipe(
-            options.__queryInitHook ?? identity
-          )
-        ),
-        mergeMap((options) => {
-          const { mapOperator } = options;
-          const switchOperator = mapOperator === "concat" ? concatMap$1 : mapOperator === "switch" ? switchMap : mergeMap;
-          return trigger$.pipe(
-            withLatestFrom(options$),
-            switchOperator(([mutationArg, { mutationFn }]) => {
-              const queryRunner$ = defer(
-                () => from(mutationFn(mutationArg))
-              ).pipe(
-                retryOnError(options),
-                take(1),
-                map((data) => ({ data, isError: false })),
-                catchError((error) => {
-                  console.error(error);
-                  if (options.onError != null) {
-                    options.onError(error, mutationArg);
-                  }
-                  return of({ data: error, isError: true });
-                }),
-                share()
-              );
-              const queryIsOver$ = queryRunner$.pipe(
-                map(({ data, isError }) => isError || data)
-              );
-              const isThisCurrentFunctionLastOneCalled = trigger$.pipe(
-                take(1),
-                map(() => mapOperator === "concat"),
-                startWith(true),
-                takeUntil(queryIsOver$)
-              );
-              const loading$ = of({
-                status: "loading"
-              });
-              return merge(
-                loading$,
-                combineLatest([
-                  queryRunner$,
-                  isThisCurrentFunctionLastOneCalled
-                ]).pipe(
-                  map(([{ data, isError }, isLastMutationCalled]) => {
-                    if (!isError) {
-                      if (options.onSuccess != null)
-                        options.onSuccess(data, mutationArg);
-                    }
-                    if (isLastMutationCalled) {
-                      return isError ? {
-                        status: "error",
-                        error: data,
-                        data: void 0
-                      } : {
-                        status: "success",
-                        error: void 0,
-                        data
-                      };
-                    }
-                    return {};
-                  }),
-                  takeUntil(reset$)
-                )
-              ).pipe(options.__queryRunnerHook ?? identity);
+        switchOperator(({ args, options }) => {
+          const queryRunner$ = defer(() => from(options.mutationFn(args))).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 });
             }),
-            options.__queryTriggerHook ?? identity,
-            mergeResults
+            share()
+          );
+          const queryIsOver$ = queryRunner$.pipe(
+            map(({ data, isError }) => isError || data)
+          );
+          const isThisCurrentFunctionLastOneCalled = trigger$.pipe(
+            take(1),
+            map(() => mapOperator === "concat"),
+            startWith(true),
+            takeUntil(queryIsOver$)
+          );
+          const loading$ = of({
+            status: "pending"
+          });
+          return merge(
+            loading$,
+            combineLatest([
+              queryRunner$,
+              isThisCurrentFunctionLastOneCalled
+            ]).pipe(
+              map(([{ data, isError }, isLastMutationCalled]) => {
+                if (!isError) {
+                  if (options.onSuccess != null)
+                    options.onSuccess(data, args);
+                }
+                if (isLastMutationCalled) {
+                  return isError ? {
+                    status: "error",
+                    error: data,
+                    data: void 0
+                  } : {
+                    status: "success",
+                    error: void 0,
+                    data
+                  };
+                }
+                return {};
+              }),
+              takeUntil(reset$)
+            )
+          ).pipe(
+            options.__queryRunnerHook ?? identity,
+            finalize(() => {
+              mutationsRunning$.next(mutationsRunning$.getValue() - 1);
+            })
           );
         }),
-        finalize(() => {
-          if (!closed) {
-            destroy();
-          }
-        })
+        __queryTriggerHook ?? identity,
+        mergeResults
       );
-      return {
-        mutation$,
-        trigger$,
-        reset$,
-        destroy,
-        getClosed: () => closed
-      };
+    }),
+    __queryFinalizeHook ?? identity
+  );
+  return {
+    mutation$,
+    trigger: ({
+      args,
+      options
+    }) => {
+      mapOperator$.next(options.mapOperator);
+      trigger$.next({ args, options });
+    },
+    reset$,
+    destroy,
+    mutationsRunning$,
+    getClosed: () => closed
+  };
+};
+class MutationClient {
+  constructor() {
+    /**
+     * Contain all active mutation for a given key.
+     * A mutation ca have several triggers running (it is not necessarily one function running)
+     *
+     * @important
+     * - automatically cleaned as soon as the last mutation is done for a given key
+     */
+    __publicField(this, "mutationRunners$", 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, "reset$", new Subject());
+    this.mutate$.pipe(
+      tap(({ options, args }) => {
+        const { mutationKey } = options;
+        let mutationForKey = this.mutationRunners$.getValue().get(mutationKey);
+        if (!mutationForKey) {
+          mutationForKey = createMutationRunner(options);
+          this.mutationRunners$.getValue().set(mutationKey, mutationForKey);
+          mutationForKey.mutation$.subscribe((result) => {
+            let resultForKeySubject = this.mutationResults$.getValue().get(mutationKey);
+            if (!resultForKeySubject) {
+              resultForKeySubject = new BehaviorSubject(result);
+              const resultMap = this.mutationResults$.getValue();
+              resultMap.set(mutationKey, resultForKeySubject);
+              this.mutationResults$.next(resultMap);
+            } else {
+              resultForKeySubject == null ? void 0 : resultForKeySubject.next(result);
+            }
+          });
+          mutationForKey.mutationsRunning$.pipe(
+            skip(1),
+            filter((number) => number === 0)
+          ).subscribe(() => {
+            mutationForKey == null ? void 0 : mutationForKey.destroy();
+            const resultMap = this.mutationResults$.getValue();
+            resultMap.delete(mutationKey);
+            this.mutationResults$.next(resultMap);
+            const mutationsMap = this.mutationRunners$.getValue();
+            mutationsMap.delete(mutationKey);
+            this.mutationRunners$.next(mutationsMap);
+          });
+        }
+        mutationForKey.trigger({ args, options });
+      })
+    ).subscribe();
+    this.reset$.pipe(
+      tap(({ key }) => {
+        var _a;
+        const serializedKey = serializeKey(key);
+        (_a = this.mutationRunners$.getValue().get(serializedKey)) == null ? void 0 : _a.reset$.next();
+      })
+    ).subscribe();
+  }
+  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"
     });
+    const lastValue = currentResultValue ? mapResultToObservedResult(currentResultValue) : mapResultToObservedResult({
+      data: void 0,
+      error: void 0,
+      status: "idle"
+    });
+    const result$ = this.mutationResults$.pipe(
+      switchMap((resultMap) => {
+        const subject = resultMap.get(key);
+        return subject ?? EMPTY;
+      })
+    ).pipe(
+      filter(isDefined),
+      map((value) => ({
+        ...value,
+        isIdle: value.status === "idle",
+        isPaused: false,
+        isError: value.error !== void 0,
+        isPending: false,
+        isSuccess: value.status === "success"
+      }))
+    );
+    return { result$, lastValue };
+  }
+  mutate(params) {
+    this.mutate$.next(params);
+  }
+  /**
+   * This will reset any current mutation runnings.
+   * No discrimination process
+   */
+  reset(params) {
+    this.reset$.next(params);
+  }
+  destroy() {
+    this.reset$.complete();
+    this.mutate$.complete();
+    this.mutationResults$.complete();
+    this.mutationRunners$.complete();
   }
 }
 const createClient = () => {
@@ -1725,20 +1827,24 @@ const createClient = () => {
     const queryListenerSub = queryListener$.subscribe();
     const started = [queryStore.start()];
     return () => {
-      started.forEach((destroy) => {
-        destroy();
+      started.forEach((destroy2) => {
+        destroy2();
       });
       queryListenerSub.unsubscribe();
     };
   };
+  const destroy = () => {
+    mutationClient.destroy();
+  };
   return {
     start,
     query,
     queryStore,
-    ...mutationClient,
+    mutationClient,
     ...invalidationClient,
     ...cacheClient,
-    ...refetchClient
+    ...refetchClient,
+    destroy
   };
 };
 class QueryClient {

package/dist/lib/queries/client/createClient.d.ts

@@ -1,7 +1,9 @@
-import { type Observable, Subject, BehaviorSubject } from "rxjs";
+import { type Observable, BehaviorSubject } from "rxjs";
 import { type QueryOptions, type QueryFn, type QueryTrigger, type QueryResult } from "./types";
 import { type QueryKey } from "./keys/types";
+import { MutationClient } from "./mutations/MutationClient";
 export declare const createClient: () => {
+    destroy: () => void;
     pipeQueryResult: <R extends Partial<QueryResult<T>>, T>({ options$ }: {
         key: string;
         queryStore: {
@@ -38,22 +40,15 @@ export declare const createClient: () => {
         exact?: boolean | undefined;
         predicate?: ((storeObject: import("./store/createQueryStore").StoreObject<unknown>) => boolean) | undefined;
     }) => void;
-    createMutation: <T_4, MutationArg>(options$: Observable<import("./mutations/types").MutationOptions<T_4, MutationArg>>) => {
-        mutation$: Observable<import("./mutations/types").MutationResult<T_4>>;
-        trigger$: Subject<MutationArg>;
-        reset$: Subject<void>;
-        destroy: () => void;
-        getClosed: () => boolean;
-    };
     start: () => () => void;
-    query: <T_5>({ key, fn$: maybeFn$, fn: maybeFn, trigger$: externalTrigger$, options$ }: {
+    query: <T_4>({ key, fn$: maybeFn$, fn: maybeFn, trigger$: externalTrigger$, options$ }: {
         key: QueryKey;
-        fn?: QueryFn<T_5> | undefined;
-        fn$?: Observable<QueryFn<T_5>> | undefined;
+        fn?: QueryFn<T_4> | undefined;
+        fn$?: Observable<QueryFn<T_4>> | undefined;
         trigger$?: Observable<QueryTrigger> | undefined;
-        options$?: Observable<QueryOptions<T_5>> | undefined;
+        options$?: Observable<QueryOptions<T_4>> | undefined;
     }) => {
-        result$: Observable<QueryResult<T_5>>;
+        result$: Observable<QueryResult<T_4>>;
     };
     queryStore: {
         set: (key: string, value: import("./store/createQueryStore").StoreObject<unknown>) => void;
@@ -74,6 +69,7 @@ export declare const createClient: () => {
         size: () => number;
         start: () => () => void;
     };
+    mutationClient: MutationClient;
 };
 export declare class QueryClient {
     client: ReturnType<typeof createClient>;

package/dist/lib/queries/client/mutations/MutationClient.d.ts

@@ -1,11 +1,57 @@
-import { type Observable, Subject } from "rxjs";
-import { type MutationResult, type MutationOptions } from "./types";
+import { Subject, BehaviorSubject, type Observable } from "rxjs";
+import { type MutationResult, type MutationOptions, type MutationObservedResult } from "./types";
+import { type QueryKey } from "../keys/types";
 export declare class MutationClient {
-    createMutation: <T, MutationArg>(options$: Observable<MutationOptions<T, MutationArg>>) => {
-        mutation$: Observable<MutationResult<T>>;
-        trigger$: Subject<MutationArg>;
+    /**
+     * Contain all active mutation for a given key.
+     * A mutation ca have several triggers running (it is not necessarily one function running)
+     *
+     * @important
+     * - automatically cleaned as soon as the last mutation is done for a given key
+     */
+    mutationRunners$: BehaviorSubject<Map<string, {
+        mutation$: Observable<MutationResult<unknown>>;
+        trigger: ({ args, options }: {
+            args: unknown;
+            options: MutationOptions<unknown, unknown>;
+        }) => void;
         reset$: Subject<void>;
         destroy: () => void;
+        mutationsRunning$: BehaviorSubject<number>;
         getClosed: () => boolean;
+    }>>;
+    /**
+     * 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
+     */
+    mutationResults$: BehaviorSubject<Map<string, BehaviorSubject<MutationResult<any>>>>;
+    mutate$: Subject<{
+        options: MutationOptions<any, any>;
+        args: any;
+    }>;
+    reset$: Subject<{
+        key: QueryKey;
+    }>;
+    constructor();
+    observe<Result>({ key }: {
+        key: string;
+    }): {
+        result$: Observable<MutationObservedResult<Result>>;
+        lastValue: MutationObservedResult<Result>;
     };
+    mutate<Result, MutationArgs>(params: {
+        options: MutationOptions<Result, MutationArgs>;
+        args: MutationArgs;
+    }): void;
+    /**
+     * This will reset any current mutation runnings.
+     * No discrimination process
+     */
+    reset(params: {
+        key: QueryKey;
+    }): void;
+    destroy(): void;
 }

package/dist/lib/queries/client/mutations/createMutationRunner.d.ts

@@ -0,0 +1,13 @@
+import { BehaviorSubject, Subject } from "rxjs";
+import { type MutationOptions, type MutationResult } from "./types";
+export declare const createMutationRunner: <T, MutationArg>({ __queryFinalizeHook, __queryInitHook, __queryTriggerHook }: Pick<MutationOptions<any, any>, "__queryInitHook" | "__queryTriggerHook" | "__queryFinalizeHook">) => {
+    mutation$: import("rxjs").Observable<MutationResult<T>>;
+    trigger: ({ args, options }: {
+        args: MutationArg;
+        options: MutationOptions<T, MutationArg>;
+    }) => void;
+    reset$: Subject<void>;
+    destroy: () => void;
+    mutationsRunning$: BehaviorSubject<number>;
+    getClosed: () => boolean;
+};

package/dist/lib/queries/client/mutations/types.d.ts

@@ -1,6 +1,5 @@
 import { type MonoTypeOperatorFunction, type Observable } from "rxjs";
 import { type Query, type QueryResult } from "../types";
-import { type QueryKey } from "../keys/types";
 /**
  * The default value `merge` is suitable for most use case.
  * You should not have to worry too much about it and only consider changing
@@ -23,9 +22,16 @@ import { type QueryKey } from "../keys/types";
 export type MapOperator = "switch" | "concat" | "merge";
 export interface MutationResult<R> {
     data: R | undefined;
-    status: "idle" | "loading" | "error" | "success";
+    status: "idle" | "pending" | "error" | "success";
     error: unknown;
 }
+export interface MutationObservedResult<R> extends MutationResult<R> {
+    isError: boolean;
+    isIdle: boolean;
+    isSuccess: boolean;
+    isPending: boolean;
+    isPaused: boolean;
+}
 export type MutationFn<T, MutationArg> = ((arg: MutationArg) => Promise<T>) | ((arg: MutationArg) => Observable<T>);
 export interface MutationOptions<Result, MutationArg> {
     enabled?: boolean;
@@ -50,9 +56,10 @@ export interface MutationOptions<Result, MutationArg> {
     onError?: (error: unknown, arg: MutationArg) => void;
     onSuccess?: (data: Result, arg: MutationArg) => void;
     mutationFn: MutationFn<Result, MutationArg>;
-    mutationKey: QueryKey;
+    mutationKey: string;
     mapOperator?: MapOperator;
     __queryInitHook?: MonoTypeOperatorFunction<any>;
     __queryRunnerHook?: MonoTypeOperatorFunction<any>;
     __queryTriggerHook?: MonoTypeOperatorFunction<Partial<Result>>;
+    __queryFinalizeHook?: MonoTypeOperatorFunction<Partial<Result>>;
 }

package/dist/lib/queries/react/Provider.d.ts

@@ -8,6 +8,7 @@ export declare const QueryClientProvider: import("react").MemoExoticComponent<({
     client: QueryClient;
 }) => import("react/jsx-runtime").JSX.Element>;
 export declare const useQueryClient: () => {
+    destroy: () => void;
     pipeQueryResult: <R extends Partial<import("../client/types").QueryResult<T>>, T>({ options$ }: {
         key: string;
         queryStore: {
@@ -44,22 +45,15 @@ export declare const useQueryClient: () => {
         exact?: boolean | undefined;
         predicate?: ((storeObject: import("../client/store/createQueryStore").StoreObject<unknown>) => boolean) | undefined;
     }) => void;
-    createMutation: <T_4, MutationArg>(options$: import("rxjs").Observable<import("../client/mutations/types").MutationOptions<T_4, MutationArg>>) => {
-        mutation$: import("rxjs").Observable<import("../client/mutations/types").MutationResult<T_4>>;
-        trigger$: import("rxjs").Subject<MutationArg>;
-        reset$: import("rxjs").Subject<void>;
-        destroy: () => void;
-        getClosed: () => boolean;
-    };
     start: () => () => void;
-    query: <T_5>({ key, fn$: maybeFn$, fn: maybeFn, trigger$: externalTrigger$, options$ }: {
+    query: <T_4>({ key, fn$: maybeFn$, fn: maybeFn, trigger$: externalTrigger$, options$ }: {
         key: import("../client/keys/types").QueryKey;
-        fn?: import("../client/types").QueryFn<T_5> | undefined;
-        fn$?: import("rxjs").Observable<import("../client/types").QueryFn<T_5>> | undefined;
+        fn?: import("../client/types").QueryFn<T_4> | undefined;
+        fn$?: import("rxjs").Observable<import("../client/types").QueryFn<T_4>> | undefined;
         trigger$?: import("rxjs").Observable<import("../client/types").QueryTrigger> | undefined;
-        options$?: import("rxjs").Observable<import("../client/types").QueryOptions<T_5>> | undefined;
+        options$?: import("rxjs").Observable<import("../client/types").QueryOptions<T_4>> | undefined;
     }) => {
-        result$: import("rxjs").Observable<import("../client/types").QueryResult<T_5>>;
+        result$: import("rxjs").Observable<import("../client/types").QueryResult<T_4>>;
     };
     queryStore: {
         set: (key: string, value: import("../client/store/createQueryStore").StoreObject<unknown>) => void;
@@ -80,4 +74,5 @@ export declare const useQueryClient: () => {
         size: () => number;
         start: () => () => void;
     };
+    mutationClient: import("../client/mutations/MutationClient").MutationClient;
 };

package/dist/lib/queries/react/keys/nanoid.d.ts

@@ -0,0 +1 @@
+export declare const nanoid: (size?: number) => string;

package/dist/lib/queries/{client → react}/keys/serializeKey.d.ts

@@ -1,3 +1,3 @@
-import { type QueryKey } from "./types";
+import { type QueryKey } from "../../client/keys/types";
 export declare const serializeObject: (object: any) => string;
 export declare const serializeKey: (key: QueryKey) => string;

package/dist/lib/queries/react/mutations/useMutation.d.ts

@@ -1,45 +1,17 @@
-import { type MonoTypeOperatorFunction } from "rxjs";
 import { type MutationOptions } from "../../client/mutations/types";
 import { type QueryKey } from "../../client/keys/types";
 export type AsyncQueryOptions<Result, Params> = Omit<MutationOptions<Result, Params>, "mutationKey"> & {
     mutationKey?: QueryKey;
-    /**
-     * When true, any running async query will be cancelled (when possible) on unmount.
-     * You need to handle it yourself for promises if needed.
-     * Callbacks will not be called as a result.
-     *
-     * This is unlikely to be needed but in some situation you may want to cancel
-     * any ongoing process if the user navigate away for example.
-     *
-     * @default false
-     */
     cancelOnUnMount?: boolean;
-    __triggerHook?: MonoTypeOperatorFunction<unknown>;
 };
-/**
- * @important
- * Your async query function is cancelled whenever you call a new mutate or
- * when the component is unmounted. Same behavior will happens with your
- * callback functions regarding unmounting. None of them will be called.
- *
- * If you provide an observable as a return it will be automatically cancelled
- * as well during unmount or if called again. If you provide anything else you
- * are in charge of controlling the flow.
- *
- * If you need to execute async query independently of the component lifecycle or
- * execute functions in parallel you should not use this hook.
- *
- * @important
- * If you return an observable, the stream will be unsubscribed after receiving
- * the first value. This hook is not meant to be running long running effects.
- *
- * @todo keep async query running on unmount
- * callback should return unmount$ variables
- * options.cancelOnUnmount should be false by default
- */
 export declare function useMutation<Args = void, R = undefined>(options: AsyncQueryOptions<R, Args>): {
+    isError: boolean;
+    isIdle: boolean;
+    isSuccess: boolean;
+    isPending: boolean;
+    isPaused: boolean;
     data: R | undefined;
-    status: "error" | "idle" | "loading" | "success";
+    status: "error" | "idle" | "success" | "pending";
     error: unknown;
     mutate: (mutationArgs: Args) => void;
     reset: () => void;

package/dist/lib/queries/react/mutations/useMutation.keys.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactjrx",
   "private": false,
-  "version": "1.55.0",
+  "version": "1.57.0",
   "type": "module",
   "files": [
     "dist"