reactjrx 1.54.0 → 1.55.0

package/dist/index.cjs

@@ -35,12 +35,17 @@ function primitiveEqual(objA, objB) {
   return false;
 }
 function useObserve(source$, unsafeOptions, unsafeDeps) {
-  const options = unsafeOptions != null && !Array.isArray(unsafeOptions) ? unsafeOptions : { defaultValue: void 0, key: "" };
+  const options = unsafeOptions != null && !Array.isArray(unsafeOptions) ? unsafeOptions : {
+    defaultValue: void 0,
+    key: "",
+    unsubscribeOnUnmount: true
+  };
   const deps = unsafeDeps == null && Array.isArray(unsafeOptions) ? unsafeOptions : typeof source$ === "function" ? unsafeDeps ?? [] : [source$];
   const valueRef = react.useRef(
     "getValue" in source$ && typeof source$.getValue === "function" ? source$.getValue() : options.defaultValue
   );
   const sourceRef = useLiveRef(source$);
+  const optionsRef = useLiveRef(options);
   const subscribe = react.useCallback(
     (next) => {
       const source = sourceRef.current;
@@ -64,6 +69,8 @@ function useObserve(source$, unsafeOptions, unsafeDeps) {
         })
       ).subscribe(next);
       return () => {
+        if (optionsRef.current.unsubscribeOnUnmount === false)
+          return;
         sub.unsubscribe();
       };
     },
@@ -391,175 +398,6 @@ function retryBackoff(config) {
     );
   });
 }
-function shallowEqual(objA, objB) {
-  if (objA === null || objA === void 0 || objB === void 0) {
-    return objA === objB;
-  }
-  if (typeof objA !== "object" || typeof objB !== "object") {
-    return objA === objB;
-  }
-  if (objA.constructor !== (objB == null ? void 0 : objB.constructor)) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) {
-    return false;
-  }
-  for (const key of keysA) {
-    if (!objB.hasOwnProperty(key) || objA[key] !== objB[key]) {
-      return false;
-    }
-  }
-  return true;
-}
-const retryOnError = (options) => retryBackoff({
-  initialInterval: 100,
-  ...typeof options.retry === "function" ? {
-    shouldRetry: options.retry
-  } : {
-    maxRetries: options.retry === false ? 0 : options.retry ?? 3
-  }
-});
-const mergeResults = (stream$) => stream$.pipe(
-  rxjs.scan(
-    (acc, current) => {
-      return {
-        ...acc,
-        ...current
-      };
-    },
-    {
-      data: void 0,
-      error: void 0,
-      fetchStatus: "idle",
-      status: "loading"
-    }
-  ),
-  rxjs.distinctUntilChanged(
-    ({ data: prevData, ...prev }, { data: currData, ...curr }) => shallowEqual(prev, curr) && shallowEqual(prevData, currData)
-  )
-);
-function useAsyncQuery(query, mapOperatorOrOptions, options = {}) {
-  const queryRef = useLiveRef(query);
-  const triggerSubject = useSubject();
-  const resetSubject = useSubject({
-    /**
-     * @important
-     * Because async query can still run after unmount, the user might
-     * want to use reset for whatever reason. We will only manually complete
-     * this subject whenever the main query hook finalize.
-     */
-    completeOnUnmount: false
-  });
-  const optionsRef = useLiveRef(
-    typeof mapOperatorOrOptions === "object" ? mapOperatorOrOptions : options
-  );
-  const data$ = useBehaviorSubject({
-    data: void 0,
-    error: void 0,
-    status: "idle"
-  });
-  const mapOperator = typeof mapOperatorOrOptions === "string" ? mapOperatorOrOptions : "merge";
-  react.useEffect(() => {
-    const switchOperator = mapOperator === "concat" ? rxjs.concatMap : mapOperator === "switch" ? rxjs.switchMap : rxjs.mergeMap;
-    const subscription = rxjs.merge(
-      resetSubject.current.pipe(
-        rxjs.map(
-          () => ({
-            status: "idle",
-            data: void 0,
-            error: void 0
-          })
-        )
-      ),
-      triggerSubject.current.pipe(
-        switchOperator((args) => {
-          const isLastMutationCalled = triggerSubject.current.pipe(
-            rxjs.take(1),
-            rxjs.map(() => mapOperator === "concat"),
-            rxjs.startWith(true)
-          );
-          return rxjs.merge(
-            rxjs.of({
-              status: "loading"
-            }),
-            rxjs.combineLatest([
-              rxjs.defer(() => rxjs.from(queryRef.current(args))).pipe(
-                retryOnError(optionsRef.current),
-                rxjs.first(),
-                rxjs.map((data) => ({ data, isError: false })),
-                rxjs.catchError((error) => {
-                  console.error(error);
-                  if (optionsRef.current.onError != null) {
-                    optionsRef.current.onError(error, args);
-                  }
-                  return rxjs.of({ data: error, isError: true });
-                })
-              ),
-              isLastMutationCalled
-            ]).pipe(
-              rxjs.map(([{ data, isError }, isLastMutationCalled2]) => {
-                if (!isError) {
-                  if (optionsRef.current.onSuccess != null)
-                    optionsRef.current.onSuccess(data, args);
-                }
-                if (isLastMutationCalled2) {
-                  return isError ? {
-                    status: "error",
-                    error: data,
-                    data: void 0
-                  } : {
-                    status: "success",
-                    error: void 0,
-                    data
-                  };
-                }
-                return void 0;
-              }),
-              rxjs.takeUntil(resetSubject.current)
-            )
-          );
-        }),
-        optionsRef.current.triggerHook ?? rxjs.identity,
-        rxjs.finalize(() => {
-          resetSubject.current.complete();
-        })
-      )
-    ).pipe(
-      rxjs.filter((state) => !!state && !!Object.keys(state).length),
-      /**
-       * @important
-       * state update optimization
-       */
-      rxjs.distinctUntilChanged(shallowEqual)
-    ).subscribe((state) => {
-      data$.current.next({
-        ...data$.current.getValue(),
-        ...state
-      });
-    });
-    return () => {
-      if (optionsRef.current.cancelOnUnMount) {
-        subscription.unsubscribe();
-      }
-    };
-  }, [mapOperator]);
-  const result = useObserve(
-    () => data$.current,
-    {
-      defaultValue: data$.current.getValue()
-    },
-    []
-  );
-  const mutate = react.useCallback((arg) => {
-    triggerSubject.current.next(arg);
-  }, []);
-  const reset = react.useCallback(() => {
-    resetSubject.current.next();
-  }, []);
-  return { ...result, isLoading: result.status === "loading", mutate, reset };
-}
 const Context = react.createContext({
   client: null
 });
