reactjrx 1.33.0 → 1.35.0

package/dist/index.cjs

@@ -147,8 +147,8 @@ function trigger(mapper = rxjs.identity) {
 }
 const SIGNAL_RESET = Symbol("SIGNAL_RESET");
 function signal(options) {
-  const { default: defaultValue } = options ?? {};
-  const subject = new rxjs.BehaviorSubject(defaultValue);
+  const { default: defaultValue2 } = options ?? {};
+  const subject = new rxjs.BehaviorSubject(defaultValue2);
   const setValue = (arg) => {
     if (arg === subject.getValue())
       return;
@@ -160,7 +160,7 @@ function signal(options) {
       return;
     }
     if (arg === SIGNAL_RESET) {
-      subject.next(defaultValue ?? void 0);
+      subject.next(defaultValue2 ?? void 0);
       return;
     }
     subject.next(arg);
@@ -459,13 +459,13 @@ function shallowEqual(objA, objB) {
   }
   return true;
 }
-function useMutation(query, mapOperatorOrOptions, options = {}) {
+function useAsyncQuery(query, mapOperatorOrOptions, options = {}) {
   const queryRef = useLiveRef(query);
   const triggerSubject = useSubject();
   const resetSubject = useSubject({
     /**
      * @important
-     * Because mutation can still run after unmount, the user might
+     * 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.
      */
@@ -519,6 +519,7 @@ function useMutation(query, mapOperatorOrOptions, options = {}) {
               isLastMutationCalled
             ]).pipe(
               rxjs.map(([{ data, isError }, isLastMutationCalled2]) => {
+                console.log("success", { data, isLastMutationCalled: isLastMutationCalled2 });
                 if (!isError) {
                   if (optionsRef.current.onSuccess != null)
                     optionsRef.current.onSuccess(data, args);
@@ -546,12 +547,12 @@ function useMutation(query, mapOperatorOrOptions, options = {}) {
         })
       )
     ).pipe(
+      rxjs.filter((state) => !!state && !!Object.keys(state).length),
       /**
        * @important
        * state update optimization
        */
-      rxjs.distinctUntilChanged(shallowEqual),
-      rxjs.filter((state) => !!state && !!Object.keys(state).length)
+      rxjs.distinctUntilChanged(shallowEqual)
     ).subscribe((state) => {
       data$.current.next({
         ...data$.current.getValue(),
@@ -579,7 +580,6 @@ function useMutation(query, mapOperatorOrOptions, options = {}) {
   }, []);
   return { ...result, isLoading: result.status === "loading", mutate, reset };
 }
-const arrayEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
 const useCreateCacheStore = () => {
   const cacheStore = useBehaviorSubject({});
   useSubscribe(
@@ -641,21 +641,17 @@ const useQueryStore = () => {
   const [store] = react.useState(/* @__PURE__ */ new Map());
   return store;
 };
-const Context = react.createContext(void 0);
-const Provider = react.memo(({ children }) => {
-  const cacheStore = useCreateCacheStore();
-  const queryStore = useQueryStore();
-  const value = react.useMemo(() => ({ cacheStore, queryStore }), []);
-  return /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, { value, children });
-});
-const useProvider = () => {
-  const context = react.useContext(Context);
-  return { ...context };
-};
-const serializeKey = (key) => {
-  if (key.length === 0)
-    return "";
-  return JSON.stringify(key);
+const DEFAULT_STALE = 9999;
+const autoRefetch = (options$ = rxjs.of({})) => (source) => {
+  return source.pipe(
+    rxjs.repeat({
+      delay: () => options$.pipe(
+        rxjs.switchMap(
+          (options) => options.staleTime === Infinity ? rxjs.EMPTY : rxjs.timer(options.staleTime ?? DEFAULT_STALE)
+        )
+      )
+    })
+  );
 };
 const deduplicate = (key, queryStore) => (source) => {
   if (!key)
@@ -675,54 +671,151 @@ const deduplicate = (key, queryStore) => (source) => {
   }
   return finalSource;
 };
-const autoRefetch = (options = {}) => (source) => {
-  if (options.staleTime === Infinity)
-    return source;
-  return source.pipe(
-    rxjs.repeat({
-      delay: options.staleTime ?? 999999
-    })
-  );
+const serializeKey = (key) => {
+  if (key.length === 0)
+    return "";
+  return JSON.stringify(key);
 };
-function isDefined(arg) {
-  return arg !== null && arg !== void 0;
-}
-const withKeyComparison = (stream) => stream.pipe(
-  rxjs.startWith(void 0),
+const notifyQueryResult = (options$) => (stream$) => stream$.pipe(
+  rxjs.withLatestFrom(options$),
+  rxjs.map(([result, options]) => {
+    var _a, _b;
+    if (result.error) {
+      (_a = options.onError) == null ? void 0 : _a.call(options, result.error);
+    } else {
+      (_b = options.onSuccess) == null ? void 0 : _b.call(options, result);
+    }
+    return result;
+  })
+);
+const mergeResults = (stream$) => stream$.pipe(
+  rxjs.startWith({ isLoading: false, data: void 0, error: void 0 }),
   rxjs.pairwise(),
-  rxjs.map(([previous, current]) => {
-    if (current) {
-      if (!previous) {
-        return {
-          ...current,
-          previousKey: void 0,
-          isUsingDifferentKey: true
-        };
-      }
-      const serializedKey = serializeKey(current.key);
-      const serializedPreviousKey = serializeKey(previous.key);
-      return {
-        ...current,
-        previousKey: (previous == null ? void 0 : previous.key) ?? current.key,
-        isUsingDifferentKey: serializedPreviousKey !== serializedKey
-      };
+  rxjs.map(([previous, current]) => ({
+    isLoading: false,
+    data: void 0,
+    error: void 0,
+    ...previous,
+    ...current
+  })),
+  rxjs.distinctUntilChanged(shallowEqual)
+);
+const createClient = () => {
+  const queryStore = /* @__PURE__ */ new Map();
+  const refetch$ = new rxjs.Subject();
+  const query$ = ({
+    key,
+    fn$,
+    options$
+  }) => {
+    const refetch$2 = new rxjs.Subject();
+    const enabled$ = options$.pipe(rxjs.map(({ enabled = true }) => enabled));
+    const disabled$ = enabled$.pipe(
+      rxjs.distinctUntilChanged(),
+      rxjs.filter((enabled) => !enabled)
+    );
+    const triggers = [
+      refetch$2.pipe(rxjs.startWith(null)),
+      enabled$.pipe(
+        rxjs.distinctUntilChanged(),
+        rxjs.filter((enabled) => enabled)
+      )
+    ];
+    const serializedKey = serializeKey(key);
+    const query$2 = rxjs.combineLatest(triggers).pipe(
+      rxjs.tap((params) => {
+        console.log("query$ trigger", { key, params });
+      }),
+      rxjs.withLatestFrom(fn$),
+      rxjs.switchMap(([, query]) => {
+        const deferredQuery = rxjs.defer(() => {
+          const queryOrResponse = typeof query === "function" ? query() : query;
+          return rxjs.from(queryOrResponse);
+        });
+        return rxjs.merge(
+          disabled$.pipe(
+            rxjs.take(1),
+            rxjs.map(() => ({
+              isLoading: false
+            }))
+          ),
+          rxjs.merge(
+            rxjs.of({ isLoading: true, error: void 0 }),
+            deferredQuery.pipe(
+              deduplicate(serializedKey, queryStore),
+              rxjs.map((result) => ({
+                isLoading: false,
+                data: { result },
+                error: void 0
+              })),
+              rxjs.catchError(
+                (error) => rxjs.of({
+                  isLoading: false,
+                  data: void 0,
+                  error
+                })
+              ),
+              notifyQueryResult(options$)
+            )
+          ).pipe(autoRefetch(options$), rxjs.takeUntil(disabled$))
+        );
+      }),
+      mergeResults,
+      rxjs.tap((data) => {
+        console.log("query$ return", data);
+      })
+    );
+    return {
+      query$: query$2,
+      refetch$: refetch$2,
+      enabled$
+    };
+  };
+  return {
+    query$,
+    refetch$,
+    queryStore,
+    destroy: () => {
     }
-    return void 0;
-  }),
-  rxjs.filter(isDefined)
+  };
+};
+const Context = react.createContext({
+  cacheStore: {},
+  client: createClient()
+});
+const Provider = react.memo(
+  ({
+    children,
+    client
+  }) => {
+    const cacheStore = useCreateCacheStore();
+    const queryStore = useQueryStore();
+    const value = react.useMemo(() => ({ cacheStore, queryStore, client }), [client]);
+    react.useEffect(
+      () => () => {
+        client.destroy();
+      },
+      [client]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, { value, children });
+  }
 );
+const useProvider = () => {
+  const context = react.useContext(Context);
+  return { ...context };
+};
+const arrayEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
+function isDefined(arg) {
+  return arg !== null && arg !== void 0;
+}
+const defaultValue = { data: void 0, isLoading: true, error: void 0 };
 function useQuery(keyOrQuery, queryOrOptionOrNothing, optionsOrNothing) {
   const query = Array.isArray(keyOrQuery) ? queryOrOptionOrNothing : keyOrQuery;
   const options = optionsOrNothing ?? (queryOrOptionOrNothing !== query ? queryOrOptionOrNothing : void 0) ?? {};
+  const internalRefresh$ = useSubject();
+  const { client } = useProvider();
   const key = Array.isArray(keyOrQuery) ? keyOrQuery : void 0;
   const params$ = useBehaviorSubject({ key, options, query });
-  const refetch$ = useSubject();
-  const data$ = useBehaviorSubject({
-    data: void 0,
-    error: void 0,
-    isLoading: true
-  });
-  const { queryStore } = useProvider();
   react.useEffect(() => {
     params$.current.next({
       key,
@@ -730,104 +823,81 @@ function useQuery(keyOrQuery, queryOrOptionOrNothing, optionsOrNothing) {
       query
     });
   }, [key, options, query]);
-  useSubscribe(() => {
-    const options$ = params$.current.pipe(
-      rxjs.map(({ options: options2 }) => options2),
-      rxjs.distinctUntilChanged(shallowEqual)
-    );
-    const newKeyReceived$ = params$.current.pipe(
-      rxjs.map(({ key: key2 }) => key2 ?? []),
-      rxjs.distinctUntilChanged(arrayEqual)
-    );
-    const newQuery$ = params$.current.pipe(
-      rxjs.map(({ query: query2 }) => query2 ?? (() => rxjs.of(void 0)))
-    );
-    const queryAsObservableObjectChanged$ = newQuery$.pipe(
-      rxjs.filter((query2) => typeof query2 !== "function"),
-      rxjs.distinctUntilChanged(shallowEqual)
-    );
-    const enabledOptionChanged$ = options$.pipe(
-      rxjs.map(({ enabled = true }) => enabled),
-      rxjs.distinctUntilChanged(),
-      rxjs.share()
-    );
-    const queryTrigger$ = rxjs.combineLatest([
-      newKeyReceived$,
-      enabledOptionChanged$,
-      queryAsObservableObjectChanged$.pipe(rxjs.startWith(void 0)),
-      refetch$.current.pipe(rxjs.startWith(void 0))
-    ]);
-    const disabled$ = enabledOptionChanged$.pipe(
-      rxjs.filter((enabled) => !enabled),
-      rxjs.tap(() => {
-        data$.current.next({
-          ...data$.current.getValue(),
-          isLoading: false
-        });
-      })
-    );
-    return queryTrigger$.pipe(
-      rxjs.withLatestFrom(options$, newQuery$),
-      rxjs.map(([[key2, enabled], options2, query2]) => ({
-        key: key2,
-        enabled,
-        options: options2,
-        query: query2
-      })),
-      withKeyComparison,
-      rxjs.filter(({ enabled }) => enabled),
-      rxjs.switchMap(({ key: key2, options: options2, isUsingDifferentKey, query: query2 }) => {
-        const serializedKey = serializeKey(key2);
-        return rxjs.of(null).pipe(
-          rxjs.tap(() => {
-            data$.current.next({
-              ...data$.current.getValue(),
-              data: isUsingDifferentKey ? void 0 : data$.current.getValue().data,
-              error: void 0,
-              isLoading: true
-            });
-          }),
-          rxjs.switchMap(() => {
-            const query$ = rxjs.defer(() => {
-              const queryOrResponse = typeof query2 === "function" ? query2() : query2;
-              return rxjs.from(queryOrResponse);
-            });
-            return query$.pipe(
-              querx(options2),
-              deduplicate(serializedKey, queryStore),
-              // key.length > 0 ? withCache(key) : identity,
-              rxjs.map((response) => [response]),
-              rxjs.catchError((error) => {
-                return rxjs.of([void 0, error]);
-              }),
-              rxjs.tap(([response, error]) => {
-                if (response) {
-                  if (options2.onSuccess != null)
-                    options2.onSuccess(response);
-                }
-                data$.current.next({
-                  ...data$.current.getValue(),
-                  isLoading: false,
-                  error,
-                  data: response
-                });
-              })
-            );
-          }),
-          autoRefetch(options2),
-          rxjs.takeUntil(disabled$)
-        );
-      })
-    );
-  }, []);
   const result = useObserve(
-    () => data$.current,
-    { defaultValue: data$.current.getValue() },
-    []
+    () => {
+      const computedDefaultValue = {
+        ...defaultValue,
+        isLoading: params$.current.getValue().options.enabled !== false
+      };
+      const newKeyReceived$ = params$.current.pipe(
+        rxjs.map(({ key: key2 }) => key2 ?? []),
+        rxjs.distinctUntilChanged(arrayEqual)
+      );
+      const newObservableObjectQuery$ = params$.current.pipe(
+        rxjs.map(({ query: query2 }) => query2),
+        rxjs.distinctUntilChanged(shallowEqual),
+        rxjs.skip(1),
+        rxjs.filter((query2) => !!query2 && typeof query2 !== "function"),
+        rxjs.startWith(params$.current.getValue().query),
+        rxjs.filter(isDefined)
+      );
+      const fn$ = params$.current.pipe(
+        rxjs.map(({ query: query2 }) => query2),
+        rxjs.filter(isDefined)
+      );
+      const options$ = params$.current.pipe(rxjs.map(({ options: options2 }) => options2));
+      const triggers$ = rxjs.combineLatest([
+        newKeyReceived$,
+        newObservableObjectQuery$
+      ]);
+      return triggers$.pipe(
+        rxjs.switchMap(([key2]) => {
+          const { query$, refetch$ } = client.query$({
+            key: key2,
+            fn$,
+            options$
+          });
+          const subscriptions = [internalRefresh$.current.subscribe(refetch$)];
+          return query$.pipe(
+            rxjs.finalize(() => {
+              subscriptions.forEach((sub) => {
+                sub.unsubscribe();
+              });
+            }),
+            rxjs.startWith(computedDefaultValue),
+            rxjs.pairwise(),
+            rxjs.map(
+              ([
+                { data: previousData, ...restPrevious },
+                { data: currentData, ...restCurrent }
+              ]) => ({
+                ...restPrevious,
+                ...restCurrent,
+                data: currentData && "result" in currentData ? currentData.result : previousData == null ? void 0 : previousData.result
+              })
+            )
+          );
+        }),
+        /**
+         * @important
+         * We skip the first result as it is comparable to default passed value.
+         * This is assuming all query are async and does not return a result right away.
+         * This is a design choice.
+         */
+        params$.current.getValue().options.enabled !== false ? rxjs.skip(1) : rxjs.identity
+      );
+    },
+    {
+      defaultValue: {
+        ...defaultValue,
+        isLoading: params$.current.getValue().options.enabled !== false
+      }
+    },
+    [client]
   );
-  const refetch = react.useCallback((arg) => {
-    refetch$.current.next(arg);
-  }, []);
+  const refetch = react.useCallback(() => {
+    internalRefresh$.current.next();
+  }, [client]);
   return { ...result, refetch };
 }
 function useSubscribeEffect(source, unsafeOptions, deps = []) {
@@ -853,6 +923,7 @@ function useSubscribeEffect(source, unsafeOptions, deps = []) {
 exports.PersistSignals = PersistSignals;
 exports.ReactjrxQueryProvider = Provider;
 exports.SIGNAL_RESET = SIGNAL_RESET;
+exports.createClient = createClient;
 exports.createLocalforageAdapter = createLocalforageAdapter;
 exports.createSharedStoreAdapter = createSharedStoreAdapter;
 exports.exponentialBackoffDelay = exponentialBackoffDelay;
@@ -860,8 +931,8 @@ exports.getDelay = getDelay;
 exports.retryBackoff = retryBackoff;
 exports.signal = signal;
 exports.trigger = trigger;
+exports.useAsyncQuery = useAsyncQuery;
 exports.useLiveRef = useLiveRef;
-exports.useMutation = useMutation;
 exports.useObserve = useObserve;
 exports.useObserveCallback = useObserveCallback;
 exports.usePersistSignalsContext = usePersistSignalsContext;
@@ -870,6 +941,7 @@ exports.useScopeSignals = useScopeSignals;
 exports.useSetSignal = useSetSignal;
 exports.useSignal = useSignal;
 exports.useSignalValue = useSignalValue;
+exports.useSubject = useSubject;
 exports.useSubscribe = useSubscribe;
 exports.useSubscribeEffect = useSubscribeEffect;
 exports.useUnmountObservable = useUnmountObservable;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from "./lib/binding/useObserve";
 export * from "./lib/binding/useSubscribe";
 export * from "./lib/binding/useObserveCallback";
 export * from "./lib/binding/trigger";
+export * from "./lib/binding/useSubject";
 export * from "./lib/state/signal";
 export * from "./lib/state/useSignal";
 export * from "./lib/state/useSetSignal";
@@ -15,7 +16,8 @@ export * from "./lib/state/persistance/createLocalforageAdapter";
 export * from "./lib/utils/useUnmountObservable";
 export * from "./lib/utils/retryBackoff";
 export * from "./lib/utils/useLiveRef";
-export * from "./lib/queries/useMutation";
+export * from "./lib/queries/useAsyncQuery";
 export * from "./lib/queries/useQuery";
 export * from "./lib/queries/useSubscribeEffect";
+export * from "./lib/queries/client/createClient";
 export { Provider as ReactjrxQueryProvider } from "./lib/queries/Provider";

package/dist/index.js

@@ -1,5 +1,5 @@
 import { useRef, useMemo, useCallback, useSyncExternalStore, useEffect, createContext, memo, useContext, useState } from "react";
-import { distinctUntilChanged, tap, finalize, catchError, EMPTY, Subject, identity, BehaviorSubject, of, zip, from, map, merge, throttleTime, switchMap, defer, iif, timer, throwError, take, startWith, combineLatest, first, takeUntil, filter, concatMap as concatMap$1, mergeMap, skip, interval, withLatestFrom, shareReplay, repeat, pairwise, share, retry } from "rxjs";
+import { distinctUntilChanged, tap, finalize, catchError, EMPTY, Subject, identity, BehaviorSubject, of, zip, from, map, merge, throttleTime, switchMap, defer, iif, timer, throwError, take, startWith, combineLatest, first, takeUntil, filter, concatMap as concatMap$1, mergeMap, skip, interval, withLatestFrom, repeat, shareReplay, pairwise, retry } from "rxjs";
 import { jsx } from "react/jsx-runtime";
 import { retryWhen, concatMap, tap as tap$1 } from "rxjs/operators";
 const useLiveRef = (value) => {
@@ -145,8 +145,8 @@ function trigger(mapper = identity) {
 }
 const SIGNAL_RESET = Symbol("SIGNAL_RESET");
 function signal(options) {
-  const { default: defaultValue } = options ?? {};
-  const subject = new BehaviorSubject(defaultValue);
+  const { default: defaultValue2 } = options ?? {};
+  const subject = new BehaviorSubject(defaultValue2);
   const setValue = (arg) => {
     if (arg === subject.getValue())
       return;
@@ -158,7 +158,7 @@ function signal(options) {
       return;
     }
     if (arg === SIGNAL_RESET) {
-      subject.next(defaultValue ?? void 0);
+      subject.next(defaultValue2 ?? void 0);
       return;
     }
     subject.next(arg);
@@ -457,13 +457,13 @@ function shallowEqual(objA, objB) {
   }
   return true;
 }
-function useMutation(query, mapOperatorOrOptions, options = {}) {
+function useAsyncQuery(query, mapOperatorOrOptions, options = {}) {
   const queryRef = useLiveRef(query);
   const triggerSubject = useSubject();
   const resetSubject = useSubject({
     /**
      * @important
-     * Because mutation can still run after unmount, the user might
+     * 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.
      */
@@ -517,6 +517,7 @@ function useMutation(query, mapOperatorOrOptions, options = {}) {
               isLastMutationCalled
             ]).pipe(
               map(([{ data, isError }, isLastMutationCalled2]) => {
+                console.log("success", { data, isLastMutationCalled: isLastMutationCalled2 });
                 if (!isError) {
                   if (optionsRef.current.onSuccess != null)
                     optionsRef.current.onSuccess(data, args);
@@ -544,12 +545,12 @@ function useMutation(query, mapOperatorOrOptions, options = {}) {
         })
       )
     ).pipe(
+      filter((state) => !!state && !!Object.keys(state).length),
       /**
        * @important
        * state update optimization
        */
-      distinctUntilChanged(shallowEqual),
-      filter((state) => !!state && !!Object.keys(state).length)
+      distinctUntilChanged(shallowEqual)
     ).subscribe((state) => {
       data$.current.next({
         ...data$.current.getValue(),
@@ -577,7 +578,6 @@ function useMutation(query, mapOperatorOrOptions, options = {}) {
   }, []);
   return { ...result, isLoading: result.status === "loading", mutate, reset };
 }
-const arrayEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
 const useCreateCacheStore = () => {
   const cacheStore = useBehaviorSubject({});
   useSubscribe(
@@ -639,21 +639,17 @@ const useQueryStore = () => {
   const [store] = useState(/* @__PURE__ */ new Map());
   return store;
 };
-const Context = createContext(void 0);
-const Provider = memo(({ children }) => {
-  const cacheStore = useCreateCacheStore();
-  const queryStore = useQueryStore();
-  const value = useMemo(() => ({ cacheStore, queryStore }), []);
-  return /* @__PURE__ */ jsx(Context.Provider, { value, children });
-});
-const useProvider = () => {
-  const context = useContext(Context);
-  return { ...context };
-};
-const serializeKey = (key) => {
-  if (key.length === 0)
-    return "";
-  return JSON.stringify(key);
+const DEFAULT_STALE = 9999;
+const autoRefetch = (options$ = of({})) => (source) => {
+  return source.pipe(
+    repeat({
+      delay: () => options$.pipe(
+        switchMap(
+          (options) => options.staleTime === Infinity ? EMPTY : timer(options.staleTime ?? DEFAULT_STALE)
+        )
+      )
+    })
+  );
 };
 const deduplicate = (key, queryStore) => (source) => {
   if (!key)
@@ -673,54 +669,151 @@ const deduplicate = (key, queryStore) => (source) => {
   }
   return finalSource;
 };
-const autoRefetch = (options = {}) => (source) => {
-  if (options.staleTime === Infinity)
-    return source;
-  return source.pipe(
-    repeat({
-      delay: options.staleTime ?? 999999
-    })
-  );
+const serializeKey = (key) => {
+  if (key.length === 0)
+    return "";
+  return JSON.stringify(key);
 };
-function isDefined(arg) {
-  return arg !== null && arg !== void 0;
-}
-const withKeyComparison = (stream) => stream.pipe(
-  startWith(void 0),
+const notifyQueryResult = (options$) => (stream$) => stream$.pipe(
+  withLatestFrom(options$),
+  map(([result, options]) => {
+    var _a, _b;
+    if (result.error) {
+      (_a = options.onError) == null ? void 0 : _a.call(options, result.error);
+    } else {
+      (_b = options.onSuccess) == null ? void 0 : _b.call(options, result);
+    }
+    return result;
+  })
+);
+const mergeResults = (stream$) => stream$.pipe(
+  startWith({ isLoading: false, data: void 0, error: void 0 }),
   pairwise(),
-  map(([previous, current]) => {
-    if (current) {
-      if (!previous) {
-        return {
-          ...current,
-          previousKey: void 0,
-          isUsingDifferentKey: true
-        };
-      }
-      const serializedKey = serializeKey(current.key);
-      const serializedPreviousKey = serializeKey(previous.key);
-      return {
-        ...current,
-        previousKey: (previous == null ? void 0 : previous.key) ?? current.key,
-        isUsingDifferentKey: serializedPreviousKey !== serializedKey
-      };
+  map(([previous, current]) => ({
+    isLoading: false,
+    data: void 0,
+    error: void 0,
+    ...previous,
+    ...current
+  })),
+  distinctUntilChanged(shallowEqual)
+);
+const createClient = () => {
+  const queryStore = /* @__PURE__ */ new Map();
+  const refetch$ = new Subject();
+  const query$ = ({
+    key,
+    fn$,
+    options$
+  }) => {
+    const refetch$2 = new Subject();
+    const enabled$ = options$.pipe(map(({ enabled = true }) => enabled));
+    const disabled$ = enabled$.pipe(
+      distinctUntilChanged(),
+      filter((enabled) => !enabled)
+    );
+    const triggers = [
+      refetch$2.pipe(startWith(null)),
+      enabled$.pipe(
+        distinctUntilChanged(),
+        filter((enabled) => enabled)
+      )
+    ];
+    const serializedKey = serializeKey(key);
+    const query$2 = combineLatest(triggers).pipe(
+      tap((params) => {
+        console.log("query$ trigger", { key, params });
+      }),
+      withLatestFrom(fn$),
+      switchMap(([, query]) => {
+        const deferredQuery = defer(() => {
+          const queryOrResponse = typeof query === "function" ? query() : query;
+          return from(queryOrResponse);
+        });
+        return merge(
+          disabled$.pipe(
+            take(1),
+            map(() => ({
+              isLoading: false
+            }))
+          ),
+          merge(
+            of({ isLoading: true, error: void 0 }),
+            deferredQuery.pipe(
+              deduplicate(serializedKey, queryStore),
+              map((result) => ({
+                isLoading: false,
+                data: { result },
+                error: void 0
+              })),
+              catchError(
+                (error) => of({
+                  isLoading: false,
+                  data: void 0,
+                  error
+                })
+              ),
+              notifyQueryResult(options$)
+            )
+          ).pipe(autoRefetch(options$), takeUntil(disabled$))
+        );
+      }),
+      mergeResults,
+      tap((data) => {
+        console.log("query$ return", data);
+      })
+    );
+    return {
+      query$: query$2,
+      refetch$: refetch$2,
+      enabled$
+    };
+  };
+  return {
+    query$,
+    refetch$,
+    queryStore,
+    destroy: () => {
     }
-    return void 0;
-  }),
-  filter(isDefined)
+  };
+};
+const Context = createContext({
+  cacheStore: {},
+  client: createClient()
+});
+const Provider = memo(
+  ({
+    children,
+    client
+  }) => {
+    const cacheStore = useCreateCacheStore();
+    const queryStore = useQueryStore();
+    const value = useMemo(() => ({ cacheStore, queryStore, client }), [client]);
+    useEffect(
+      () => () => {
+        client.destroy();
+      },
+      [client]
+    );
+    return /* @__PURE__ */ jsx(Context.Provider, { value, children });
+  }
 );
+const useProvider = () => {
+  const context = useContext(Context);
+  return { ...context };
+};
+const arrayEqual = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
+function isDefined(arg) {
+  return arg !== null && arg !== void 0;
+}
+const defaultValue = { data: void 0, isLoading: true, error: void 0 };
 function useQuery(keyOrQuery, queryOrOptionOrNothing, optionsOrNothing) {
   const query = Array.isArray(keyOrQuery) ? queryOrOptionOrNothing : keyOrQuery;
   const options = optionsOrNothing ?? (queryOrOptionOrNothing !== query ? queryOrOptionOrNothing : void 0) ?? {};
+  const internalRefresh$ = useSubject();
+  const { client } = useProvider();
   const key = Array.isArray(keyOrQuery) ? keyOrQuery : void 0;
   const params$ = useBehaviorSubject({ key, options, query });
-  const refetch$ = useSubject();
-  const data$ = useBehaviorSubject({
-    data: void 0,
-    error: void 0,
-    isLoading: true
-  });
-  const { queryStore } = useProvider();
   useEffect(() => {
     params$.current.next({
       key,
@@ -728,104 +821,81 @@ function useQuery(keyOrQuery, queryOrOptionOrNothing, optionsOrNothing) {
       query
     });
   }, [key, options, query]);
-  useSubscribe(() => {
-    const options$ = params$.current.pipe(
-      map(({ options: options2 }) => options2),
-      distinctUntilChanged(shallowEqual)
-    );
-    const newKeyReceived$ = params$.current.pipe(
-      map(({ key: key2 }) => key2 ?? []),
-      distinctUntilChanged(arrayEqual)
-    );
-    const newQuery$ = params$.current.pipe(
-      map(({ query: query2 }) => query2 ?? (() => of(void 0)))
-    );
-    const queryAsObservableObjectChanged$ = newQuery$.pipe(
-      filter((query2) => typeof query2 !== "function"),
-      distinctUntilChanged(shallowEqual)
-    );
-    const enabledOptionChanged$ = options$.pipe(
-      map(({ enabled = true }) => enabled),
-      distinctUntilChanged(),
-      share()
-    );
-    const queryTrigger$ = combineLatest([
-      newKeyReceived$,
-      enabledOptionChanged$,
-      queryAsObservableObjectChanged$.pipe(startWith(void 0)),
-      refetch$.current.pipe(startWith(void 0))
-    ]);
-    const disabled$ = enabledOptionChanged$.pipe(
-      filter((enabled) => !enabled),
-      tap(() => {
-        data$.current.next({
-          ...data$.current.getValue(),
-          isLoading: false
-        });
-      })
-    );
-    return queryTrigger$.pipe(
-      withLatestFrom(options$, newQuery$),
-      map(([[key2, enabled], options2, query2]) => ({
-        key: key2,
-        enabled,
-        options: options2,
-        query: query2
-      })),
-      withKeyComparison,
-      filter(({ enabled }) => enabled),
-      switchMap(({ key: key2, options: options2, isUsingDifferentKey, query: query2 }) => {
-        const serializedKey = serializeKey(key2);
-        return of(null).pipe(
-          tap(() => {
-            data$.current.next({
-              ...data$.current.getValue(),
-              data: isUsingDifferentKey ? void 0 : data$.current.getValue().data,
-              error: void 0,
-              isLoading: true
-            });
-          }),
-          switchMap(() => {
-            const query$ = defer(() => {
-              const queryOrResponse = typeof query2 === "function" ? query2() : query2;
-              return from(queryOrResponse);
-            });
-            return query$.pipe(
-              querx(options2),
-              deduplicate(serializedKey, queryStore),
-              // key.length > 0 ? withCache(key) : identity,
-              map((response) => [response]),
-              catchError((error) => {
-                return of([void 0, error]);
-              }),
-              tap(([response, error]) => {
-                if (response) {
-                  if (options2.onSuccess != null)
-                    options2.onSuccess(response);
-                }
-                data$.current.next({
-                  ...data$.current.getValue(),
-                  isLoading: false,
-                  error,
-                  data: response
-                });
-              })
-            );
-          }),
-          autoRefetch(options2),
-          takeUntil(disabled$)
-        );
-      })
-    );
-  }, []);
   const result = useObserve(
-    () => data$.current,
-    { defaultValue: data$.current.getValue() },
-    []
+    () => {
+      const computedDefaultValue = {
+        ...defaultValue,
+        isLoading: params$.current.getValue().options.enabled !== false
+      };
+      const newKeyReceived$ = params$.current.pipe(
+        map(({ key: key2 }) => key2 ?? []),
+        distinctUntilChanged(arrayEqual)
+      );
+      const newObservableObjectQuery$ = params$.current.pipe(
+        map(({ query: query2 }) => query2),
+        distinctUntilChanged(shallowEqual),
+        skip(1),
+        filter((query2) => !!query2 && typeof query2 !== "function"),
+        startWith(params$.current.getValue().query),
+        filter(isDefined)
+      );
+      const fn$ = params$.current.pipe(
+        map(({ query: query2 }) => query2),
+        filter(isDefined)
+      );
+      const options$ = params$.current.pipe(map(({ options: options2 }) => options2));
+      const triggers$ = combineLatest([
+        newKeyReceived$,
+        newObservableObjectQuery$
+      ]);
+      return triggers$.pipe(
+        switchMap(([key2]) => {
+          const { query$, refetch$ } = client.query$({
+            key: key2,
+            fn$,
+            options$
+          });
+          const subscriptions = [internalRefresh$.current.subscribe(refetch$)];
+          return query$.pipe(
+            finalize(() => {
+              subscriptions.forEach((sub) => {
+                sub.unsubscribe();
+              });
+            }),
+            startWith(computedDefaultValue),
+            pairwise(),
+            map(
+              ([
+                { data: previousData, ...restPrevious },
+                { data: currentData, ...restCurrent }
+              ]) => ({
+                ...restPrevious,
+                ...restCurrent,
+                data: currentData && "result" in currentData ? currentData.result : previousData == null ? void 0 : previousData.result
+              })
+            )
+          );
+        }),
+        /**
+         * @important
+         * We skip the first result as it is comparable to default passed value.
+         * This is assuming all query are async and does not return a result right away.
+         * This is a design choice.
+         */
+        params$.current.getValue().options.enabled !== false ? skip(1) : identity
+      );
+    },
+    {
+      defaultValue: {
+        ...defaultValue,
+        isLoading: params$.current.getValue().options.enabled !== false
+      }
+    },
+    [client]
   );
-  const refetch = useCallback((arg) => {
-    refetch$.current.next(arg);
-  }, []);
+  const refetch = useCallback(() => {
+    internalRefresh$.current.next();
+  }, [client]);
   return { ...result, refetch };
 }
 function useSubscribeEffect(source, unsafeOptions, deps = []) {
@@ -852,6 +922,7 @@ export {
   PersistSignals,
   Provider as ReactjrxQueryProvider,
   SIGNAL_RESET,
+  createClient,
   createLocalforageAdapter,
   createSharedStoreAdapter,
   exponentialBackoffDelay,
@@ -859,8 +930,8 @@ export {
   retryBackoff,
   signal,
   trigger,
+  useAsyncQuery,
   useLiveRef,
-  useMutation,
   useObserve,
   useObserveCallback,
   usePersistSignalsContext,
@@ -869,6 +940,7 @@ export {
   useSetSignal,
   useSignal,
   useSignalValue,
+  useSubject,
   useSubscribe,
   useSubscribeEffect,
   useUnmountObservable,

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

@@ -10,6 +10,6 @@ interface Option<R = undefined> {
 export declare function useObserve<T>(source: BehaviorSubject<T>): T;
 export declare function useObserve<T>(source: Observable<T>): T | undefined;
 export declare function useObserve<T>(source: () => Observable<T>, deps: DependencyList): T | undefined;
-export declare function useObserve<T, R = undefined>(source: Observable<T>, options: Option<R>): T | R;
-export declare function useObserve<T, R = undefined>(source: () => Observable<T>, options: Option<R>, deps: DependencyList): T | R;
+export declare function useObserve<T>(source: Observable<T>, options: Option<T>): T;
+export declare function useObserve<T>(source: () => Observable<T>, options: Option<T>, deps: DependencyList): T;
 export {};

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

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import { type BehaviorSubject } from "rxjs";
+import { createClient } from "./client/createClient";
 type CacheStore = Record<string, {
     value: any;
     date: number;
@@ -9,15 +10,16 @@ export declare const Context: import("react").Context<{
     cacheStore: {
         current: BehaviorSubject<CacheStore>;
     };
-    queryStore: import("./deduplication/useQueryStore").QueryStore;
-} | undefined>;
-export declare const Provider: import("react").MemoExoticComponent<({ children }: {
+    client: ReturnType<typeof createClient>;
+}>;
+export declare const Provider: import("react").MemoExoticComponent<({ children, client }: {
     children: ReactNode;
+    client: ReturnType<typeof createClient>;
 }) => import("react/jsx-runtime").JSX.Element>;
 export declare const useProvider: () => {
-    cacheStore?: {
+    cacheStore: {
         current: BehaviorSubject<CacheStore>;
-    } | undefined;
-    queryStore?: import("./deduplication/useQueryStore").QueryStore | undefined;
+    };
+    client: ReturnType<typeof createClient>;
 };
 export {};

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

@@ -0,0 +1,21 @@
+import { type Observable, Subject } from "rxjs";
+import { type QuerxOptions } from "../types";
+import { type QueryResult } from "./types";
+type Query<T> = (() => Promise<T>) | (() => Observable<T>) | Observable<T>;
+export declare const createClient: () => {
+    query$: <T>({ key, fn$, options$ }: {
+        key: any[];
+        fn$: Observable<Query<T>>;
+        options$: Observable<QuerxOptions<T>>;
+    }) => {
+        query$: Observable<QueryResult<T>>;
+        refetch$: Subject<void>;
+        enabled$: Observable<boolean>;
+    };
+    refetch$: Subject<{
+        key: any[];
+    }>;
+    queryStore: Map<any, any>;
+    destroy: () => void;
+};
+export {};

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

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

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

@@ -0,0 +1,7 @@
+export interface QueryResult<T> {
+    data: {
+        result: T;
+    } | undefined;
+    isLoading: boolean;
+    error: unknown;
+}

package/dist/lib/queries/invalidation/autoRefetch.d.ts

@@ -1,4 +1,4 @@
 import { type Observable } from "rxjs";
-export declare const autoRefetch: <T>(options?: {
+export declare const autoRefetch: <T>(options$?: Observable<{
     staleTime?: number;
-}) => (source: Observable<T>) => Observable<T>;
+}>) => (source: Observable<T>) => Observable<T>;

package/dist/lib/queries/{useMutation.d.ts → useAsyncQuery.d.ts}

@@ -4,22 +4,22 @@ interface QueryState<R> {
     status: "idle" | "loading" | "error" | "success";
     error: unknown;
 }
-export interface MutationOptions<Result, Params> {
+export interface AsyncQueryOptions<Result, Params> {
     retry?: false | number | ((attempt: number, error: unknown) => boolean);
     /**
-     * Called for every mutation on error.
+     * 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 mutation on success.
+     * 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;
     /**
-     * When true, any running mutation will be cancelled (when possible) on unmount.
+     * 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.
      *
@@ -39,19 +39,19 @@ interface Result<A, R> {
     status: "idle" | "loading" | "error" | "success";
     isLoading: boolean;
     /**
-     * If the latest mutation is in a success state, data contains its result.
+     * If the latest async query is in a success state, data contains its result.
      *
      * @important
-     * The value does not automatically reset when a new mutation run. It will be updated
-     * when a new mutation success or error.
+     * 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 mutation is in a error state, error contains its error.
+     * If the latest async query is in a error state, error contains its error.
      *
      * @important
-     * The value does not automatically reset when a new mutation run. It will be updated
-     * when a new mutation success or error.
+     * 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;
@@ -63,20 +63,20 @@ interface Result<A, R> {
  * it when specific need arise.
  *
  * `merge`:
- * Run each mutation as they are triggered without any cancellation or queue system.
- * The result is always from the latest mutation triggered, not necessarily
+ * 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 mutation sequentially following
- * a queue system. The result is not necessarily the last triggered mutation
- * but the current running mutation.
+ * 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 mutation triggered and cancel any previously running one.
- * Result correspond to the current running mutation.
+ * Only run the latest async query triggered and cancel any previously running one.
+ * Result correspond to the current running async query.
  */
 type MapOperator = "switch" | "concat" | "merge";
-export declare function useMutation<A = void, R = undefined>(query: (args: A) => Promise<R> | Observable<R>, mapOperatorOrOptions?: MapOperator, options?: MutationOptions<R, A>): Result<A, R>;
-export declare function useMutation<A = void, R = undefined>(query: (args: A) => Promise<R> | Observable<R>, mapOperatorOrOptions?: MutationOptions<R, A>): Result<A, R>;
+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 {};

package/dist/lib/state/useSignal.d.ts

@@ -1,2 +1,2 @@
 import { type Signal } from "./signal";
-export declare const useSignal: <S, R>(signal: Signal<S, R>) => readonly [S | R, (stateOrUpdater: typeof import("./constants").SIGNAL_RESET | S | ((prev: S) => S)) => void];
+export declare const useSignal: <S>(signal: Signal<S, S>) => readonly [S, (stateOrUpdater: typeof import("./constants").SIGNAL_RESET | S | ((prev: S) => S)) => void];

package/dist/lib/state/useSignalValue.d.ts

@@ -1,2 +1,2 @@
 import { type Signal } from "./signal";
-export declare const useSignalValue: <S, R>(signal: Signal<S, R>, key?: string) => S | R;
+export declare const useSignalValue: <S>(signal: Signal<S, S>, key?: string) => S;

package/package.json

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

package/dist/lib/queries/keys/withKeyComparison.d.ts

@@ -1,16 +0,0 @@
-import type { Observable } from "rxjs";
-export declare const withKeyComparison: <T extends {
-    key: any[];
-}>(stream: Observable<T>) => Observable<(T & {
-    previousKey: undefined;
-    isUsingDifferentKey: boolean;
-} extends infer T_1 ? T_1 extends T & {
-    previousKey: undefined;
-    isUsingDifferentKey: boolean;
-} ? T_1 extends null | undefined ? never : T_1 : never : never) | (T & {
-    previousKey: any[];
-    isUsingDifferentKey: boolean;
-} extends infer T_2 ? T_2 extends T & {
-    previousKey: any[];
-    isUsingDifferentKey: boolean;
-} ? T_2 extends null | undefined ? never : T_2 : never : never)>;