feat(useQuery): make query options reactive by default (#109)

* feat: make query options reactive

* fix: cleanup

* docs: update

* fix: type

* fix: increase coverage, revert test

* refactor: improve types

* docs: update readme

Author: aantipov

README.md

@@ -71,15 +71,13 @@ For topics not covered in vue-query docs visit https://react-query.tanstack.com/
    });
    ```
 
-3. If you need to update options on your query dynamically, make sure to pass it as reactive property
+3. If you need to update options on your query dynamically, make sure to pass them as reactive variables
 
    ```ts
    const id = ref(1);
-   const queryKey = reactive(["todos", { id }]);
+   const queryKey = ["todos", id];
    const queryFunction = () => getTodos(id);
-   const options = reactive({
-     enabled: false,
-   });
+   const enabled = ref(false);
 
-   const query = useQuery(queryKey, queryFunction, options);
+   const query = useQuery(queryKey, queryFunction, { enabled });
    ```

docs/guides/dependent-queries.md

@@ -9,12 +9,11 @@ const enabled = computed(() => !!user.value?.id);
 
 // Then get the user's projects
 const { isIdle, data: projects } = useQuery(
-  reactive(["projects", { userId }]),
+  ["projects", userId],
   () => getProjectsByUser(userId.value),
-  reactive({
-    // The query will not execute until the userId exists
-    enabled,
-  })
+  {
+    enabled, // The query will not execute until the userId exists
+  }
 );
 
 // isIdle will be `true` until `enabled` is true and the query begins to fetch.

docs/guides/parallel-queries.md

@@ -25,7 +25,7 @@ const users = computed(...)
 const userQueries = useQueries(
   users.value.map(user => {
     return {
-      queryKey: ['user', {userId: user.id}],
+      queryKey: ['user', user.id],
       queryFn: () => fetchUserById(user.id),
     }
   })

docs/guides/placeholder-query-data.md

@@ -39,7 +39,7 @@ A good example of this would be searching the cached data from a blog post list
 
 ```js
 const result = useQuery(
-  ["blogPost", { blogPostId }],
+  ["blogPost", blogPostId],
   () => fetch(`/blogPosts/${blogPostId}`),
   {
     placeholderData: () => {

docs/guides/query-functions.md

@@ -48,7 +48,7 @@ Query keys are not just for uniquely identifying the data you are fetching, but
 
 ```js
 function useTodos(status, page) {
-  const result = useQuery(reactive(["todos", { status, page }]), fetchTodoList);
+  const result = useQuery(["todos", { status, page }], fetchTodoList);
 }
 
 // Access the key, status and page variables in your query function!

docs/guides/query-keys.md

@@ -70,9 +70,7 @@ Since query keys uniquely describe the data they are fetching, they should inclu
 
 ```js
 function useTodos(todoId) {
-  const queryKey = reactive(["todos", { todoId }]);
+  const queryKey = ["todos", todoId];
   const result = useQuery(queryKey, () => fetchTodoById(todoId.value));
 }
 ```
-
-!> `queryKeys` that depend on variables should be wrapped in `reactive`. Variables should be passed as an object as `refs`. This will guarantee that Vue reactivity system will work for you.

docs/guides/query-retries.md

@@ -11,7 +11,7 @@ You can configure retries both on a global level and an individual query level.
 import { useQuery } from "vue-query";
 
 // Make a specific query retry a certain number of times
-const result = useQuery(["todos"], fetchTodos, {
+const result = useQuery("todos", fetchTodos, {
   retry: 10, // Will retry failed requests 10 times before displaying an error
 });
 ```

src/vue/__tests__/useQuery.test.ts

@@ -128,6 +128,33 @@ describe("useQuery", () => {
     });
   });
 
+  test("should update query when an option is passed as Ref and it's changed", async () => {
+    const enabled = ref(false);
+    const query = useQuery("key9", simpleFetcher, { enabled });
+
+    await flushPromises();
+
+    expect(query).toMatchObject({
+      status: { value: "idle" },
+      data: { value: undefined },
+    });
+
+    enabled.value = true;
+
+    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/__tests__/utils.test.ts

@@ -41,7 +41,7 @@ describe("utils", () => {
       const options = { retry: false };
       const result = parseMutationArgs(options);
 
-      expect(result).toBe(options);
+      expect(result).toEqual(options);
     });
 
     test("should merge query key with options", () => {
@@ -50,7 +50,6 @@ describe("utils", () => {
       const expected = { ...options, mutationKey: "key" };
 
       expect(result).toEqual(expected);
-      expect(result).toBe(options);
     });
 
     test("should merge query fn with options", () => {
@@ -59,7 +58,6 @@ describe("utils", () => {
       const expected = { ...options, mutationFn: successMutator };
 
       expect(result).toEqual(expected);
-      expect(result).toBe(options);
     });
 
     test("should merge query key and fn with options", () => {
@@ -72,7 +70,6 @@ describe("utils", () => {
       };
 
       expect(result).toEqual(expected);
-      expect(result).toBe(options);
     });
   });
 
@@ -81,7 +78,7 @@ describe("utils", () => {
       const options = { retry: false };
       const result = parseQueryArgs(options);
 
-      expect(result).toBe(options);
+      expect(result).toStrictEqual(options);
     });
 
     test("should merge query key with options", () => {
@@ -90,7 +87,6 @@ describe("utils", () => {
       const expected = { ...options, queryKey: "key" };
 
       expect(result).toEqual(expected);
-      expect(result).toBe(options);
     });
 
     test("should merge query key and fn with options", () => {
@@ -103,7 +99,6 @@ describe("utils", () => {
       };
 
       expect(result).toEqual(expected);
-      expect(result).toBe(options);
     });
   });
 

src/vue/types.ts

@@ -1 +1,32 @@
+import type { QueryKey, QueryObserverOptions } from "react-query/types/core";
+import { Ref } from "vue-demi";
+
+export type MaybeRef<T> = Ref<T> | T;
+
 export type WithQueryClientKey<T> = T & { queryClientKey?: string };
+
+// A Vue version of QueriesObserverOptions from "react-query/types/core"
+// Accept refs as options
+export type VueQueryObserverOptions<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey
+> = {
+  [Property in keyof QueryObserverOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryData,
+    TQueryKey
+  >]: MaybeRef<
+    QueryObserverOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryData,
+      TQueryKey
+    >[Property]
+  >;
+};