@@ -574,7 +412,7 @@ const ClientEffect = ({
   }, [client]);
   return null;
 };
-const Provider = react.memo(
+const QueryClientProvider = react.memo(
   ({ children, client }) => {
     const value = react.useMemo(() => ({ client: client.client }), [client]);
     return /* @__PURE__ */ jsxRuntime.jsxs(Context.Provider, { value, children: [
@@ -590,7 +428,92 @@ const useQueryClient = () => {
   }
   return context.client;
 };
+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 mutate = react.useCallback(
+    (mutationArgs) => {
+      if (!trigger$) {
+        setBufferTriggers((value) => [...value, mutationArgs]);
+      }
+      trigger$ == null ? void 0 : trigger$.next(mutationArgs);
+    },
+    [trigger$]
+  );
+  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$]);
+  return { mutate, reset, ...result };
+}
 const arrayEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
+function shallowEqual(objA, objB) {
+  if (objA === null || objA === void 0 || objB === void 0) {
+    return objA === objB;
+  }
+  if (typeof objA !== "object" || typeof objB !== "object") {
+    return objA === objB;
+  }
+  if (objA.constructor !== (objB == null ? void 0 : objB.constructor)) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (const key of keysA) {
+    if (!objB.hasOwnProperty(key) || objA[key] !== objB[key]) {
+      return false;
+    }
+  }
+  return true;
+}
 function isDefined(arg) {
   return arg !== null && arg !== void 0;
 }
@@ -775,6 +698,33 @@ const serializeKey = (key) => {
     return "[]";
   return serializeObject(key);
 };
+const retryOnError = (options) => retryBackoff({
+  initialInterval: 100,
+  ...typeof options.retry === "function" ? {
+    shouldRetry: options.retry
+  } : {
+    maxRetries: options.retry === false ? 0 : options.retry ?? 3
+  }
+});
+const mergeResults$1 = (stream$) => stream$.pipe(
+  rxjs.scan(
+    (acc, current) => {
+      return {
+        ...acc,
+        ...current
+      };
+    },
+    {
+      data: void 0,
+      error: void 0,
+      fetchStatus: "idle",
+      status: "loading"
+    }
+  ),
+  rxjs.distinctUntilChanged(
+    ({ data: prevData, ...prev }, { data: currData, ...curr }) => shallowEqual(prev, curr) && shallowEqual(prevData, currData)
+  )
+);
 const resetStyle = { backgroundColor: "transparent", color: "inherit" };
 function createLogger(env) {
   const _logger = {
@@ -1529,11 +1479,139 @@ const dispatchExternalRefetchToAllQueries = ({
   }),
   rxjs.filter((trigger2) => trigger2.type !== "refetch")
 );
+const mergeResults = (stream$) => stream$.pipe(
+  rxjs.scan(
+    (acc, current) => {
+      return {
+        ...acc,
+        ...current
+      };
+    },
+    {
+      data: void 0,
+      error: void 0,
+      // fetchStatus: "idle",
+      status: "loading"
+    }
+  ),
+  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);
+        }),
+        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);
+            }),
+            options.__queryTriggerHook ?? rxjs.identity,
+            mergeResults
+          );
+        }),
+        rxjs.finalize(() => {
+          if (!closed) {
+            destroy();
+          }
+        })
+      );
+      return {
+        mutation$,
+        trigger$,
+        reset$,
+        destroy,
+        getClosed: () => closed
+      };
+    });
+  }
+}
 const createClient = () => {
   const queryStore = createQueryStore();
   const invalidationClient = createInvalidationClient({ queryStore });
   const cacheClient = createCacheClient({ queryStore });
   const refetchClient = createRefetchClient();
+  const mutationClient = new MutationClient();
   let hasCalledStart = false;
   const query = ({
     key,
@@ -1610,7 +1688,7 @@ const createClient = () => {
           trigger$
         })
       ),
-      mergeResults,
+      mergeResults$1,
       rxjs.withLatestFrom(options$),
       rxjs.takeWhile(([result, options]) => {
         const shouldStop = result.data !== void 0 && options.terminateOnFirstResult;
@@ -1659,6 +1737,7 @@ const createClient = () => {
     start,
     query,
     queryStore,
+    ...mutationClient,
     ...invalidationClient,
     ...cacheClient,
     ...refetchClient
@@ -1671,7 +1750,7 @@ class QueryClient {
   }
 }
 exports.QueryClient = QueryClient;
-exports.QueryClientProvider = Provider;
+exports.QueryClientProvider = QueryClientProvider;
 exports.SIGNAL_RESET = SIGNAL_RESET;
 exports.createClient = createClient;
 exports.createLocalforageAdapter = createLocalforageAdapter;
@@ -1681,9 +1760,9 @@ exports.getDelay = getDelay;
 exports.retryBackoff = retryBackoff;
 exports.signal = signal;
 exports.trigger = trigger;
-exports.useAsyncQuery = useAsyncQuery;
 exports.useBehaviorSubject = useBehaviorSubject;
 exports.useLiveRef = useLiveRef;
+exports.useMutation = useMutation;
 exports.useObserve = useObserve;
 exports.useObserveCallback = useObserveCallback;
 exports.usePersistSignals = usePersistSignals;

package/dist/index.d.ts

@@ -17,4 +17,4 @@ export * from "./lib/queries/react/mutations/useMutation";
 export * from "./lib/queries/react/queries/useQuery";
 export * from "./lib/queries/react/useSubscribeEffect";
 export * from "./lib/queries/client/createClient";
-export { Provider as QueryClientProvider, useQueryClient } from "./lib/queries/react/Provider";
+export { QueryClientProvider, useQueryClient } from "./lib/queries/react/Provider";

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 } from "react";
-import { distinctUntilChanged, tap, finalize, catchError, EMPTY, Subject, identity, BehaviorSubject, map, of, zip, merge, throttleTime, asyncScheduler, switchMap, from, defer, iif, timer, throwError, scan, take, startWith, combineLatest, first, takeUntil, filter, concatMap as concatMap$1, mergeMap, fromEvent, skip, withLatestFrom, retry, shareReplay, endWith, delay, share, pairwise, NEVER, takeWhile } from "rxjs";
+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 { retryWhen, concatMap, tap as tap$1 } from "rxjs/operators";
 import { jsxs, jsx } from "react/jsx-runtime";
 const useLiveRef = (value) => {
@@ -33,12 +33,17 @@ function primitiveEqual(objA, objB) {
   return false;
 }
 function useObserve(source$, unsafeOptions, unsafeDeps) {
-  const options = unsafeOptions != null && !Array.isArray(unsafeOptions) ? unsafeOptions : { defaultValue: void 0, key: "" };
+  const options = unsafeOptions != null && !Array.isArray(unsafeOptions) ? unsafeOptions : {
+    defaultValue: void 0,
+    key: "",
+    unsubscribeOnUnmount: true
+  };
   const deps = unsafeDeps == null && Array.isArray(unsafeOptions) ? unsafeOptions : typeof source$ === "function" ? unsafeDeps ?? [] : [source$];
   const valueRef = useRef(
     "getValue" in source$ && typeof source$.getValue === "function" ? source$.getValue() : options.defaultValue
   );
   const sourceRef = useLiveRef(source$);
+  const optionsRef = useLiveRef(options);
   const subscribe = useCallback(
     (next) => {
       const source = sourceRef.current;
@@ -62,6 +67,8 @@ function useObserve(source$, unsafeOptions, unsafeDeps) {
         })
       ).subscribe(next);
       return () => {
+        if (optionsRef.current.unsubscribeOnUnmount === false)
+          return;
         sub.unsubscribe();
       };
     },
@@ -389,175 +396,6 @@ function retryBackoff(config) {
     );
   });
 }
