feat(useQuery, useInfiniteQuery): deep watch for reactive arguments, deep unref options (#111)

* refactor: use lodash clonedeepwith function

* refactor: improve useQuery logic

* fix: typings

* refactor: cleanup

* refactor: cleanup

* refactor: cleanup

* refactor: rename getQueryOptions function

* test: add more tests

* revert: bring back parseQueryArgs

* refactor: replace lodash clonedeep with custom implementation

* chore: cleanup

* fix: typescript issue

Author: aantipov

package.json

@@ -69,6 +69,7 @@
     "@vue/composition-api": "^1.2.4",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^8.0.0",
+    "@vue/vue3-jest": "27.0.0-alpha.1",
     "eslint": "^8.1.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
@@ -85,7 +86,6 @@
     "ts-node": "^10.4.0",
     "typescript": "^4.4.4",
     "vue": "^3.2.20",
-    "@vue/vue3-jest": "27.0.0-alpha.1",
     "vue2": "npm:vue@2"
   }
 }

src/vue/__tests__/useQuery.test.ts

@@ -11,6 +11,7 @@ import {
   flushPromises,
   rejectFetcher,
   simpleFetcher,
+  getSimpleFetcherWithReturnData,
   noop,
 } from "./test-utils";
 import { useQuery } from "../useQuery";
