fix(query): make queries work with Refs in queryKey array (#108)

* fix: make use-query working with Refs

* docs: update

Author: aantipov

docs/guides/query-keys.md

@@ -38,11 +38,11 @@ useQuery(['todos', { type: 'done' }], ...)
 // queryKey === ['todos', { type: 'done' }]
 ```
 
-!> If your query key parameter **will change over time** in the same component, do not place it directly in the `queryKey` array. Place it inside an object as a `ref` and wrap the whole `queryKey` in `reactive`. This is due to how vue reactivity system works.
+!> If your query key parameter **will change over time** in the same component, pass every such query key parameter as a `ref` or computed value.
 
 ```js
 const id = ref(5);
-useQuery(reactive(['todo', { id }]), ...)
+useQuery(['todo', id], ...)
 ```
 
 ### Query Keys are hashed deterministically!

src/vue/__tests__/useQuery.test.ts

@@ -84,7 +84,7 @@ describe("useQuery", () => {
     });
   });
 
-  test("should update query on reactive prop change", async () => {
+  test("should update query on reactive options object change", async () => {
     const spy = jest.fn();
     const onSuccess = ref(noop);
     useQuery(
@@ -103,6 +103,31 @@ describe("useQuery", () => {
     expect(spy).toBeCalledTimes(1);
   });
 
+  test("should update query on reactive (Ref) key change", async () => {
+    const secondKeyRef = ref("key7");
+    const query = useQuery(["key6", secondKeyRef], simpleFetcher);
+
+    await flushPromises();
+
+    expect(query).toMatchObject({
+      status: { value: "success" },
+    });
+
+    secondKeyRef.value = "key8";
+    await flushPromises();
+
+    expect(query).toMatchObject({
+      status: { value: "loading" },
+      data: { value: undefined },
+    });
+
+    await flushPromises();
+
+    expect(query).toMatchObject({
+      status: { value: "success" },
+    });
+  });
+
   test("should properly execute dependant queries", async () => {
     const { data } = useQuery("dependant1", simpleFetcher);
 

src/vue/useBaseQuery.ts

@@ -5,6 +5,7 @@ import {
   ToRefs,
   reactive,
   watchEffect,
+  unref,
 } from "vue-demi";
 
 import type {
@@ -53,15 +54,19 @@ export function useBaseQuery<
   Observer: typeof QueryObserver
 ): UseQueryReturnType<TData, TError> {
   const queryClient = useQueryClient(options.queryClientKey);
-  const defaultedOptions = queryClient.defaultQueryObserverOptions(options);
+  const defaultedOptions = queryClient.defaultQueryObserverOptions(
+    getOptionsWithUnrefKey(options)
+  );
   const observer = new Observer(queryClient, defaultedOptions);
   const state = reactive(observer.getCurrentResult());
   const unsubscribe = observer.subscribe((result) => {
     updateState(state, result);
   });
 
   watchEffect(() => {
-    observer.setOptions(queryClient.defaultQueryObserverOptions(options));
+    observer.setOptions(
+      queryClient.defaultQueryObserverOptions(getOptionsWithUnrefKey(options))
+    );
   });
 
   onUnmounted(() => {
@@ -80,4 +85,13 @@ export function useBaseQuery<
     ...resultRefs,
     suspense,
   };
+
+  // We need to unref keys, otherwise ReactQuery doesn't recognise keys changes
+  function getOptionsWithUnrefKey<
+    T extends { queryKey?: QueryKey | undefined }
+  >(options: T): T {
+    return Array.isArray(options.queryKey)
+      ? { ...options, queryKey: options.queryKey.map(unref) }
+      : options;
+  }
 }