-function shallowEqual(objA, objB) {
-  if (objA === null || objA === void 0 || objB === void 0) {
-    return objA === objB;
-  }
-  if (typeof objA !== "object" || typeof objB !== "object") {
-    return objA === objB;
-  }
-  if (objA.constructor !== (objB == null ? void 0 : objB.constructor)) {
-    return false;
-  }
-  const keysA = Object.keys(objA);
-  const keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) {
-    return false;
-  }
-  for (const key of keysA) {
-    if (!objB.hasOwnProperty(key) || objA[key] !== objB[key]) {
-      return false;
-    }
-  }
-  return true;
-}
-const retryOnError = (options) => retryBackoff({
-  initialInterval: 100,
-  ...typeof options.retry === "function" ? {
-    shouldRetry: options.retry
-  } : {
-    maxRetries: options.retry === false ? 0 : options.retry ?? 3
-  }
-});
-const mergeResults = (stream$) => stream$.pipe(
-  scan(
-    (acc, current) => {
-      return {
-        ...acc,
-        ...current
-      };
-    },
-    {
-      data: void 0,
-      error: void 0,
-      fetchStatus: "idle",
-      status: "loading"
-    }
-  ),
-  distinctUntilChanged(
-    ({ data: prevData, ...prev }, { data: currData, ...curr }) => shallowEqual(prev, curr) && shallowEqual(prevData, currData)
-  )
-);
-function useAsyncQuery(query, mapOperatorOrOptions, options = {}) {
-  const queryRef = useLiveRef(query);
-  const triggerSubject = useSubject();
-  const resetSubject = useSubject({
-    /**
-     * @important
-     * Because async query can still run after unmount, the user might
-     * want to use reset for whatever reason. We will only manually complete
-     * this subject whenever the main query hook finalize.
-     */
-    completeOnUnmount: false
-  });
-  const optionsRef = useLiveRef(
-    typeof mapOperatorOrOptions === "object" ? mapOperatorOrOptions : options
-  );
-  const data$ = useBehaviorSubject({
-    data: void 0,
-    error: void 0,
-    status: "idle"
-  });
-  const mapOperator = typeof mapOperatorOrOptions === "string" ? mapOperatorOrOptions : "merge";
-  useEffect(() => {
-    const switchOperator = mapOperator === "concat" ? concatMap$1 : mapOperator === "switch" ? switchMap : mergeMap;
-    const subscription = merge(
-      resetSubject.current.pipe(
-        map(
-          () => ({
-            status: "idle",
-            data: void 0,
-            error: void 0
-          })
-        )
-      ),
-      triggerSubject.current.pipe(
-        switchOperator((args) => {
-          const isLastMutationCalled = triggerSubject.current.pipe(
-            take(1),
-            map(() => mapOperator === "concat"),
-            startWith(true)
-          );
-          return merge(
-            of({
-              status: "loading"
-            }),
-            combineLatest([
-              defer(() => from(queryRef.current(args))).pipe(
-                retryOnError(optionsRef.current),
-                first(),
-                map((data) => ({ data, isError: false })),
-                catchError((error) => {
-                  console.error(error);
-                  if (optionsRef.current.onError != null) {
-                    optionsRef.current.onError(error, args);
-                  }
-                  return of({ data: error, isError: true });
-                })
-              ),
-              isLastMutationCalled
-            ]).pipe(
-              map(([{ data, isError }, isLastMutationCalled2]) => {
-                if (!isError) {
-                  if (optionsRef.current.onSuccess != null)
-                    optionsRef.current.onSuccess(data, args);
-                }
-                if (isLastMutationCalled2) {
-                  return isError ? {
-                    status: "error",
-                    error: data,
-                    data: void 0
-                  } : {
-                    status: "success",
-                    error: void 0,
-                    data
-                  };
-                }
-                return void 0;
-              }),
-              takeUntil(resetSubject.current)
-            )
-          );
-        }),
-        optionsRef.current.triggerHook ?? identity,
-        finalize(() => {
-          resetSubject.current.complete();
-        })
-      )
-    ).pipe(
-      filter((state) => !!state && !!Object.keys(state).length),
-      /**
-       * @important
-       * state update optimization
-       */
-      distinctUntilChanged(shallowEqual)
-    ).subscribe((state) => {
-      data$.current.next({
-        ...data$.current.getValue(),
-        ...state
-      });
-    });
-    return () => {
-      if (optionsRef.current.cancelOnUnMount) {
-        subscription.unsubscribe();
-      }
-    };
-  }, [mapOperator]);
-  const result = useObserve(
-    () => data$.current,
-    {
-      defaultValue: data$.current.getValue()
-    },
-    []
-  );
-  const mutate = useCallback((arg) => {
-    triggerSubject.current.next(arg);
-  }, []);
-  const reset = useCallback(() => {
-    resetSubject.current.next();
-  }, []);
-  return { ...result, isLoading: result.status === "loading", mutate, reset };
-}
 const Context = createContext({
   client: null
 });
