reactjrx 1.57.0 → 1.58.0

package/dist/index.cjs

@@ -421,9 +421,9 @@ const QueryClientProvider = react.memo(
     ] });
   }
 );
-const useQueryClient = () => {
+const useQueryClient = ({ unsafe = false } = {}) => {
   const context = react.useContext(Context);
-  if (context === null) {
+  if (!unsafe && context.client === null) {
     throw new Error("You forgot to register the provider");
   }
   return context.client;
@@ -458,34 +458,38 @@ const nanoid = (size = 21) => crypto.getRandomValues(new Uint8Array(size)).reduc
   }
   return id;
 }, "");
-function useMutation(options) {
-  const client = useQueryClient();
+function useMutation(options, queryClient) {
+  const defaultQueryClient = useQueryClient({ unsafe: !!queryClient });
+  const finalQueryClient = (queryClient == null ? void 0 : queryClient.client) ?? defaultQueryClient;
   const optionsRef = useLiveRef(options);
   const defaultKey = useConstant(() => [nanoid()]);
   const key = serializeKey(options.mutationKey ?? defaultKey.current);
   const observedMutation = react.useMemo(
-    () => client.mutationClient.observe({ key }),
+    () => finalQueryClient.mutationClient.observe({ key }),
     [key]
   );
   const result = useObserve(observedMutation.result$) ?? observedMutation.lastValue;
   const mutate = react.useCallback(
     (mutationArgs) => {
-      client.mutationClient.mutate({
-        options: { ...optionsRef.current, mutationKey: key },
+      finalQueryClient.mutationClient.mutate({
+        options: {
+          ...optionsRef.current,
+          mutationKey: optionsRef.current.mutationKey ?? defaultKey.current
+        },
         args: mutationArgs
       });
     },
-    [client, key]
+    [finalQueryClient, key]
   );
   const reset = react.useCallback(() => {
-    client.mutationClient.reset({
+    finalQueryClient.mutationClient.reset({
       key: optionsRef.current.mutationKey ?? defaultKey.current
     });
-  }, [client]);
+  }, [finalQueryClient]);
   react.useEffect(() => {
     return () => {
       if (optionsRef.current.cancelOnUnMount) {
-        client.mutationClient.reset({
+        finalQueryClient.mutationClient.reset({
           key: optionsRef.current.mutationKey ?? defaultKey.current
         });
       }
@@ -1604,7 +1608,7 @@ class MutationClient {
      * @important
      * - automatically cleaned as soon as the last mutation is done for a given key
      */
-    __publicField(this, "mutationRunners$", new rxjs.BehaviorSubject(/* @__PURE__ */ new Map()));
+    __publicField(this, "mutationRunnersByKey$", new rxjs.BehaviorSubject(/* @__PURE__ */ new Map()));
     /**
      * Mutation result subject. It can be used whether there is a mutation
      * running or not and can be directly observed.
@@ -1618,16 +1622,22 @@ class MutationClient {
     this.mutate$.pipe(
       rxjs.tap(({ options, args }) => {
         const { mutationKey } = options;
-        let mutationForKey = this.mutationRunners$.getValue().get(mutationKey);
+        const serializedMutationKey = serializeKey(mutationKey);
+        let mutationForKey = this.getMutationRunnersByKey(
+          serializedMutationKey
+        );
         if (!mutationForKey) {
-          mutationForKey = createMutationRunner(options);
-          this.mutationRunners$.getValue().set(mutationKey, mutationForKey);
+          mutationForKey = {
+            ...createMutationRunner(options),
+            mutationKey
+          };
+          this.setMutationRunnersByKey(serializedMutationKey, mutationForKey);
           mutationForKey.mutation$.subscribe((result) => {
-            let resultForKeySubject = this.mutationResults$.getValue().get(mutationKey);
+            let resultForKeySubject = this.mutationResults$.getValue().get(serializedMutationKey);
             if (!resultForKeySubject) {
               resultForKeySubject = new rxjs.BehaviorSubject(result);
               const resultMap = this.mutationResults$.getValue();
-              resultMap.set(mutationKey, resultForKeySubject);
+              resultMap.set(serializedMutationKey, resultForKeySubject);
               this.mutationResults$.next(resultMap);
             } else {
               resultForKeySubject == null ? void 0 : resultForKeySubject.next(result);
@@ -1639,11 +1649,9 @@ class MutationClient {
           ).subscribe(() => {
             mutationForKey == null ? void 0 : mutationForKey.destroy();
             const resultMap = this.mutationResults$.getValue();
-            resultMap.delete(mutationKey);
+            resultMap.delete(serializedMutationKey);
             this.mutationResults$.next(resultMap);
-            const mutationsMap = this.mutationRunners$.getValue();
-            mutationsMap.delete(mutationKey);
-            this.mutationRunners$.next(mutationsMap);
+            this.deleteMutationRunnersByKey(serializedMutationKey);
           });
         }
         mutationForKey.trigger({ args, options });
@@ -1653,10 +1661,66 @@ class MutationClient {
       rxjs.tap(({ key }) => {
         var _a;
         const serializedKey = serializeKey(key);
-        (_a = this.mutationRunners$.getValue().get(serializedKey)) == null ? void 0 : _a.reset$.next();
+        (_a = this.mutationRunnersByKey$.getValue().get(serializedKey)) == null ? void 0 : _a.reset$.next();
       })
     ).subscribe();
   }
+  /**
+   * @helper
+   */
+  setMutationRunnersByKey(key, value) {
+    const map2 = this.mutationRunnersByKey$.getValue();
+    map2.set(key, value);
+    this.mutationRunnersByKey$.next(map2);
+  }
+  /**
+   * @helper
+   */
+  deleteMutationRunnersByKey(key) {
+    const map2 = this.mutationRunnersByKey$.getValue();
+    map2.delete(key);
+    this.mutationRunnersByKey$.next(map2);
+  }
+  /**
+   * @helper
+   */
+  getMutationRunnersByKey(key) {
+    return this.mutationRunnersByKey$.getValue().get(key);
+  }
+  /**
+   * @returns number of mutation runnings
+   */
+  runningMutations({ mutationKey, predicate } = {}) {
+    const defaultPredicate = ({ options }) => mutationKey ? (
+      // @todo optimize
+      serializeKey(options.mutationKey) === serializeKey(mutationKey)
+    ) : true;
+    const finalPredicate = predicate ?? defaultPredicate;
+    const mutationRunnersByKeyEntries = Array.from(
+      this.mutationRunnersByKey$.getValue().entries()
+    );
+    const lastValue = mutationRunnersByKeyEntries.filter(
+      ([, value]) => finalPredicate({ options: { mutationKey: value.mutationKey } })
+    ).reduce((acc, [, value]) => acc + value.mutationsRunning$.getValue(), 0);
+    const value$ = this.mutationRunnersByKey$.pipe(
+      rxjs.switchMap((map2) => {
+        const mutationRunners = Array.from(map2.entries()).filter(
+          ([, value]) => finalPredicate({ options: { mutationKey: value.mutationKey } })
+        ).map(([, value]) => value);
+        const mutationRunnersMutationsRunning$ = rxjs.combineLatest([
+          // when map is empty we still need to push 0
+          rxjs.of(0),
+          ...mutationRunners.map(
+            (mutationRunner) => mutationRunner.mutationsRunning$
+          )
+        ]);
+        return mutationRunnersMutationsRunning$;
+      }),
+      rxjs.map((values) => values.reduce((acc, value) => value + acc, 0)),
+      rxjs.distinctUntilChanged()
+    );
+    return { value$, lastValue };
+  }
   observe({ key }) {
     var _a;
     const currentResultValue = (_a = this.mutationResults$.getValue().get(key)) == null ? void 0 : _a.getValue();
@@ -1705,7 +1769,7 @@ class MutationClient {
     this.reset$.complete();
     this.mutate$.complete();
     this.mutationResults$.complete();
-    this.mutationRunners$.complete();
+    this.mutationRunnersByKey$.complete();
   }
 }
 const createClient = () => {

package/dist/index.js

@@ -419,9 +419,9 @@ const QueryClientProvider = memo(
     ] });
   }
 );
-const useQueryClient = () => {
+const useQueryClient = ({ unsafe = false } = {}) => {
   const context = useContext(Context);
-  if (context === null) {
+  if (!unsafe && context.client === null) {
     throw new Error("You forgot to register the provider");
   }
   return context.client;
@@ -456,34 +456,38 @@ const nanoid = (size = 21) => crypto.getRandomValues(new Uint8Array(size)).reduc
   }
   return id;
 }, "");
-function useMutation(options) {
-  const client = useQueryClient();
+function useMutation(options, queryClient) {
+  const defaultQueryClient = useQueryClient({ unsafe: !!queryClient });
+  const finalQueryClient = (queryClient == null ? void 0 : queryClient.client) ?? defaultQueryClient;
   const optionsRef = useLiveRef(options);
   const defaultKey = useConstant(() => [nanoid()]);
   const key = serializeKey(options.mutationKey ?? defaultKey.current);
   const observedMutation = useMemo(
-    () => client.mutationClient.observe({ key }),
+    () => finalQueryClient.mutationClient.observe({ key }),
     [key]
   );
   const result = useObserve(observedMutation.result$) ?? observedMutation.lastValue;
   const mutate = useCallback(
     (mutationArgs) => {
-      client.mutationClient.mutate({
-        options: { ...optionsRef.current, mutationKey: key },
+      finalQueryClient.mutationClient.mutate({
+        options: {
+          ...optionsRef.current,
+          mutationKey: optionsRef.current.mutationKey ?? defaultKey.current
+        },
         args: mutationArgs
       });
     },
-    [client, key]
+    [finalQueryClient, key]
   );
   const reset = useCallback(() => {
-    client.mutationClient.reset({
+    finalQueryClient.mutationClient.reset({
       key: optionsRef.current.mutationKey ?? defaultKey.current
     });
-  }, [client]);
+  }, [finalQueryClient]);
   useEffect(() => {
     return () => {
       if (optionsRef.current.cancelOnUnMount) {
-        client.mutationClient.reset({
+        finalQueryClient.mutationClient.reset({
           key: optionsRef.current.mutationKey ?? defaultKey.current
         });
       }
@@ -1602,7 +1606,7 @@ class MutationClient {
      * @important
      * - automatically cleaned as soon as the last mutation is done for a given key
      */
-    __publicField(this, "mutationRunners$", new BehaviorSubject(/* @__PURE__ */ new Map()));
+    __publicField(this, "mutationRunnersByKey$", new BehaviorSubject(/* @__PURE__ */ new Map()));
     /**
      * Mutation result subject. It can be used whether there is a mutation
      * running or not and can be directly observed.
@@ -1616,16 +1620,22 @@ class MutationClient {
     this.mutate$.pipe(
       tap(({ options, args }) => {
         const { mutationKey } = options;
-        let mutationForKey = this.mutationRunners$.getValue().get(mutationKey);
+        const serializedMutationKey = serializeKey(mutationKey);
+        let mutationForKey = this.getMutationRunnersByKey(
+          serializedMutationKey
+        );
         if (!mutationForKey) {
-          mutationForKey = createMutationRunner(options);
-          this.mutationRunners$.getValue().set(mutationKey, mutationForKey);
+          mutationForKey = {
+            ...createMutationRunner(options),
+            mutationKey
+          };
+          this.setMutationRunnersByKey(serializedMutationKey, mutationForKey);
           mutationForKey.mutation$.subscribe((result) => {
-            let resultForKeySubject = this.mutationResults$.getValue().get(mutationKey);
+            let resultForKeySubject = this.mutationResults$.getValue().get(serializedMutationKey);
             if (!resultForKeySubject) {
               resultForKeySubject = new BehaviorSubject(result);
               const resultMap = this.mutationResults$.getValue();
-              resultMap.set(mutationKey, resultForKeySubject);
+              resultMap.set(serializedMutationKey, resultForKeySubject);
               this.mutationResults$.next(resultMap);
             } else {
               resultForKeySubject == null ? void 0 : resultForKeySubject.next(result);
@@ -1637,11 +1647,9 @@ class MutationClient {
           ).subscribe(() => {
             mutationForKey == null ? void 0 : mutationForKey.destroy();
             const resultMap = this.mutationResults$.getValue();
-            resultMap.delete(mutationKey);
+            resultMap.delete(serializedMutationKey);
             this.mutationResults$.next(resultMap);
-            const mutationsMap = this.mutationRunners$.getValue();
-            mutationsMap.delete(mutationKey);
-            this.mutationRunners$.next(mutationsMap);
+            this.deleteMutationRunnersByKey(serializedMutationKey);
           });
         }
         mutationForKey.trigger({ args, options });
@@ -1651,10 +1659,66 @@ class MutationClient {
       tap(({ key }) => {
         var _a;
         const serializedKey = serializeKey(key);
-        (_a = this.mutationRunners$.getValue().get(serializedKey)) == null ? void 0 : _a.reset$.next();
+        (_a = this.mutationRunnersByKey$.getValue().get(serializedKey)) == null ? void 0 : _a.reset$.next();
       })
     ).subscribe();
   }
+  /**
+   * @helper
+   */
+  setMutationRunnersByKey(key, value) {
+    const map2 = this.mutationRunnersByKey$.getValue();
+    map2.set(key, value);
+    this.mutationRunnersByKey$.next(map2);
+  }
+  /**
+   * @helper
+   */
+  deleteMutationRunnersByKey(key) {
+    const map2 = this.mutationRunnersByKey$.getValue();
+    map2.delete(key);
+    this.mutationRunnersByKey$.next(map2);
+  }
+  /**
+   * @helper
+   */
+  getMutationRunnersByKey(key) {
+    return this.mutationRunnersByKey$.getValue().get(key);
+  }
+  /**
+   * @returns number of mutation runnings
+   */
+  runningMutations({ mutationKey, predicate } = {}) {
+    const defaultPredicate = ({ options }) => mutationKey ? (
+      // @todo optimize
+      serializeKey(options.mutationKey) === serializeKey(mutationKey)
+    ) : true;
+    const finalPredicate = predicate ?? defaultPredicate;
+    const mutationRunnersByKeyEntries = Array.from(
+      this.mutationRunnersByKey$.getValue().entries()
+    );
+    const lastValue = mutationRunnersByKeyEntries.filter(
+      ([, value]) => finalPredicate({ options: { mutationKey: value.mutationKey } })
+    ).reduce((acc, [, value]) => acc + value.mutationsRunning$.getValue(), 0);
+    const value$ = this.mutationRunnersByKey$.pipe(
+      switchMap((map2) => {
+        const mutationRunners = Array.from(map2.entries()).filter(
+          ([, value]) => finalPredicate({ options: { mutationKey: value.mutationKey } })
+        ).map(([, value]) => value);
+        const mutationRunnersMutationsRunning$ = combineLatest([
+          // when map is empty we still need to push 0
+          of(0),
+          ...mutationRunners.map(
+            (mutationRunner) => mutationRunner.mutationsRunning$
+          )
+        ]);
+        return mutationRunnersMutationsRunning$;
+      }),
+      map((values) => values.reduce((acc, value) => value + acc, 0)),
+      distinctUntilChanged()
+    );
+    return { value$, lastValue };
+  }
   observe({ key }) {
     var _a;
     const currentResultValue = (_a = this.mutationResults$.getValue().get(key)) == null ? void 0 : _a.getValue();
@@ -1703,7 +1767,7 @@ class MutationClient {
     this.reset$.complete();
     this.mutate$.complete();
     this.mutationResults$.complete();
-    this.mutationRunners$.complete();
+    this.mutationRunnersByKey$.complete();
   }
 }
 const createClient = () => {

package/dist/lib/queries/client/keys/serializeKey.d.ts

@@ -0,0 +1,4 @@
+import { type MutationKey } from "../mutations/types";
+import { type QueryKey } from "./types";
+export declare const serializeObject: (object: any) => string;
+export declare const serializeKey: (key: QueryKey | MutationKey) => string;

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

@@ -1,5 +1,5 @@
 import { Subject, BehaviorSubject, type Observable } from "rxjs";
-import { type MutationResult, type MutationOptions, type MutationObservedResult } from "./types";
+import { type MutationResult, type MutationOptions, type MutationObservedResult, type MutationFilters, type MutationKey } from "./types";
 import { type QueryKey } from "../keys/types";
 export declare class MutationClient {
     /**
@@ -9,7 +9,7 @@ export declare class MutationClient {
      * @important
      * - automatically cleaned as soon as the last mutation is done for a given key
      */
-    mutationRunners$: BehaviorSubject<Map<string, {
+    mutationRunnersByKey$: BehaviorSubject<Map<string, {
         mutation$: Observable<MutationResult<unknown>>;
         trigger: ({ args, options }: {
             args: unknown;
@@ -19,6 +19,8 @@ export declare class MutationClient {
         destroy: () => void;
         mutationsRunning$: BehaviorSubject<number>;
         getClosed: () => boolean;
+    } & {
+        mutationKey: MutationKey;
     }>>;
     /**
      * Mutation result subject. It can be used whether there is a mutation
@@ -36,6 +38,37 @@ export declare class MutationClient {
         key: QueryKey;
     }>;
     constructor();
+    /**
+     * @helper
+     */
+    setMutationRunnersByKey(key: string, value: any): void;
+    /**
+     * @helper
+     */
+    deleteMutationRunnersByKey(key: string): void;
+    /**
+     * @helper
+     */
+    getMutationRunnersByKey(key: string): ({
+        mutation$: Observable<MutationResult<unknown>>;
+        trigger: ({ args, options }: {
+            args: unknown;
+            options: MutationOptions<unknown, unknown>;
+        }) => void;
+        reset$: Subject<void>;
+        destroy: () => void;
+        mutationsRunning$: BehaviorSubject<number>;
+        getClosed: () => boolean;
+    } & {
+        mutationKey: MutationKey;
+    }) | undefined;
+    /**
+     * @returns number of mutation runnings
+     */
+    runningMutations({ mutationKey, predicate }?: MutationFilters): {
+        value$: Observable<number>;
+        lastValue: number;
+    };
     observe<Result>({ key }: {
         key: string;
     }): {

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

@@ -20,9 +20,33 @@ import { type Query, type QueryResult } from "../types";
  * Result correspond to the current running async query.
  */
 export type MapOperator = "switch" | "concat" | "merge";
+export type MutationStatus = "idle" | "pending" | "success" | "error";
+export type MutationKey = unknown[];
+export interface MutationFilters {
+    /**
+     * Match mutation key exactly
+     */
+    exact?: boolean;
+    /**
+     * Include mutations matching this predicate function
+     */
+    predicate?: (mutation: {
+        options: {
+            mutationKey: MutationKey;
+        };
+    }) => boolean;
+    /**
+     * Include mutations matching this mutation key
+     */
+    mutationKey?: MutationKey;
+    /**
+     * Filter by mutation status
+     */
+    status?: MutationStatus;
+}
 export interface MutationResult<R> {
     data: R | undefined;
-    status: "idle" | "pending" | "error" | "success";
+    status: MutationStatus;
     error: unknown;
 }
 export interface MutationObservedResult<R> extends MutationResult<R> {
@@ -56,7 +80,7 @@ export interface MutationOptions<Result, MutationArg> {
     onError?: (error: unknown, arg: MutationArg) => void;
     onSuccess?: (data: Result, arg: MutationArg) => void;
     mutationFn: MutationFn<Result, MutationArg>;
-    mutationKey: string;
+    mutationKey: MutationKey;
     mapOperator?: MapOperator;
     __queryInitHook?: MonoTypeOperatorFunction<any>;
     __queryRunnerHook?: MonoTypeOperatorFunction<any>;

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

@@ -7,7 +7,9 @@ export declare const QueryClientProvider: import("react").MemoExoticComponent<({
     children: ReactNode;
     client: QueryClient;
 }) => import("react/jsx-runtime").JSX.Element>;
-export declare const useQueryClient: () => {
+export declare const useQueryClient: ({ unsafe }?: {
+    unsafe?: boolean | undefined;
+}) => {
     destroy: () => void;
     pipeQueryResult: <R extends Partial<import("../client/types").QueryResult<T>>, T>({ options$ }: {
         key: string;

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

@@ -1,17 +1,17 @@
-import { type MutationOptions } from "../../client/mutations/types";
-import { type QueryKey } from "../../client/keys/types";
+import { type MutationKey, type MutationOptions } from "../../client/mutations/types";
+import { type QueryClient } from "../../client/createClient";
 export type AsyncQueryOptions<Result, Params> = Omit<MutationOptions<Result, Params>, "mutationKey"> & {
-    mutationKey?: QueryKey;
+    mutationKey?: MutationKey;
     cancelOnUnMount?: boolean;
 };
-export declare function useMutation<Args = void, R = undefined>(options: AsyncQueryOptions<R, Args>): {
+export declare function useMutation<Args = void, R = undefined>(options: AsyncQueryOptions<R, Args>, queryClient?: QueryClient): {
     isError: boolean;
     isIdle: boolean;
     isSuccess: boolean;
     isPending: boolean;
     isPaused: boolean;
     data: R | undefined;
-    status: "error" | "idle" | "success" | "pending";
+    status: import("../../client/mutations/types").MutationStatus;
     error: unknown;
     mutate: (mutationArgs: Args) => void;
     reset: () => void;

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

@@ -0,0 +1,3 @@
+import { type MutationFilters } from "../../client/mutations/types";
+import { type QueryClient } from "../../client/createClient";
+export declare const useIsMutating: ({ mutationKey, predicate }?: MutationFilters, queryClient?: QueryClient) => number;

package/dist/lib/queries/react/mutations/useMutationState.test.d.ts

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

package/dist/tests/utils.d.ts

@@ -1 +1,21 @@
+/// <reference types="node" />
+/// <reference types="react" />
+import { render } from "@testing-library/react";
+import { QueryClient } from "../lib/queries/client/createClient";
 export declare const waitForTimeout: (timeout: number) => Promise<unknown>;
+/**
+ * @see https://github.com/TanStack/query/blob/main/packages/react-query/src/__tests__/utils.tsx
+ */
+export declare function sleep(timeout: number): Promise<void>;
+/**
+ * @see https://github.com/TanStack/query/blob/main/packages/react-query/src/__tests__/utils.tsx
+ */
+export declare function setActTimeout(fn: () => void, ms?: number): NodeJS.Timeout;
+/**
+ * @see https://github.com/TanStack/query/blob/main/packages/react-query/src/__tests__/utils.tsx
+ */
+export declare function renderWithClient(client: QueryClient, ui: React.ReactElement): ReturnType<typeof render>;
+/**
+ * @see https://github.com/TanStack/query/blob/main/packages/react-query/src/__tests__/utils.tsx
+ */
+export declare function createQueryClient(): QueryClient;

package/package.json

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

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

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