feat: useIsMutating reactivity improvements

Author: DamianOsipiuk

src/vuejs/__tests__/useIsFetching.test.ts

@@ -28,29 +28,6 @@ describe("useIsFetching", () => {
     expect(isFetching.value).toStrictEqual(0);
   });
 
-  test("should properly update filters", async () => {
-    const filter = reactive({ stale: false });
-    useQuery(
-      ["isFetching"],
-      () =>
-        new Promise((resolve) => {
-          setTimeout(() => {
-            return resolve("Some data");
-          }, 100);
-        })
-    );
-    const isFetching = useIsFetching(filter);
-
-    expect(isFetching.value).toStrictEqual(0);
-
-    filter.stale = true;
-    await flushPromises();
-
-    expect(isFetching.value).toStrictEqual(1);
-
-    await flushPromises(100);
-  });
-
   test("should stop listening to changes on onScopeDispose", async () => {
     const onScopeDisposeMock = onScopeDispose as jest.MockedFunction<
       typeof onScopeDispose
@@ -76,6 +53,29 @@ describe("useIsFetching", () => {
     onScopeDisposeMock.mockReset();
   });
 
+  test("should properly update filters", async () => {
+    const filter = reactive({ stale: false });
+    useQuery(
+      ["isFetching"],
+      () =>
+        new Promise((resolve) => {
+          setTimeout(() => {
+            return resolve("Some data");
+          }, 100);
+        })
+    );
+    const isFetching = useIsFetching(filter);
+
+    expect(isFetching.value).toStrictEqual(0);
+
+    filter.stale = true;
+    await flushPromises();
+
+    expect(isFetching.value).toStrictEqual(1);
+
+    await flushPromises(100);
+  });
+
   describe("parseFilterArgs", () => {
     test("should default to empty filters", () => {
       const result = parseFilterArgs(undefined);

src/vuejs/__tests__/useIsMutating.test.ts

@@ -1,8 +1,8 @@
-import { onScopeDispose } from "vue-demi";
+import { onScopeDispose, reactive } from "vue-demi";
 
 import { flushPromises, successMutator } from "./test-utils";
 import { useMutation } from "../useMutation";
-import { useIsMutating } from "../useIsMutating";
+import { parseMutationFilterArgs, useIsMutating } from "../useIsMutating";
 import { useQueryClient } from "../useQueryClient";
 
 jest.mock("../useQueryClient");
@@ -63,4 +63,39 @@ describe("useIsMutating", () => {
 
     expect(useQueryClient).toHaveBeenCalledWith(queryClientKey);
   });
+
+  test("should properly update filters", async () => {
+    const filter = reactive({ mutationKey: ["foo"] });
+    const { mutate } = useMutation(["isMutating"], (params: string) =>
+      successMutator(params)
+    );
+    mutate("foo");
+
+    const isMutating = useIsMutating(filter);
+
+    expect(isMutating.value).toStrictEqual(0);
+
+    filter.mutationKey = ["isMutating"];
+
+    await flushPromises();
+
+    expect(isMutating.value).toStrictEqual(1);
+  });
+
+  describe("parseMutationFilterArgs", () => {
+    test("should default to empty filters", () => {
+      const result = parseMutationFilterArgs(undefined);
+
+      expect(result).toEqual({});
+    });
+
+    test("should merge mutation key with filters", () => {
+      const filters = { fetching: true };
+
+      const result = parseMutationFilterArgs(["key"], filters);
+      const expected = { ...filters, mutationKey: ["key"] };
+
+      expect(result).toEqual(expected);
+    });
+  });
 });

src/vuejs/__tests__/useMutation.test.ts

@@ -1,5 +1,7 @@
+import { reactive } from "vue-demi";
 import { errorMutator, flushPromises, successMutator } from "./test-utils";
-import { useMutation } from "../useMutation";
+import { parseMutationArgs, useMutation } from "../useMutation";
+import { useQueryClient } from "../useQueryClient";
 
 jest.mock("../useQueryClient");
 
@@ -70,6 +72,26 @@ describe("useMutation", () => {
     });
   });
 
+  test("should update reactive options", async () => {
+    const queryClient = useQueryClient();
+    const mutationCache = queryClient.getMutationCache();
+    const options = reactive({ mutationKey: ["foo"] });
+    const mutation = useMutation(
+      (params: string) => successMutator(params),
+      options
+    );
+
+    options.mutationKey = ["bar"];
+    await flushPromises();
+    mutation.mutate("xyz");
+
+    await flushPromises();
+
+    const mutations = mutationCache.find({ mutationKey: ["bar"] });
+
+    expect(mutations?.options.mutationKey).toEqual(["bar"]);
+  });
+
   test("should reset state after invoking mutation.reset", async () => {
     const mutation = useMutation((params: string) => errorMutator(params));
 
@@ -231,4 +253,41 @@ describe("useMutation", () => {
       });
     });
   });