@@ -572,7 +410,7 @@ const ClientEffect = ({
   }, [client]);
   return null;
 };
-const Provider = memo(
+const QueryClientProvider = memo(
   ({ children, client }) => {
     const value = useMemo(() => ({ client: client.client }), [client]);
     return /* @__PURE__ */ jsxs(Context.Provider, { value, children: [
@@ -588,7 +426,92 @@ const useQueryClient = () => {
   }
   return context.client;
 };
+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 mutate = useCallback(
+    (mutationArgs) => {
+      if (!trigger$) {
+        setBufferTriggers((value) => [...value, mutationArgs]);
+      }
+      trigger$ == null ? void 0 : trigger$.next(mutationArgs);
+    },
+    [trigger$]
+  );
+  useEffect(() => {
+    if (mutation && !mutation.getClosed()) {
+      bufferTriggers.forEach((args) => {
+        mutation.trigger$.next(args);
+      });
+    }
+  }, [bufferTriggers, mutation]);
+  const reset = useCallback(() => {
+    reset$ == null ? void 0 : reset$.next();
+  }, [reset$]);
+  return { mutate, reset, ...result };
+}
 const arrayEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
+function shallowEqual(objA, objB) {
+  if (objA === null || objA === void 0 || objB === void 0) {
+    return objA === objB;
+  }
+  if (typeof objA !== "object" || typeof objB !== "object") {
+    return objA === objB;
+  }
+  if (objA.constructor !== (objB == null ? void 0 : objB.constructor)) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (const key of keysA) {
+    if (!objB.hasOwnProperty(key) || objA[key] !== objB[key]) {
+      return false;
+    }
+  }
+  return true;
+}
 function isDefined(arg) {
   return arg !== null && arg !== void 0;
 }
@@ -773,6 +696,33 @@ const serializeKey = (key) => {
     return "[]";
   return serializeObject(key);
 };
+const retryOnError = (options) => retryBackoff({
+  initialInterval: 100,
+  ...typeof options.retry === "function" ? {
+    shouldRetry: options.retry
+  } : {
+    maxRetries: options.retry === false ? 0 : options.retry ?? 3
+  }
+});
+const mergeResults$1 = (stream$) => stream$.pipe(
+  scan(
+    (acc, current) => {
+      return {
+        ...acc,
+        ...current
+      };
+    },
+    {
+      data: void 0,
+      error: void 0,
+      fetchStatus: "idle",
+      status: "loading"
+    }
+  ),
+  distinctUntilChanged(
+    ({ data: prevData, ...prev }, { data: currData, ...curr }) => shallowEqual(prev, curr) && shallowEqual(prevData, currData)
+  )
+);
 const resetStyle = { backgroundColor: "transparent", color: "inherit" };
 function createLogger(env) {
   const _logger = {
@@ -1527,11 +1477,139 @@ const dispatchExternalRefetchToAllQueries = ({
   }),
   filter((trigger2) => trigger2.type !== "refetch")
 );
+const mergeResults = (stream$) => stream$.pipe(
+  scan(
+    (acc, current) => {
+      return {
+        ...acc,
+        ...current
+      };
+    },
+    {
+      data: void 0,
+      error: void 0,
+      // fetchStatus: "idle",
+      status: "loading"
+    }
+  ),
+  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);
+        }),
+        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);
+            }),
+            options.__queryTriggerHook ?? identity,
+            mergeResults
+          );
+        }),
+        finalize(() => {
+          if (!closed) {
+            destroy();
+          }
+        })
+      );
+      return {
+        mutation$,
+        trigger$,
+        reset$,
+        destroy,
+        getClosed: () => closed
+      };
+    });
+  }
+}
 const createClient = () => {
   const queryStore = createQueryStore();
   const invalidationClient = createInvalidationClient({ queryStore });
   const cacheClient = createCacheClient({ queryStore });
   const refetchClient = createRefetchClient();
+  const mutationClient = new MutationClient();
   let hasCalledStart = false;
   const query = ({
     key,
@@ -1608,7 +1686,7 @@ const createClient = () => {
           trigger$
         })
       ),
-      mergeResults,
+      mergeResults$1,
       withLatestFrom(options$),
       takeWhile(([result, options]) => {
         const shouldStop = result.data !== void 0 && options.terminateOnFirstResult;
@@ -1657,6 +1735,7 @@ const createClient = () => {
     start,
     query,
     queryStore,
+    ...mutationClient,
     ...invalidationClient,
     ...cacheClient,
     ...refetchClient
@@ -1670,7 +1749,7 @@ class QueryClient {
 }
 export {
   QueryClient,
-  Provider as QueryClientProvider,
+  QueryClientProvider,
   SIGNAL_RESET,
   createClient,
   createLocalforageAdapter,
@@ -1680,9 +1759,9 @@ export {
   retryBackoff,
   signal,
   trigger,
-  useAsyncQuery,
   useBehaviorSubject,
   useLiveRef,
+  useMutation,
   useObserve,
   useObserveCallback,
   usePersistSignals,

package/dist/lib/binding/useObserve.d.ts

@@ -3,6 +3,7 @@ import { type Observable, type BehaviorSubject } from "rxjs";
 interface Option<R = undefined> {
     defaultValue: R;
     key?: string;
+    unsubscribeOnUnmount?: boolean;
 }
 /**
  * @todo return first value if source is behavior subject

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

@@ -1,4 +1,4 @@
-import { type Observable, BehaviorSubject } from "rxjs";
+import { type Observable, Subject, BehaviorSubject } from "rxjs";
 import { type QueryOptions, type QueryFn, type QueryTrigger, type QueryResult } from "./types";
 import { type QueryKey } from "./keys/types";
 export declare const createClient: () => {
@@ -38,15 +38,22 @@ 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_4>({ key, fn$: maybeFn$, fn: maybeFn, trigger$: externalTrigger$, options$ }: {
+    query: <T_5>({ key, fn$: maybeFn$, fn: maybeFn, trigger$: externalTrigger$, options$ }: {
         key: QueryKey;
-        fn?: QueryFn<T_4> | undefined;
-        fn$?: Observable<QueryFn<T_4>> | undefined;
+        fn?: QueryFn<T_5> | undefined;
+        fn$?: Observable<QueryFn<T_5>> | undefined;
         trigger$?: Observable<QueryTrigger> | undefined;
-        options$?: Observable<QueryOptions<T_4>> | undefined;
+        options$?: Observable<QueryOptions<T_5>> | undefined;
     }) => {
-        result$: Observable<QueryResult<T_4>>;
+        result$: Observable<QueryResult<T_5>>;
     };
     queryStore: {
         set: (key: string, value: import("./store/createQueryStore").StoreObject<unknown>) => void;

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

@@ -0,0 +1,11 @@
+import { type Observable, Subject } from "rxjs";
+import { type MutationResult, type MutationOptions } from "./types";
+export declare class MutationClient {
+    createMutation: <T, MutationArg>(options$: Observable<MutationOptions<T, MutationArg>>) => {
+        mutation$: Observable<MutationResult<T>>;
+        trigger$: Subject<MutationArg>;
+        reset$: Subject<void>;
+        destroy: () => void;
+        getClosed: () => boolean;
+    };
+}

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

@@ -0,0 +1,3 @@
+import { type Observable } from "rxjs";
+import { type MutationResult } from "./types";
+export declare const mergeResults: <T>(stream$: Observable<Partial<MutationResult<T>>>) => Observable<MutationResult<T>>;

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

@@ -0,0 +1,58 @@
+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
+ * it when specific need arise.
+ *
+ * `merge`:
+ * Run each async query as they are triggered without any cancellation or queue system.
+ * The result is always from the latest async query triggered, not necessarily
+ * the latest one running.
+ *
+ * `concat`:
+ * Unlike merge, it will trigger each async query sequentially following
+ * a queue system. The result is not necessarily the last triggered async query
+ * but the current running async query.
+ *
+ * `switch`:
+ * Only run the latest async query triggered and cancel any previously running one.
+ * Result correspond to the current running async query.
+ */
+export type MapOperator = "switch" | "concat" | "merge";
+export interface MutationResult<R> {
+    data: R | undefined;
+    status: "idle" | "loading" | "error" | "success";
+    error: unknown;
+}
+export type MutationFn<T, MutationArg> = ((arg: MutationArg) => Promise<T>) | ((arg: MutationArg) => Observable<T>);
+export interface MutationOptions<Result, MutationArg> {
+    enabled?: boolean;
+    retry?: false | number | ((attempt: number, error: unknown) => boolean);
+    /**
+     * @important
+     * The hook with the lowest value will be taken into account
+     */
+    staleTime?: number;
+    /**
+     * Force the new query to be marked as stale. Only on first trigger
+     */
+    markStale?: boolean;
+    cacheTime?: number;
+    /**
+     * @important
+     * interval is paused until the query finish fetching. This avoid infinite
+     * loop of refetch
+     */
+    refetchInterval?: number | false | ((data: QueryResult<Result>["data"] | undefined, query: Query) => number | false);
+    terminateOnFirstResult?: boolean;
+    onError?: (error: unknown, arg: MutationArg) => void;
+    onSuccess?: (data: Result, arg: MutationArg) => void;
+    mutationFn: MutationFn<Result, MutationArg>;
+    mutationKey: QueryKey;
+    mapOperator?: MapOperator;
+    __queryInitHook?: MonoTypeOperatorFunction<any>;
+    __queryRunnerHook?: MonoTypeOperatorFunction<any>;
+    __queryTriggerHook?: MonoTypeOperatorFunction<Partial<Result>>;
+}

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

@@ -3,7 +3,7 @@ import { type QueryClient, type createClient } from "../client/createClient";
 export declare const Context: import("react").Context<{
     client: ReturnType<typeof createClient>;
 }>;
-export declare const Provider: import("react").MemoExoticComponent<({ children, client }: {
+export declare const QueryClientProvider: import("react").MemoExoticComponent<({ children, client }: {
     children: ReactNode;
     client: QueryClient;
 }) => import("react/jsx-runtime").JSX.Element>;
@@ -44,15 +44,22 @@ 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_4>({ key, fn$: maybeFn$, fn: maybeFn, trigger$: externalTrigger$, options$ }: {
+    query: <T_5>({ key, fn$: maybeFn$, fn: maybeFn, trigger$: externalTrigger$, options$ }: {
         key: import("../client/keys/types").QueryKey;
-        fn?: import("../client/types").QueryFn<T_4> | undefined;
-        fn$?: import("rxjs").Observable<import("../client/types").QueryFn<T_4>> | undefined;
+        fn?: import("../client/types").QueryFn<T_5> | undefined;
+        fn$?: import("rxjs").Observable<import("../client/types").QueryFn<T_5>> | undefined;
         trigger$?: import("rxjs").Observable<import("../client/types").QueryTrigger> | undefined;
-        options$?: import("rxjs").Observable<import("../client/types").QueryOptions<T_4>> | undefined;
+        options$?: import("rxjs").Observable<import("../client/types").QueryOptions<T_5>> | undefined;
     }) => {
-        result$: import("rxjs").Observable<import("../client/types").QueryResult<T_4>>;
+        result$: import("rxjs").Observable<import("../client/types").QueryResult<T_5>>;
     };
     queryStore: {
         set: (key: string, value: import("../client/store/createQueryStore").StoreObject<unknown>) => void;

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

@@ -1,23 +1,8 @@
-import { type MonoTypeOperatorFunction, type Observable } from "rxjs";
-interface QueryState<R> {
-    data: R | undefined;
-    status: "idle" | "loading" | "error" | "success";
-    error: unknown;
-}
-export interface AsyncQueryOptions<Result, Params> {
-    retry?: false | number | ((attempt: number, error: unknown) => boolean);
-    /**
-     * Called for every async query on error.
-     * `merge` mapping will run callback as they happen.
-     * Use `concat` if you need to run callbacks in order of calling.
-     */
-    onError?: (error: unknown, params: Params) => void;
-    /**
-     * Called for every async query on success.
-     * `merge` mapping will run callback as they happen.
-     * Use `concat` if you need to run callbacks in order of calling.
-     */
-    onSuccess?: (data: Result, params: Params) => void;
+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.
@@ -29,54 +14,33 @@ export interface AsyncQueryOptions<Result, Params> {
      * @default false
      */
     cancelOnUnMount?: boolean;
-    /**
-     * Only use for debugging.
-     * It is not the main subscription hook, only the one following the trigger.
-     */
-    triggerHook?: MonoTypeOperatorFunction<Partial<QueryState<Result>> | undefined>;
-}
-interface Result<A, R> {
-    status: "idle" | "loading" | "error" | "success";
-    isLoading: boolean;
-    /**
-     * If the latest async query is in a success state, data contains its result.
-     *
-     * @important
-     * The value does not automatically reset when a new async query run. It will be updated
-     * when a new async query success or error.
-     */
-    data: R | undefined;
-    /**
-     * If the latest async query is in a error state, error contains its error.
-     *
-     * @important
-     * The value does not automatically reset when a new async query run. It will be updated
-     * when a new async query success or error.
-     */
-    error: unknown | undefined;
-    mutate: (args: A) => void;
-    reset: () => void;
-}
+    __triggerHook?: MonoTypeOperatorFunction<unknown>;
+};
 /**
- * The default value `merge` is suitable for most use case.
- * You should not have to worry too much about it and only consider changing
- * it when specific need arise.
+ * @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.
  *
- * `merge`:
- * Run each async query as they are triggered without any cancellation or queue system.
- * The result is always from the latest async query triggered, not necessarily
- * the latest one running.
+ * If you need to execute async query independently of the component lifecycle or
+ * execute functions in parallel you should not use this hook.
  *
- * `concat`:
- * Unlike merge, it will trigger each async query sequentially following
- * a queue system. The result is not necessarily the last triggered async query
- * but the current running async query.
+ * @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.
  *
- * `switch`:
- * Only run the latest async query triggered and cancel any previously running one.
- * Result correspond to the current running async query.
+ * @todo keep async query running on unmount
+ * callback should return unmount$ variables
+ * options.cancelOnUnmount should be false by default
  */
-type MapOperator = "switch" | "concat" | "merge";
-export declare function useAsyncQuery<A = void, R = undefined>(query: (args: A) => Promise<R> | Observable<R>, mapOperatorOrOptions?: MapOperator, options?: AsyncQueryOptions<R, A>): Result<A, R>;
-export declare function useAsyncQuery<A = void, R = undefined>(query: (args: A) => Promise<R> | Observable<R>, mapOperatorOrOptions?: AsyncQueryOptions<R, A>): Result<A, R>;
-export {};
+export declare function useMutation<Args = void, R = undefined>(options: AsyncQueryOptions<R, Args>): {
+    data: R | undefined;
+    status: "error" | "idle" | "loading" | "success";
+    error: unknown;
+    mutate: (mutationArgs: Args) => void;
+    reset: () => void;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactjrx",
   "private": false,
-  "version": "1.54.0",
+  "version": "1.55.0",
   "type": "module",
   "files": [
     "dist"
@@ -37,6 +37,8 @@
     "rxjs": "*"
   },
   "devDependencies": {
+    "@testing-library/react": "^14.0.0",
+    "@types/node": "^18.15.11",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
@@ -57,12 +59,13 @@
     "typescript": "^5.0.4",
     "vite": "^4.2.1",
     "vite-plugin-dts": "^3.6.3",
-    "vitest": "^0.34.6",
-    "@testing-library/react": "^14.0.0",
-    "@types/node": "^18.15.11"
+    "vitest": "^0.34.6"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/mbret/reactjrx.git"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.8.4"
   }
 }