fix(useQueries): fix handling of queries update. Accept Ref as an argument (#105)

Author: aantipov

src/vue/__tests__/test-utils.ts

@@ -16,6 +16,11 @@ export function simpleFetcher(): Promise<string> {
   });
 }
 
+export function getSimpleFetcherWithReturnData(returnData: unknown) {
+  return () =>
+    new Promise((resolve) => setTimeout(() => resolve(returnData), 0));
+}
+
 export function infiniteFetcher({
   pageParam = 0,
 }: {

src/vue/__tests__/useQueries.test.ts

@@ -1,10 +1,11 @@
-import { onUnmounted, reactive, set } from "vue-demi";
+import { onUnmounted, reactive } from "vue-demi";
 import { setLogger } from "react-query/core";
 
 import {
   flushPromises,
   rejectFetcher,
   simpleFetcher,
+  getSimpleFetcherWithReturnData,
   noop,
 } from "./test-utils";
 import { useQueries } from "../useQueries";
@@ -112,38 +113,51 @@ describe("useQueries", () => {
   });
 
   test("should return state for new queries", async () => {
-    const initialQueries = reactive([]);
-    const queries = [
+    const queries = reactive([
       {
         queryKey: "key31",
-        queryFn: simpleFetcher,
+        queryFn: getSimpleFetcherWithReturnData("value31"),
       },
       {
         queryKey: "key32",
-        queryFn: simpleFetcher,
+        queryFn: getSimpleFetcherWithReturnData("value32"),
       },
-    ];
-    const queriesState = useQueries(initialQueries);
+      {
+        queryKey: "key33",
+        queryFn: getSimpleFetcherWithReturnData("value33"),
+      },
+    ]);
+    const queriesState = useQueries(queries);
 
-    expect(queriesState.length).toEqual(0);
+    await flushPromises();
 
-    queries.forEach((query, index) => {
-      set(initialQueries, index, query);
-    });
+    queries.splice(
+      0,
+      queries.length,
+      {
+        queryKey: "key31",
+        queryFn: getSimpleFetcherWithReturnData("value31"),
+      },
+      {
+        queryKey: "key34",
+        queryFn: getSimpleFetcherWithReturnData("value34"),
+      }
+    );
 
     await flushPromises();
     await flushPromises();
 
     expect(queriesState.length).toEqual(2);
-
     expect(queriesState).toMatchObject([
       {
+        data: "value31",
         status: "success",
         isLoading: false,
         isFetching: false,
         isStale: true,
       },
       {
+        data: "value34",
         status: "success",
         isLoading: false,
         isFetching: false,

src/vue/useQueries.ts

@@ -1,6 +1,15 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { QueriesObserver } from "react-query/core";
-import { onUnmounted, reactive, readonly, set, watch } from "vue-demi";
+import {
+  onUnmounted,
+  reactive,
+  readonly,
+  watch,
+  unref,
+  Ref,
+  isRef,
+  isReactive,
+} from "vue-demi";
 
 import type {
   QueryFunction,
@@ -114,33 +123,36 @@ export type UseQueriesResults<
   : // Fallback
     QueryObserverResult[];
 
+type UseQueriesOptionsArg<T extends any[]> = readonly [...UseQueriesOptions<T>];
+
 export function useQueries<T extends any[]>(
-  queries: readonly [...UseQueriesOptions<T>]
+  queries: Ref<UseQueriesOptionsArg<T>> | UseQueriesOptionsArg<T>
 ): Readonly<UseQueriesResults<T>> {
-  const queryClientKey = queries[0]?.queryClientKey;
+  const queryClientKey = (unref(queries) as UseQueriesOptionsArg<T>)[0]
+    ?.queryClientKey;
   const queryClient = useQueryClient(queryClientKey);
-  const defaultedQueries = queries.map((options) => {
-    return queryClient.defaultQueryObserverOptions(options);
-  });
+  const defaultedQueries = (unref(queries) as UseQueriesOptionsArg<T>).map(
+    (options) => {
+      return queryClient.defaultQueryObserverOptions(options);
+    }
+  );
 
   const observer = new QueriesObserver(queryClient, defaultedQueries);
   const state = reactive(observer.getCurrentResult());
   const unsubscribe = observer.subscribe((result) => {
-    result.forEach((resultEntry, index) => {
-      set(state, index, resultEntry);
-    });
+    state.splice(0, state.length, ...result);
   });
 
-  watch(
-    () => queries,
-    () => {
-      const defaulted = queries.map((options) => {
-        return queryClient.defaultQueryObserverOptions(options);
-      });
+  if (isRef(queries) || isReactive(queries)) {
+    watch(queries, () => {
+      const defaulted = (unref(queries) as UseQueriesOptionsArg<T>).map(
+        (options) => {
+          return queryClient.defaultQueryObserverOptions(options);
+        }
+      );
       observer.setQueries(defaulted);
-    },
-    { deep: true }
-  );
+    });
+  }
 
   onUnmounted(() => {
     unsubscribe();