feat: useIsFetching reactivity improvements

Author: DamianOsipiuk

src/vuejs/__tests__/useIsFetching.test.ts

@@ -1,8 +1,8 @@
-import { onScopeDispose } from "vue-demi";
+import { onScopeDispose, reactive } from "vue-demi";
 
 import { flushPromises, simpleFetcher } from "./test-utils";
 import { useQuery } from "../useQuery";
-import { useIsFetching } from "../useIsFetching";
+import { parseFilterArgs, useIsFetching } from "../useIsFetching";
 
 jest.mock("../useQueryClient");
 
@@ -28,6 +28,29 @@ 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
@@ -52,4 +75,21 @@ describe("useIsFetching", () => {
 
     onScopeDisposeMock.mockReset();
   });
+
+  describe("parseFilterArgs", () => {
+    test("should default to empty filters", () => {
+      const result = parseFilterArgs(undefined);
+
+      expect(result).toEqual({});
+    });
+
+    test("should merge query key with filters", () => {
+      const filters = { stale: true };
+
+      const result = parseFilterArgs(["key"], filters);
+      const expected = { ...filters, queryKey: ["key"] };
+
+      expect(result).toEqual(expected);
+    });
+  });
 });

src/vuejs/__tests__/utils.test.ts

@@ -1,10 +1,8 @@
-import { successMutator, simpleFetcher } from "./test-utils";
+import { successMutator } from "./test-utils";
 import {
   isQueryKey,
-  parseFilterArgs,
   parseMutationArgs,
   parseMutationFilterArgs,
-  parseQueryArgs,
   updateState,
   cloneDeep,
   cloneDeepUnref,
@@ -18,23 +16,6 @@ describe("utils", () => {
     });
   });
 
