fix: reactivity when passing more than one argument to hooks

Author: DamianOsipiuk

src/utils.ts

@@ -16,52 +16,58 @@ export function isQueryKey(value: unknown): value is QueryKey {
 
 export function parseQueryArgs<TOptions extends QueryOptions<any, any, any>>(
   arg1: QueryKey | TOptions,
-  arg2?: QueryFunction | TOptions,
-  arg3?: TOptions
+  arg2: QueryFunction | TOptions = {} as TOptions,
+  arg3: TOptions = {} as TOptions
 ): TOptions {
   if (!isQueryKey(arg1)) {
     return arg1 as TOptions;
   }
 
   if (typeof arg2 === "function") {
-    return { ...arg3, queryKey: arg1, queryFn: arg2 } as TOptions;
+    return Object.assign(arg3, {
+      queryKey: arg1,
+      queryFn: arg2,
+    }) as TOptions;
   }
 
-  return { ...arg2, queryKey: arg1 } as TOptions;
+  return Object.assign(arg2, { queryKey: arg1 }) as TOptions;
 }
 
 export function parseFilterArgs<
   TFilters extends QueryFilters,
   TOptions = unknown
 >(
   arg1?: QueryKey | TFilters,
-  arg2?: TFilters | TOptions,
-  arg3?: TOptions
+  arg2: TFilters | TOptions = {} as TOptions,
+  arg3: TOptions = {} as TOptions
 ): [TFilters, TOptions | undefined] {
   return (isQueryKey(arg1)
-    ? [{ ...arg2, queryKey: arg1 }, arg3]
+    ? [Object.assign(arg2, { queryKey: arg1 }), arg3]
     : [arg1 || {}, arg2]) as [TFilters, TOptions];
 }
 
 export function parseMutationArgs<
   TOptions extends MutationOptions<any, any, any, any>
 >(
   arg1: MutationKey | MutationFunction<any, any> | TOptions,
-  arg2?: MutationFunction<any, any> | TOptions,
-  arg3?: TOptions
+  arg2: MutationFunction<any, any> | TOptions = {} as TOptions,
+  arg3: TOptions = {} as TOptions
 ): TOptions {
   if (isQueryKey(arg1)) {
     if (typeof arg2 === "function") {
-      return { ...arg3, mutationKey: arg1, mutationFn: arg2 } as TOptions;
+      return Object.assign(arg3, {
+        mutationKey: arg1,
+        mutationFn: arg2,
+      }) as TOptions;
     }
-    return { ...arg2, mutationKey: arg1 } as TOptions;
+    return Object.assign(arg2, { mutationKey: arg1 }) as TOptions;
   }
 
   if (typeof arg1 === "function") {
-    return { ...arg2, mutationFn: arg1 } as TOptions;
+    return Object.assign(arg2, { mutationFn: arg1 }) as TOptions;
   }
 
-  return { ...arg1 } as TOptions;
+  return Object.assign(arg1) as TOptions;
 }
 
 export function updateState(

tests/useQuery.test.ts

@@ -38,7 +38,7 @@ describe("useQuery", () => {
   });
 
   test("should properly execute query with all three parameters", () => {
-    useQuery("key0", () => simpleFetcher(), { staleTime: 1000 });
+    useQuery("key0", simpleFetcher, { staleTime: 1000 });
 
     expect(useBaseQuery).toBeCalledWith(
       {
@@ -51,7 +51,7 @@ describe("useQuery", () => {
   });
 
   test("should properly execute query with queryKey and options", () => {
-    useQuery("key01", { queryFn: () => simpleFetcher(), staleTime: 1000 });
+    useQuery("key01", { queryFn: simpleFetcher, staleTime: 1000 });
 
     expect(useBaseQuery).toBeCalledWith(
       {
@@ -66,7 +66,7 @@ describe("useQuery", () => {
   test("should properly execute query with all three parameters", () => {
     useQuery({
       queryKey: "key02",
-      queryFn: () => simpleFetcher(),
+      queryFn: simpleFetcher,
       staleTime: 1000,
     });
 
@@ -81,24 +81,23 @@ describe("useQuery", () => {
   });
 
   test("should return loading status initially", () => {
-    const { status, isLoading, isFetching } = useQuery("key1", () =>
-      simpleFetcher()
-    );
+    const { status, isLoading, isFetching } = useQuery("key1", simpleFetcher);
 
     expect(status.value).toEqual("loading");
     expect(isLoading.value).toEqual(true);
     expect(isFetching.value).toEqual(true);
   });
 
   test("should be marked as stale initially", () => {
-    const { isStale } = useQuery("key2", () => simpleFetcher());
+    const { isStale } = useQuery("key2", simpleFetcher);
 
     expect(isStale.value).toEqual(true);
   });
 
   test("should return false for other states initially", () => {
-    const { isSuccess, isError, isIdle, isFetched } = useQuery("key3", () =>
-      simpleFetcher()
+    const { isSuccess, isError, isIdle, isFetched } = useQuery(
+      "key3",
+      simpleFetcher
     );
 
     expect(isSuccess.value).toEqual(false);
@@ -115,7 +114,7 @@ describe("useQuery", () => {
       isFetched,
       isFetching,
       isSuccess,
-    } = useQuery("key4", () => simpleFetcher());
+    } = useQuery("key4", simpleFetcher);
 
     await flushPromises();
 
@@ -137,7 +136,7 @@ describe("useQuery", () => {
       isFetching,
       isError,
       failureCount,
-    } = useQuery("key5", () => rejectFetcher(), {
+    } = useQuery("key5", rejectFetcher, {
       retry: false,
     });
 
@@ -155,16 +154,17 @@ describe("useQuery", () => {
 
   test("should update query on reactive prop change", async () => {
     const spy = jest.fn();
-    const onSuccessFn = ref(noop);
-    const onSuccess = () => {
-      onSuccessFn.value();
-    };
-    useQuery("key6", () => simpleFetcher(), {
-      onSuccess,
-      staleTime: 1000,
-    });
+    const onSuccess = ref(noop);
+    useQuery(
+      "key6",
+      simpleFetcher,
+      reactive({
+        onSuccess,
+        staleTime: 1000,
+      })
+    );
 
-    onSuccessFn.value = spy;
+    onSuccess.value = spy;
 
     await flushPromises();
 
@@ -177,9 +177,9 @@ describe("useQuery", () => {
     const enabled = computed(() => !!data.value);
 
     const { status } = useQuery(
+      "dependant2",
+      simpleFetcher,
       reactive({
-        queryKey: "dependant2",
-        queryFn: simpleFetcher,
         enabled,
       })
     );