+
+  describe("parseMutationArgs", () => {
+    test("should return the same instance of options", () => {
+      const options = { retry: false };
+      const result = parseMutationArgs(options);
+
+      expect(result).toEqual(options);
+    });
+
+    test("should merge query key with options", () => {
+      const options = { retry: false };
+      const result = parseMutationArgs(["key"], options);
+      const expected = { ...options, mutationKey: ["key"] };
+
+      expect(result).toEqual(expected);
+    });
+
+    test("should merge query fn with options", () => {
+      const options = { retry: false };
+      const result = parseMutationArgs(successMutator, options);
+      const expected = { ...options, mutationFn: successMutator };
+
+      expect(result).toEqual(expected);
+    });
+
+    test("should merge query key and fn with options", () => {
+      const options = { retry: false };
+      const result = parseMutationArgs(["key"], successMutator, options);
+      const expected = {
+        ...options,
+        mutationKey: ["key"],
+        mutationFn: successMutator,
+      };
+
+      expect(result).toEqual(expected);
+    });
+  });
 });

src/vuejs/__tests__/utils.test.ts

@@ -1,12 +1,4 @@
-import { successMutator } from "./test-utils";
-import {
-  isQueryKey,
-  parseMutationArgs,
-  parseMutationFilterArgs,
-  updateState,
-  cloneDeep,
-  cloneDeepUnref,
-} from "../utils";
+import { isQueryKey, updateState, cloneDeep, cloneDeepUnref } from "../utils";
 import { reactive, ref } from "vue-demi";
 
 describe("utils", () => {
@@ -16,60 +8,6 @@ describe("utils", () => {
     });
   });
 
-  describe("parseMutationArgs", () => {
-    test("should return the same instance of options", () => {
-      const options = { retry: false };
-      const result = parseMutationArgs(options);
-
-      expect(result).toEqual(options);
-    });
-
-    test("should merge query key with options", () => {
-      const options = { retry: false };
-      const result = parseMutationArgs(["key"], options);
-      const expected = { ...options, mutationKey: ["key"] };
-
-      expect(result).toEqual(expected);
-    });
-
-    test("should merge query fn with options", () => {
-      const options = { retry: false };
-      const result = parseMutationArgs(successMutator, options);
-      const expected = { ...options, mutationFn: successMutator };
-
-      expect(result).toEqual(expected);
-    });
-
-    test("should merge query key and fn with options", () => {
-      const options = { retry: false };
-      const result = parseMutationArgs(["key"], successMutator, options);
-      const expected = {
-        ...options,
-        mutationKey: ["key"],
-        mutationFn: successMutator,
-      };
-
-      expect(result).toEqual(expected);
-    });
-  });
-
-  describe("parseMutationFilterArgs", () => {
-    test("should default to empty filters", () => {
-      const result = parseMutationFilterArgs(undefined);
-
-      expect(result).toEqual(undefined);
-    });
-
-    test("should merge mutation key with filters", () => {
-      const filters = { fetching: true };
-
-      const result = parseMutationFilterArgs(["key"], filters);
-      const expected = { ...filters, mutationKey: ["key"] };
-
-      expect(result).toEqual(expected);
-    });
-  });
-
   describe("updateState", () => {
     test("should update first object with values from the second one", () => {
       const origin = { option1: "a", option2: "b", option3: "c" };

src/vuejs/useIsMutating.ts

@@ -1,12 +1,12 @@
-import { onScopeDispose, Ref, ref } from "vue-demi";
+import { onScopeDispose, Ref, ref, watch } from "vue-demi";
 import type { MutationKey } from "react-query/lib/core";
 import type { MutationFilters as MF } from "react-query/lib/core/utils";
 
 import { useQueryClient } from "./useQueryClient";
-import { parseMutationFilterArgs } from "./utils";
-import type { WithQueryClientKey } from "./types";
+import { cloneDeepUnref, isQueryKey } from "./utils";
+import type { MaybeRefDeep, WithQueryClientKey } from "./types";
 
-export type MutationFilters = WithQueryClientKey<MF>;
+export type MutationFilters = MaybeRefDeep<WithQueryClientKey<MF>>;
 
 export function useIsMutating(filters?: MutationFilters): Ref<number>;
 export function useIsMutating(
@@ -17,18 +17,42 @@ export function useIsMutating(
   arg1?: MutationKey | MutationFilters,
   arg2?: Omit<MutationFilters, "mutationKey">
 ): Ref<number> {
-  const filters = parseMutationFilterArgs(arg1, arg2);
-  const queryClient = useQueryClient(filters?.queryClientKey);
+  const filters = ref(parseMutationFilterArgs(arg1, arg2));
+  const queryClient = useQueryClient(filters.value.queryClientKey);
 
   const isMutating = ref(queryClient.isMutating(filters));
 
   const unsubscribe = queryClient.getMutationCache().subscribe(() => {
     isMutating.value = queryClient.isMutating(filters);
   });
 
+  watch(
+    [() => arg1, () => arg2],
+    () => {
+      filters.value = parseMutationFilterArgs(arg1, arg2);
+      isMutating.value = queryClient.isMutating(filters);
+    },
+    { deep: true }
+  );
+
   onScopeDispose(() => {
     unsubscribe();
   });
 
   return isMutating;
 }
+
+export function parseMutationFilterArgs(
+  arg1?: MutationKey | MutationFilters,
+  arg2: MutationFilters = {}
+) {
+  let options: MutationFilters;
+
+  if (isQueryKey(arg1)) {
+    options = { ...arg2, mutationKey: arg1 };
+  } else {
+    options = arg1 || {};
+  }
+
+  return cloneDeepUnref(options) as WithQueryClientKey<MF>;
+}