feat: unref useQueries options (#230)

Author: DamianOsipiuk

examples/basic/package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "vue": "3.2.27",
-    "vue-query": ">=1.0.0"
+    "vue-query": "^1.25.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "2.0.1",

examples/nuxt-simple/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@nuxtjs/composition-api": "^0.28.0",
     "nuxt": "^2.0.0",
-    "vue-query": ">=1.0.0"
+    "vue-query": "^1.25.2"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.1",

src/vue/useQueries.ts

@@ -5,7 +5,6 @@ import {
   reactive,
   readonly,
   watch,
-  unref,
   Ref,
   isRef,
   isReactive,
@@ -18,6 +17,7 @@ import type {
 
 import { useQueryClient } from "./useQueryClient";
 import { UseQueryOptions } from "./useQuery";
+import { cloneDeepUnref } from "./utils";
 
 // Avoid TS depth-limit error in case of large array literal
 type MAXIMUM_DEPTH = 20;
@@ -138,28 +138,28 @@ type UseQueriesOptionsArg<T extends any[]> = readonly [...UseQueriesOptions<T>];
 export function useQueries<T extends any[]>(
   queries: Ref<UseQueriesOptionsArg<T>> | UseQueriesOptionsArg<T>
 ): Readonly<UseQueriesResults<T>> {
-  const queryClientKey = (unref(queries) as UseQueriesOptionsArg<T>)[0]
-    ?.queryClientKey;
+  const unreffedQueries = cloneDeepUnref(queries) as UseQueriesOptionsArg<T>;
+
+  const queryClientKey = unreffedQueries[0]?.queryClientKey;
   const queryClient = useQueryClient(queryClientKey);
-  const defaultedQueries = (unref(queries) as UseQueriesOptionsArg<T>).map(
-    (options) => {
-      return queryClient.defaultQueryObserverOptions(options);
-    }
-  );
+  const defaultedQueries = unreffedQueries.map((options) => {
+    return queryClient.defaultQueryObserverOptions(options);
+  });
 
   const observer = new QueriesObserver(queryClient, defaultedQueries);
   const state = reactive(observer.getCurrentResult());
+
   const unsubscribe = observer.subscribe((result) => {
     state.splice(0, state.length, ...result);
   });
 
   if (isRef(queries) || isReactive(queries)) {
     watch(queries, () => {
-      const defaulted = (unref(queries) as UseQueriesOptionsArg<T>).map(
-        (options) => {
-          return queryClient.defaultQueryObserverOptions(options);
-        }
-      );
+      const defaulted = (
+        cloneDeepUnref(queries) as UseQueriesOptionsArg<T>
+      ).map((options) => {
+        return queryClient.defaultQueryObserverOptions(options);
+      });
       observer.setQueries(defaulted);
     });
   }