-  describe("parseFilterArgs", () => {
-    test("should default to empty filters", () => {
-      const result = parseFilterArgs(undefined);
-
-      expect(result).toEqual({});
-    });
-
-    test("should merge query key with filters", () => {
-      const filters = { stale: true };
-
-      const result = parseFilterArgs(["key"], filters);
-      const expected = { ...filters, queryKey: ["key"] };
-
-      expect(result).toEqual(expected);
-    });
-  });
-
   describe("parseMutationArgs", () => {
     test("should return the same instance of options", () => {
       const options = { retry: false };
@@ -72,35 +53,6 @@ describe("utils", () => {
     });
   });
 
-  describe("parseQueryArgs", () => {
-    test("should return the same instance of options", () => {
-      const options = { retry: false };
-      const result = parseQueryArgs(options);
-
-      expect(result).toStrictEqual(options);
-    });
-
-    test("should merge query key with options", () => {
-      const options = { retry: false };
-      const result = parseQueryArgs(["key"], options);
-      const expected = { ...options, queryKey: ["key"] };
-
-      expect(result).toEqual(expected);
-    });
-
-    test("should merge query key and fn with options", () => {
-      const options = { retry: false };
-      const result = parseQueryArgs(["key"], simpleFetcher, options);
-      const expected = {
-        ...options,
-        queryKey: ["key"],
-        queryFn: simpleFetcher,
-      };
-
-      expect(result).toEqual(expected);
-    });
-  });
-
   describe("parseMutationFilterArgs", () => {
     test("should default to empty filters", () => {
       const result = parseMutationFilterArgs(undefined);

src/vuejs/useIsFetching.ts

@@ -1,12 +1,12 @@
-import { onScopeDispose, Ref, ref, watchEffect } from "vue-demi";
+import { onScopeDispose, Ref, ref, watch } from "vue-demi";
 import type { QueryKey } from "react-query/lib/core";
 import type { QueryFilters as QF } from "react-query/lib/core/utils";
 
 import { useQueryClient } from "./useQueryClient";
-import { parseFilterArgs } from "./utils";
-import type { WithQueryClientKey } from "./types";
+import { cloneDeepUnref, isQueryKey } from "./utils";
+import type { MaybeRefDeep, WithQueryClientKey } from "./types";
 
-export type QueryFilters = WithQueryClientKey<QF>;
+export type QueryFilters = MaybeRefDeep<WithQueryClientKey<QF>>;
 
 export function useIsFetching(filters?: QueryFilters): Ref<number>;
 export function useIsFetching(
@@ -17,26 +17,42 @@ export function useIsFetching(
   arg1?: QueryKey | QueryFilters,
   arg2?: QueryFilters
 ): Ref<number> {
-  const filters: Ref<QueryFilters> = ref({});
-  const parsedFilters = parseFilterArgs(arg1, arg2);
-  filters.value = parsedFilters;
+  const filters = ref(parseFilterArgs(arg1, arg2));
+  const queryClient = useQueryClient(filters.value.queryClientKey);
 
-  const queryClient = useQueryClient(parsedFilters.queryClientKey);
-
-  const isFetching = ref(queryClient.isFetching(filters.value));
+  const isFetching = ref(queryClient.isFetching(filters));
 
   const unsubscribe = queryClient.getQueryCache().subscribe(() => {
-    isFetching.value = queryClient.isFetching(filters.value);
+    isFetching.value = queryClient.isFetching(filters);
   });
 
-  watchEffect(() => {
-    const parsedFiltersUpdate = parseFilterArgs(arg1, arg2);
-    filters.value = parsedFiltersUpdate;
-  });
+  watch(
+    [() => arg1, () => arg2],
+    () => {
+      filters.value = parseFilterArgs(arg1, arg2);
+      isFetching.value = queryClient.isFetching(filters);
+    },
+    { deep: true }
+  );
 
   onScopeDispose(() => {
     unsubscribe();
   });
 
   return isFetching;
 }
+
+export function parseFilterArgs(
+  arg1?: QueryKey | QueryFilters,
+  arg2: QueryFilters = {}
+) {
+  let options: QueryFilters;
+
+  if (isQueryKey(arg1)) {
+    options = { ...arg2, queryKey: arg1 };
+  } else {
+    options = arg1 || {};
+  }
+
+  return cloneDeepUnref(options) as WithQueryClientKey<QF>;
+}

src/vuejs/utils.ts

@@ -3,12 +3,9 @@ import type {
   MutationFunction,
   MutationKey,
   MutationOptions,
-  QueryFunction,
-  QueryObserverOptions,
   QueryKey,
 } from "react-query/lib/core";
-import { isRef, reactive, toRefs, unref, UnwrapRef } from "vue-demi";
-import { QueryFilters } from "./useIsFetching";
+import { isRef, unref, UnwrapRef } from "vue-demi";
 import { MutationFilters } from "./useIsMutating";
 
 export const VUE_QUERY_CLIENT = "VUE_QUERY_CLIENT";
@@ -22,58 +19,6 @@ export function isQueryKey(value: unknown): value is QueryKey {
   return Array.isArray(value);
 }
 
-// This Function is Deprecated. It's not used internally anymore.
-export function parseQueryArgs<
-  TQueryFnData = unknown,
-  TError = unknown,
-  TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey,
-  TOptions = QueryObserverOptions<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryFnData,
-    TQueryKey
-  >
->(
-  arg1: QueryKey | TOptions,
-  arg2: QueryFunction<TQueryFnData, TQueryKey> | TOptions = {} as TOptions,
-  arg3: TOptions = {} as TOptions
-): TOptions {
-  let options;
-
-  if (!isQueryKey(arg1)) {
-    // `useQuery(optionsObj)`
-    options = arg1;
-  } else if (typeof arg2 === "function") {
-    // `useQuery(queryKey, queryFn, optionsObj?)`
-    options = {
-      ...toRefs(reactive(arg3 as unknown as object)),
-      queryKey: arg1,
-      queryFn: arg2,
-    };
-  } else {
-    // `useQuery(queryKey, optionsObj?)`
-    options = {
-      ...toRefs(reactive(arg2 as unknown as object)),
-      queryKey: arg1,
-    };
-  }
-
-  return reactive(options as object) as unknown as TOptions;
-}
-
-export function parseFilterArgs<TFilters extends QueryFilters>(
-  arg1?: QueryKey | TFilters,
-  arg2?: TFilters
-): TFilters {
-  if (isQueryKey(arg1)) {
-    return Object.assign(arg2 || ({} as TFilters), { queryKey: arg1 });
-  }
-
-  return arg1 || ({} as TFilters);
-}
-
 export function parseMutationArgs<
   TOptions extends MutationOptions<any, any, any, any>
 >(