@@ -31,14 +32,9 @@ describe("useQuery", () => {
   test("should properly execute query", () => {
     useQuery("key0", simpleFetcher, { staleTime: 1000 });
 
-    expect(useBaseQuery).toBeCalledWith(
-      {
-        queryFn: expect.anything(),
-        queryKey: "key0",
-        staleTime: 1000,
-      },
-      QueryObserver
-    );
+    expect(useBaseQuery).toBeCalledWith(QueryObserver, "key0", simpleFetcher, {
+      staleTime: 1000,
+    });
   });
 
   test("should return loading status initially", () => {
@@ -52,14 +48,51 @@ describe("useQuery", () => {
     });
   });
 
-  test("should resolve to success and update reactive state", async () => {
-    const query = useQuery("key2", simpleFetcher);
+  test("should resolve to success and update reactive state: useQuery(key, dataFn)", async () => {
+    const query = useQuery("key2", getSimpleFetcherWithReturnData("result2"));
+
+    await flushPromises();
+
+    expect(query).toMatchObject({
+      status: { value: "success" },
+      data: { value: "result2" },
+      isLoading: { value: false },
+      isFetching: { value: false },
+      isFetched: { value: true },
+      isSuccess: { value: true },
+    });
+  });
+
+  test("should resolve to success and update reactive state: useQuery(optionsObj)", async () => {
+    const query = useQuery({
+      queryKey: "key31",
+      queryFn: getSimpleFetcherWithReturnData("result31"),
+      enabled: true,
+    });
+
+    await flushPromises();
+
+    expect(query).toMatchObject({
+      status: { value: "success" },
+      data: { value: "result31" },
+      isLoading: { value: false },
+      isFetching: { value: false },
+      isFetched: { value: true },
+      isSuccess: { value: true },
+    });
+  });
+
+  test("should resolve to success and update reactive state: useQuery(key, optionsObj)", async () => {
+    const query = useQuery("key32", {
+      queryFn: getSimpleFetcherWithReturnData("result32"),
+      enabled: true,
+    });
 
     await flushPromises();
 
     expect(query).toMatchObject({
       status: { value: "success" },
-      data: { value: "Some data" },
+      data: { value: "result32" },
       isLoading: { value: false },
       isFetching: { value: false },
       isFetched: { value: true },

src/vue/__tests__/utils.test.ts

@@ -6,7 +6,10 @@ import {
   parseMutationFilterArgs,
   parseQueryArgs,
   updateState,
+  cloneDeep,
+  cloneDeepUnref,
 } from "../utils";
+import { reactive, ref } from "vue-demi";
 
 describe("utils", () => {
   describe("isQueryKey", () => {
@@ -147,4 +150,115 @@ describe("utils", () => {
       expect(origin).toEqual(expected);
     });
   });
+
+  describe("cloneDeep", () => {
+    test("should copy primitives and functions AS-IS", () => {
+      expect(cloneDeep(3456)).toBe(3456);
+      expect(cloneDeep("theString")).toBe("theString");
+      expect(cloneDeep(null)).toBe(null);
+    });
+
+    test("should copy Maps and Sets AS-IS", () => {
+      const setVal = new Set([3, 4, 5]);
+      const setValCopy = cloneDeep(setVal);
+      expect(setValCopy).toBe(setVal);
+      expect(setValCopy).toStrictEqual(new Set([3, 4, 5]));
+
+      const mapVal = new Map([
+        ["a", "aVal"],
+        ["b", "bVal"],
+      ]);
+      const mapValCopy = cloneDeep(mapVal);
+      expect(mapValCopy).toBe(mapVal);
+      expect(mapValCopy).toStrictEqual(
+        new Map([
+          ["a", "aVal"],
+          ["b", "bVal"],
+        ])
+      );
+    });
+
+    test("should deeply copy arrays", () => {
+      const val = [
+        25,
+        "str",
+        null,
+        new Set([3, 4]),
+        [5, 6, { a: 1 }],
+        undefined,
+      ];
+      const cp = cloneDeep(val);
+      expect(cp).toStrictEqual([
+        25,
+        "str",
+        null,
+        new Set([3, 4]),
+        [5, 6, { a: 1 }],
+        undefined,
+      ]);
+      expect(cp).not.toBe(val);
+      expect(cp[3]).toBe(val[3]); // Set([3, 4])
+      expect(cp[4]).not.toBe(val[4]); // [5, 6, { a: 1 }]
+      expect((cp[4] as number[])[2]).not.toBe((val[4] as number[])[2]); // { a : 1 }
+    });
+
+    test("should deeply copy object", () => {
+      const val = reactive({
+        a: 25,
+        b: "str",
+        c: null,
+        d: undefined,
+        e: new Set([5, 6]),
+        f: [3, 4],
+        g: { fa: 26 },
+      });
+      const cp = cloneDeep(val);
+
+      expect(cp).toStrictEqual({
+        a: 25,
+        b: "str",
+        c: null,
+        d: undefined,
+        e: new Set([5, 6]),
+        f: [3, 4],
+        g: { fa: 26 },
+      });
+
+      expect(cp.e).toBe(val.e); // Set
+      expect(cp.f).not.toBe(val.f); // []
+      expect(cp.g).not.toBe(val.g); // {}
+    });
+  });
+
+  describe("cloneDeepUnref", () => {
+    test("should unref primitives", () => {
+      expect(cloneDeepUnref(ref(34))).toBe(34);
+      expect(cloneDeepUnref(ref("mystr"))).toBe("mystr");
+    });
+
+    test("should deeply unref arrays", () => {
+      const val = ref([2, 3, ref(4), ref("5"), { a: ref(6) }, [ref(7)]]);
+      const cp = cloneDeepUnref(val);
+      expect(cp).toStrictEqual([2, 3, 4, "5", { a: 6 }, [7]]);
+    });
+
+    test("should deeply unref objects", () => {
+      const val = ref({
+        a: 1,
+        b: ref(2),
+        c: [ref("c1"), ref(["c2"])],
+        d: {
+          e: ref("e"),
+        },
+      });
+      const cp = cloneDeepUnref(val);
+
+      expect(cp).toEqual({
+        a: 1,
+        b: 2,
+        c: ["c1", ["c2"]],
+        d: { e: "e" },
+      });
+    });
+  });
 });

src/vue/types.ts

@@ -1,4 +1,8 @@
-import type { QueryKey, QueryObserverOptions } from "react-query/types/core";
+import type {
+  QueryKey,
+  QueryObserverOptions,
+  InfiniteQueryObserverOptions,
+} from "react-query/types/core";
 import { Ref } from "vue-demi";
 
 export type MaybeRef<T> = Ref<T> | T;
@@ -30,3 +34,29 @@ export type VueQueryObserverOptions<
     >[Property]
   >;
 };
+
+// A Vue version of InfiniteQueryObserverOptions from "react-query/types/core"
+// Accept refs as options
+export type VueInfiniteQueryObserverOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = unknown,
+  TQueryData = unknown,
+  TQueryKey extends QueryKey = QueryKey
+> = {
+  [Property in keyof InfiniteQueryObserverOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryData,
+    TQueryKey
+  >]: MaybeRef<
+    InfiniteQueryObserverOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryData,
+      TQueryKey
+    >[Property]
+  >;
+};