From 3a5aecf992e9d50ec27b4a94146d2a4b3ba35be1 Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Thu, 3 Nov 2022 23:13:32 +0100
Subject: [PATCH 01/15] feat: vue-query client persister

---
 packages/vue-query/src/vueQueryPlugin.ts | 25 +++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/vue-query/src/vueQueryPlugin.ts b/packages/vue-query/src/vueQueryPlugin.ts
index 2333b04f02..28c9e35bb8 100644
--- a/packages/vue-query/src/vueQueryPlugin.ts
+++ b/packages/vue-query/src/vueQueryPlugin.ts
@@ -12,21 +12,20 @@ declare global {
   }
 }
 
-export interface AdditionalClient {
-  queryClient: QueryClient
-  queryClientKey: string
-}
+type ClientPersister = (client: QueryClient) => [() => void, Promise<void>]
 
-interface ConfigOptions {
-  queryClientConfig?: MaybeRefDeep<QueryClientConfig>
+interface CommonOptions {
   queryClientKey?: string
   contextSharing?: boolean
+  clientPersister?: ClientPersister
+}
+
+interface ConfigOptions extends CommonOptions {
+  queryClientConfig?: MaybeRefDeep<QueryClientConfig>
 }
 
-interface ClientOptions {
+interface ClientOptions extends CommonOptions {
   queryClient?: QueryClient
-  queryClientKey?: string
-  contextSharing?: boolean
 }
 
 export type VueQueryPluginOptions = ConfigOptions | ClientOptions
@@ -58,6 +57,13 @@ export const VueQueryPlugin = {
     }
 
     client.mount()
+    let persisterUnmount = () => {
+      // noop
+    };
+
+    if (options.clientPersister) {
+      [persisterUnmount] = options.clientPersister(client);
+    }
 
     if (process.env.NODE_ENV !== 'production' && options.contextSharing) {
       client
@@ -69,6 +75,7 @@ export const VueQueryPlugin = {
 
     const cleanup = () => {
       client.unmount()
+      persisterUnmount();
     }
 
     if (app.onUnmount) {

From 0862898dd317e9bee23515f90f8c749066e156d1 Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Thu, 3 Nov 2022 23:24:46 +0100
Subject: [PATCH 02/15] fix: change devtools link to tanstack query

---
 packages/vue-query/src/devtools/devtools.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vue-query/src/devtools/devtools.ts b/packages/vue-query/src/devtools/devtools.ts
index fce4bfcdf0..4b59a58279 100644
--- a/packages/vue-query/src/devtools/devtools.ts
+++ b/packages/vue-query/src/devtools/devtools.ts
@@ -21,7 +21,7 @@ export function setupDevtools(app: any, queryClient: QueryClient) {
       id: pluginId,
       label: pluginName,
       packageName: 'vue-query',
-      homepage: 'https://github.com/DamianOsipiuk/vue-query',
+      homepage: 'https://tanstack.com/query/v4',
       logo: 'https://vue-query.vercel.app/vue-query.svg',
       app,
       settings: {

From afb00fb865c42de75e19867882dec40da39972eb Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Mon, 7 Nov 2022 00:06:41 +0100
Subject: [PATCH 03/15] chore: update repository in package.json

---
 packages/vue-query/package.json | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/vue-query/package.json b/packages/vue-query/package.json
index 81e67c352b..b8ad9010b9 100644
--- a/packages/vue-query/package.json
+++ b/packages/vue-query/package.json
@@ -4,7 +4,11 @@
   "description": "Hooks for managing, caching and syncing asynchronous and remote data in Vue",
   "author": "Damian Osipiuk",
   "license": "MIT",
-  "repository": "tanstack/query",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/query.git",
+    "directory": "packages/vue-query"
+  },
   "homepage": "https://tanstack.com/query",
   "funding": {
     "type": "github",

From fb6232c85a8755fe3ff83f63b1d02ae3380de0c7 Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Mon, 7 Nov 2022 00:10:47 +0100
Subject: [PATCH 04/15] docs: persister example

---
 examples/vue/persister/.gitignore         |  6 +++
 examples/vue/persister/README.md          |  6 +++
 examples/vue/persister/index.html         | 12 +++++
 examples/vue/persister/package.json       | 21 +++++++++
 examples/vue/persister/src/App.vue        | 43 ++++++++++++++++++
 examples/vue/persister/src/Post.vue       | 51 +++++++++++++++++++++
 examples/vue/persister/src/Posts.vue      | 55 +++++++++++++++++++++++
 examples/vue/persister/src/main.ts        | 20 +++++++++
 examples/vue/persister/src/shims-vue.d.ts |  5 +++
 examples/vue/persister/src/types.d.ts     |  6 +++
 examples/vue/persister/tsconfig.json      | 15 +++++++
 examples/vue/persister/vite.config.ts     | 10 +++++
 12 files changed, 250 insertions(+)
 create mode 100644 examples/vue/persister/.gitignore
 create mode 100644 examples/vue/persister/README.md
 create mode 100644 examples/vue/persister/index.html
 create mode 100644 examples/vue/persister/package.json
 create mode 100644 examples/vue/persister/src/App.vue
 create mode 100644 examples/vue/persister/src/Post.vue
 create mode 100644 examples/vue/persister/src/Posts.vue
 create mode 100644 examples/vue/persister/src/main.ts
 create mode 100644 examples/vue/persister/src/shims-vue.d.ts
 create mode 100644 examples/vue/persister/src/types.d.ts
 create mode 100644 examples/vue/persister/tsconfig.json
 create mode 100644 examples/vue/persister/vite.config.ts

diff --git a/examples/vue/persister/.gitignore b/examples/vue/persister/.gitignore
new file mode 100644
index 0000000000..d424f6a89a
--- /dev/null
+++ b/examples/vue/persister/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+package-lock.json
diff --git a/examples/vue/persister/README.md b/examples/vue/persister/README.md
new file mode 100644
index 0000000000..7573cb91da
--- /dev/null
+++ b/examples/vue/persister/README.md
@@ -0,0 +1,6 @@
+# Basic example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run dev` or `yarn dev`
diff --git a/examples/vue/persister/index.html b/examples/vue/persister/index.html
new file mode 100644
index 0000000000..547b3c19e6
--- /dev/null
+++ b/examples/vue/persister/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue Query Example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue/persister/package.json b/examples/vue/persister/package.json
new file mode 100644
index 0000000000..cd79cb921b
--- /dev/null
+++ b/examples/vue/persister/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@tanstack/query-example-vue-basic",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:dev": "vite build -m development",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "vue": "3.2.41",
+    "@tanstack/vue-query": "^4.14.1",
+    "@tanstack/query-persist-client-core": "^4.14.1",
+    "@tanstack/query-sync-storage-persister": "^4.14.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "3.2.0",
+    "typescript": "4.8.4",
+    "vite": "3.2.2"
+  }
+}
diff --git a/examples/vue/persister/src/App.vue b/examples/vue/persister/src/App.vue
new file mode 100644
index 0000000000..52028d9dcd
--- /dev/null
+++ b/examples/vue/persister/src/App.vue
@@ -0,0 +1,43 @@
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+
+import Posts from "./Posts.vue";
+import Post from "./Post.vue";
+
+export default defineComponent({
+  name: "App",
+  components: { Posts, Post },
+  setup() {
+    const visitedPosts = ref(new Set());
+    const isVisited = (id: number) => visitedPosts.value.has(id);
+
+    const postId = ref(-1);
+    const setPostId = (id: number) => {
+      visitedPosts.value.add(id);
+      postId.value = id;
+    };
+
+    return {
+      isVisited,
+      postId,
+      setPostId,
+    };
+  },
+});
+</script>
+
+<template>
+  <h1>Vue Query - Basic</h1>
+  <p>
+    As you visit the posts below, you will notice them in a loading state the
+    first time you load them. However, after you return to this list and click
+    on any posts you have already visited again, you will see them load
+    instantly and background refresh right before your eyes!
+    <strong>
+      (You may need to throttle your network speed to simulate longer loading
+      sequences)
+    </strong>
+  </p>
+  <Post v-if="postId > -1" :postId="postId" @setPostId="setPostId" />
+  <Posts v-else :isVisited="isVisited" @setPostId="setPostId" />
+</template>
diff --git a/examples/vue/persister/src/Post.vue b/examples/vue/persister/src/Post.vue
new file mode 100644
index 0000000000..bb9f36e089
--- /dev/null
+++ b/examples/vue/persister/src/Post.vue
@@ -0,0 +1,51 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useQuery } from "@tanstack/vue-query";
+
+import { Post } from "./types";
+
+const fetcher = async (id: number): Promise<Post> =>
+  await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
+    (response) => response.json()
+  );
+
+export default defineComponent({
+  name: "PostDetails",
+  props: {
+    postId: {
+      type: Number,
+      required: true,
+    },
+  },
+  emits: ["setPostId"],
+  setup(props) {
+    const { isLoading, isError, isFetching, data, error } = useQuery(
+      ["post", props.postId],
+      () => fetcher(props.postId)
+    );
+
+    return { isLoading, isError, isFetching, data, error };
+  },
+});
+</script>
+
+<template>
+  <h1>Post {{ postId }}</h1>
+  <a @click="$emit('setPostId', -1)" href="#"> Back </a>
+  <div v-if="isLoading" class="update">Loading...</div>
+  <div v-else-if="isError">An error has occurred: {{ error }}</div>
+  <div v-else-if="data">
+    <h1>{{ data.title }}</h1>
+    <div>
+      <p>{{ data.body }}</p>
+    </div>
+    <div v-if="isFetching" class="update">Background Updating...</div>
+  </div>
+</template>
+
+<style scoped>
+.update {
+  font-weight: bold;
+  color: green;
+}
+</style>
diff --git a/examples/vue/persister/src/Posts.vue b/examples/vue/persister/src/Posts.vue
new file mode 100644
index 0000000000..12ee8ef15e
--- /dev/null
+++ b/examples/vue/persister/src/Posts.vue
@@ -0,0 +1,55 @@
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useQuery } from "@tanstack/vue-query";
+
+import { Post } from "./types";
+
+const fetcher = async (): Promise<Post[]> =>
+  await fetch("https://jsonplaceholder.typicode.com/posts").then((response) =>
+    response.json()
+  );
+
+export default defineComponent({
+  name: "PostsList",
+  props: {
+    isVisited: {
+      type: Function,
+      required: true,
+    },
+  },
+  emits: ["setPostId"],
+  setup() {
+    const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
+      ["posts"],
+      fetcher
+    );
+
+    return { isLoading, isError, isFetching, data, error, refetch };
+  },
+});
+</script>
+
+<template>
+  <h1>Posts</h1>
+  <div v-if="isLoading">Loading...</div>
+  <div v-else-if="isError">An error has occurred: {{ error }}</div>
+  <div v-else-if="data">
+    <ul>
+      <li v-for="item in data" :key="item.id">
+        <a
+          @click="$emit('setPostId', item.id)"
+          href="#"
+          :class="{ visited: isVisited(item.id) }"
+          >{{ item.title }}</a
+        >
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.visited {
+  font-weight: bold;
+  color: green;
+}
+</style>
diff --git a/examples/vue/persister/src/main.ts b/examples/vue/persister/src/main.ts
new file mode 100644
index 0000000000..5454f71a1e
--- /dev/null
+++ b/examples/vue/persister/src/main.ts
@@ -0,0 +1,20 @@
+import { createApp } from 'vue'
+import { VueQueryPlugin, type VueQueryPluginOptions } from '@tanstack/vue-query'
+import { persistQueryClient } from '@tanstack/query-persist-client-core'
+import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+
+import App from './App.vue'
+
+const vueQueryOptions: VueQueryPluginOptions = {
+  queryClientConfig: {
+    defaultOptions: { queries: { cacheTime: 1000 * 60 * 60 * 24, staleTime: 1000 * 60 * 60 * 24 } },
+  },
+  clientPersister: (queryClient) => {
+    return persistQueryClient({
+      queryClient,
+      persister: createSyncStoragePersister({ storage: localStorage }),
+    })
+  },
+}
+
+createApp(App).use(VueQueryPlugin, vueQueryOptions).mount('#app')
diff --git a/examples/vue/persister/src/shims-vue.d.ts b/examples/vue/persister/src/shims-vue.d.ts
new file mode 100644
index 0000000000..daba9b9ec0
--- /dev/null
+++ b/examples/vue/persister/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
diff --git a/examples/vue/persister/src/types.d.ts b/examples/vue/persister/src/types.d.ts
new file mode 100644
index 0000000000..0ff5fbb96d
--- /dev/null
+++ b/examples/vue/persister/src/types.d.ts
@@ -0,0 +1,6 @@
+export interface Post {
+  userId: number;
+  id: number;
+  title: string;
+  body: string;
+}
diff --git a/examples/vue/persister/tsconfig.json b/examples/vue/persister/tsconfig.json
new file mode 100644
index 0000000000..e754e65292
--- /dev/null
+++ b/examples/vue/persister/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "types": ["vite/client"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/examples/vue/persister/vite.config.ts b/examples/vue/persister/vite.config.ts
new file mode 100644
index 0000000000..bd15f23a1a
--- /dev/null
+++ b/examples/vue/persister/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  optimizeDeps: {
+    exclude: ["vue-query", "vue-demi"],
+  },
+});

From cef143f11559fc2e29ccb7f7de38b5b2364f796c Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Mon, 7 Nov 2022 00:13:01 +0100
Subject: [PATCH 05/15] feat: propagate isRestoring trough queryClient

---
 packages/vue-query/src/queryClient.ts    |   3 +
 packages/vue-query/src/useBaseQuery.ts   | 134 ++++++++++++++++-------
 packages/vue-query/src/vueQueryPlugin.ts |  11 +-
 3 files changed, 103 insertions(+), 45 deletions(-)

diff --git a/packages/vue-query/src/queryClient.ts b/packages/vue-query/src/queryClient.ts
index 27d1d073f5..91f7b9c3ee 100644
--- a/packages/vue-query/src/queryClient.ts
+++ b/packages/vue-query/src/queryClient.ts
@@ -1,3 +1,4 @@
+import { ref } from 'vue-demi'
 import { QueryClient as QC } from '@tanstack/query-core'
 import type {
   QueryKey,
@@ -40,6 +41,8 @@ export class QueryClient extends QC {
     super(vueQueryConfig)
   }
 
+  isRestoring = ref(false)
+
   isFetching(filters?: MaybeRefDeep<QueryFilters>): number
   isFetching(
     queryKey?: MaybeRefDeep<QueryKey>,
diff --git a/packages/vue-query/src/useBaseQuery.ts b/packages/vue-query/src/useBaseQuery.ts
index 951bbb0c3c..bdba9bb5f5 100644
--- a/packages/vue-query/src/useBaseQuery.ts
+++ b/packages/vue-query/src/useBaseQuery.ts
@@ -1,4 +1,13 @@
-import { onScopeDispose, toRefs, readonly, reactive, watch } from 'vue-demi'
+import {
+  onScopeDispose,
+  toRefs,
+  readonly,
+  reactive,
+  watch,
+  ref,
+  computed,
+  isRef,
+} from 'vue-demi'
 import type { ToRefs, UnwrapRef } from 'vue-demi'
 import type {
   QueryObserver,
@@ -9,7 +18,7 @@ import type {
 } from '@tanstack/query-core'
 import { useQueryClient } from './useQueryClient'
 import { updateState, isQueryKey, cloneDeepUnref } from './utils'
-import type { WithQueryClientKey } from './types'
+import type { MaybeRef, WithQueryClientKey } from './types'
 import type { UseQueryOptions } from './useQuery'
 import type { UseInfiniteQueryOptions } from './useInfiniteQuery'
 
@@ -34,7 +43,6 @@ export function useBaseQuery<
   TQueryFnData,
   TError,
   TData,
-  TQueryData,
   TQueryKey extends QueryKey,
 >(
   Observer: typeof QueryObserver,
@@ -46,40 +54,65 @@ export function useBaseQuery<
     | UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey> = {},
   arg3: UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey> = {},
 ): UseQueryReturnType<TData, TError> {
-  const options = getQueryUnreffedOptions()
+  const options = computed(() => parseQueryArgs(arg1, arg2, arg3))
+
   const queryClient =
-    options.queryClient ?? useQueryClient(options.queryClientKey)
-  const defaultedOptions = queryClient.defaultQueryOptions(options)
-  const observer = new Observer(queryClient, defaultedOptions)
+    options.value.queryClient ?? useQueryClient(options.value.queryClientKey)
+
+  const defaultedOptions = computed(() => {
+    const defaulted = queryClient.defaultQueryOptions(options.value)
+    defaulted._optimisticResults = queryClient.isRestoring.value
+    ? 'isRestoring'
+    : 'optimistic'
+    
+    console.log('defaulted options recalculate', options.value, queryClient.isRestoring.value, defaulted)
+    return defaulted
+  })
+
+  const observer = new Observer(queryClient, defaultedOptions.value)
   const state = reactive(observer.getCurrentResult())
-  const unsubscribe = observer.subscribe((result) => {
-    updateState(state, result)
+
+  const unsubscribe = ref(() => {
+    // noop
   })
 
   watch(
-    [() => arg1, () => arg2, () => arg3],
+    queryClient.isRestoring,
+    (isRestoring) => {
+      // isRestoring.value = val
+
+      if (!isRestoring) {
+        unsubscribe.value();
+        unsubscribe.value = observer.subscribe((result) => {
+          updateState(state, result)
+        })
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(
+    defaultedOptions,
     () => {
-      observer.setOptions(
-        queryClient.defaultQueryOptions(getQueryUnreffedOptions()),
-      )
+      observer.setOptions(defaultedOptions.value)
+      updateState(state, observer.getCurrentResult())
     },
     { deep: true },
   )
 
   onScopeDispose(() => {
-    unsubscribe()
+    unsubscribe.value()
   })
 
   const suspense = () => {
     return new Promise<QueryObserverResult<TData, TError>>((resolve) => {
       const run = () => {
-        const newOptions = queryClient.defaultQueryOptions(
-          getQueryUnreffedOptions(),
-        )
-        if (newOptions.enabled !== false) {
-          const optimisticResult = observer.getOptimisticResult(newOptions)
+        if (defaultedOptions.value.enabled !== false) {
+          const optimisticResult = observer.getOptimisticResult(
+            defaultedOptions.value,
+          )
           if (optimisticResult.isStale) {
-            resolve(observer.fetchOptimistic(defaultedOptions))
+            resolve(observer.fetchOptimistic(defaultedOptions.value))
           } else {
             resolve(optimisticResult)
           }
@@ -88,7 +121,7 @@ export function useBaseQuery<
 
       run()
 
-      watch([() => arg1, () => arg2, () => arg3], run, { deep: true })
+      watch(defaultedOptions, run, { deep: true })
     })
   }
 
@@ -96,27 +129,44 @@ export function useBaseQuery<
     ...(toRefs(readonly(state)) as UseQueryReturnType<TData, TError>),
     suspense,
   }
+}
 
-  /**
-   * Get Query Options object
-   * All inner refs unwrapped. No Reactivity
-   */
-  function getQueryUnreffedOptions() {
-    let mergedOptions
-
-    if (!isQueryKey(arg1)) {
-      // `useQuery(optionsObj)`
-      mergedOptions = arg1
-    } else if (typeof arg2 === 'function') {
-      // `useQuery(queryKey, queryFn, optionsObj?)`
-      mergedOptions = { ...arg3, queryKey: arg1, queryFn: arg2 }
-    } else {
-      // `useQuery(queryKey, optionsObj?)`
-      mergedOptions = { ...arg2, queryKey: arg1 }
-    }
-
-    return cloneDeepUnref(mergedOptions) as WithQueryClientKey<
-      QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
-    >
+export function parseQueryArgs<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+>(
+  arg1:
+    | MaybeRef<TQueryKey>
+    | MaybeRef<UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey>>,
+  arg2:
+    | MaybeRef<QueryFunction<TQueryFnData, UnwrapRef<TQueryKey>>>
+    | MaybeRef<
+        UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey>
+      > = {},
+  arg3: MaybeRef<
+    UseQueryOptionsGeneric<TQueryFnData, TError, TData, TQueryKey>
+  > = {},
+): WithQueryClientKey<
+  QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
+> {
+  const plainArg1 = isRef(arg1) ? arg1.value : arg1
+  const plainArg2 = isRef(arg2) ? arg2.value : arg2
+  const plainArg3 = isRef(arg3) ? arg3.value : arg3
+
+  let options = plainArg1
+
+  if (!isQueryKey(plainArg1)) {
+    options = plainArg1
+  } else if (typeof plainArg2 === 'function') {
+    options = { ...plainArg3, queryKey: plainArg1, queryFn: plainArg2 }
+  } else {
+    options = { ...plainArg2, queryKey: plainArg1 }
   }
+
+  return cloneDeepUnref(options) as WithQueryClientKey<
+    QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
+  >
 }
diff --git a/packages/vue-query/src/vueQueryPlugin.ts b/packages/vue-query/src/vueQueryPlugin.ts
index 28c9e35bb8..5d5478791f 100644
--- a/packages/vue-query/src/vueQueryPlugin.ts
+++ b/packages/vue-query/src/vueQueryPlugin.ts
@@ -59,10 +59,15 @@ export const VueQueryPlugin = {
     client.mount()
     let persisterUnmount = () => {
       // noop
-    };
+    }
 
     if (options.clientPersister) {
-      [persisterUnmount] = options.clientPersister(client);
+      client.isRestoring.value = true
+      const [unmount, promise] = options.clientPersister(client)
+      persisterUnmount = unmount
+      promise.then(() => {
+        client.isRestoring.value = false
+      })
     }
 
     if (process.env.NODE_ENV !== 'production' && options.contextSharing) {
@@ -75,7 +80,7 @@ export const VueQueryPlugin = {
 
     const cleanup = () => {
       client.unmount()
-      persisterUnmount();
+      persisterUnmount()
     }
 
     if (app.onUnmount) {

From 8d280a08c75c3d22a8eb98b3e2d7644eb91197bc Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Mon, 7 Nov 2022 00:31:41 +0100
Subject: [PATCH 06/15] fix: useIsFetching allow refs as args

---
 .../src/__tests__/useIsFetching.test.ts       | 12 ++++++-
 packages/vue-query/src/useIsFetching.ts       | 31 ++++++++++---------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/packages/vue-query/src/__tests__/useIsFetching.test.ts b/packages/vue-query/src/__tests__/useIsFetching.test.ts
index 8475c0ab92..4eadec8244 100644
--- a/packages/vue-query/src/__tests__/useIsFetching.test.ts
+++ b/packages/vue-query/src/__tests__/useIsFetching.test.ts
@@ -1,4 +1,4 @@
-import { onScopeDispose, reactive } from 'vue-demi'
+import { onScopeDispose, reactive, ref } from 'vue-demi'
 
 import { flushPromises, simpleFetcher } from './test-utils'
 import { useQuery } from '../useQuery'
@@ -87,5 +87,15 @@ describe('useIsFetching', () => {
 
       expect(result).toEqual(expected)
     })
+
+    test('should unwrap refs arguments', () => {
+      const key = ref(['key']);
+      const filters = ref({ stale: ref(true) })
+
+      const result = parseFilterArgs(key, filters)
+      const expected = { queryKey: ['key'], stale: true }
+
+      expect(result).toEqual(expected)
+    })
   })
 })
diff --git a/packages/vue-query/src/useIsFetching.ts b/packages/vue-query/src/useIsFetching.ts
index f854eb608e..390b19c441 100644
--- a/packages/vue-query/src/useIsFetching.ts
+++ b/packages/vue-query/src/useIsFetching.ts
@@ -1,23 +1,23 @@
-import { onScopeDispose, ref, watch } from 'vue-demi'
+import { computed, isRef, onScopeDispose, ref, watch } from 'vue-demi'
 import type { Ref } from 'vue-demi'
 import type { QueryKey, QueryFilters as QF } from '@tanstack/query-core'
 
 import { useQueryClient } from './useQueryClient'
 import { cloneDeepUnref, isQueryKey } from './utils'
-import type { MaybeRefDeep, WithQueryClientKey } from './types'
+import type { MaybeRef, MaybeRefDeep, WithQueryClientKey } from './types'
 
 export type QueryFilters = MaybeRefDeep<WithQueryClientKey<QF>>
 
 export function useIsFetching(filters?: QueryFilters): Ref<number>
 export function useIsFetching(
-  queryKey?: QueryKey,
-  filters?: QueryFilters,
+  queryKey?: MaybeRef<QueryKey>,
+  filters?:  Omit<QueryFilters, 'queryKey'>,
 ): Ref<number>
 export function useIsFetching(
-  arg1?: QueryKey | QueryFilters,
-  arg2?: QueryFilters,
+  arg1?: MaybeRef<QueryKey> | QueryFilters,
+  arg2?: Omit<QueryFilters, 'queryKey'>,
 ): Ref<number> {
-  const filters = ref(parseFilterArgs(arg1, arg2))
+  const filters = computed(() => parseFilterArgs(arg1, arg2))
   const queryClient =
     filters.value.queryClient ?? useQueryClient(filters.value.queryClientKey)
 
@@ -28,9 +28,8 @@ export function useIsFetching(
   })
 
   watch(
-    [() => arg1, () => arg2],
+    filters,
     () => {
-      filters.value = parseFilterArgs(arg1, arg2)
       isFetching.value = queryClient.isFetching(filters)
     },
     { deep: true },
@@ -44,16 +43,18 @@ export function useIsFetching(
 }
 
 export function parseFilterArgs(
-  arg1?: QueryKey | QueryFilters,
+  arg1?: MaybeRef<QueryKey> | QueryFilters,
   arg2: QueryFilters = {},
 ) {
-  let options: QueryFilters
+  const plainArg1 = isRef(arg1) ? arg1.value : arg1
+  const plainArg2 = isRef(arg2) ? arg2.value : arg2
 
-  if (isQueryKey(arg1)) {
-    options = { ...arg2, queryKey: arg1 }
+  let options = plainArg1
+
+  if (isQueryKey(plainArg1)) {
+    options = { ...plainArg2, queryKey: plainArg1 }
   } else {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    options = arg1 || {}
+    options = plainArg1 || {}
   }
 
   return cloneDeepUnref(options) as WithQueryClientKey<QF>

From e679120f1a8ca93f4ca0ec97e92ea9e59ffa50e4 Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Mon, 7 Nov 2022 00:38:39 +0100
Subject: [PATCH 07/15] fix: allow ref args for useIsMutating

---
 .../src/__tests__/useIsMutating.test.ts       | 18 ++++++++---
 packages/vue-query/src/useIsMutating.ts       | 31 ++++++++++---------
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/packages/vue-query/src/__tests__/useIsMutating.test.ts b/packages/vue-query/src/__tests__/useIsMutating.test.ts
index 37091bb198..d2d4b05b71 100644
--- a/packages/vue-query/src/__tests__/useIsMutating.test.ts
+++ b/packages/vue-query/src/__tests__/useIsMutating.test.ts
@@ -1,8 +1,8 @@
-import { onScopeDispose, reactive } from 'vue-demi'
+import { onScopeDispose, reactive, ref } from 'vue-demi'
 
 import { flushPromises, successMutator } from './test-utils'
 import { useMutation } from '../useMutation'
-import { parseMutationFilterArgs, useIsMutating } from '../useIsMutating'
+import { parseFilterArgs, useIsMutating } from '../useIsMutating'
 import { useQueryClient } from '../useQueryClient'
 
 jest.mock('../useQueryClient')
@@ -80,7 +80,7 @@ describe('useIsMutating', () => {
 
   describe('parseMutationFilterArgs', () => {
     test('should default to empty filters', () => {
-      const result = parseMutationFilterArgs(undefined)
+      const result = parseFilterArgs(undefined)
 
       expect(result).toEqual({})
     })
@@ -88,10 +88,20 @@ describe('useIsMutating', () => {
     test('should merge mutation key with filters', () => {
       const filters = { fetching: true }
 
-      const result = parseMutationFilterArgs(['key'], filters)
+      const result = parseFilterArgs(['key'], filters)
       const expected = { ...filters, mutationKey: ['key'] }
 
       expect(result).toEqual(expected)
     })
+
+    test('should unwrap refs arguments', () => {
+      const key = ref(['key']);
+      const filters = ref({ fetching: ref(true) })
+
+      const result = parseFilterArgs(key, filters)
+      const expected = { queryKey: ['key'], fetching: true }
+
+      expect(result).toEqual(expected)
+    })
   })
 })
diff --git a/packages/vue-query/src/useIsMutating.ts b/packages/vue-query/src/useIsMutating.ts
index 6bcf32b6ad..ed49957172 100644
--- a/packages/vue-query/src/useIsMutating.ts
+++ b/packages/vue-query/src/useIsMutating.ts
@@ -1,23 +1,23 @@
-import { onScopeDispose, ref, watch } from 'vue-demi'
+import { computed, isRef, onScopeDispose, ref, watch } from 'vue-demi'
 import type { Ref } from 'vue-demi'
 import type { MutationKey, MutationFilters as MF } from '@tanstack/query-core'
 
 import { useQueryClient } from './useQueryClient'
 import { cloneDeepUnref, isQueryKey } from './utils'
-import type { MaybeRefDeep, WithQueryClientKey } from './types'
+import type { MaybeRef, MaybeRefDeep, WithQueryClientKey } from './types'
 
 export type MutationFilters = MaybeRefDeep<WithQueryClientKey<MF>>
 
 export function useIsMutating(filters?: MutationFilters): Ref<number>
 export function useIsMutating(
-  mutationKey?: MutationKey,
+  mutationKey?: MaybeRef<MutationKey>,
   filters?: Omit<MutationFilters, 'mutationKey'>,
 ): Ref<number>
 export function useIsMutating(
-  arg1?: MutationKey | MutationFilters,
+  arg1?: MaybeRef<MutationKey> | MutationFilters,
   arg2?: Omit<MutationFilters, 'mutationKey'>,
 ): Ref<number> {
-  const filters = ref(parseMutationFilterArgs(arg1, arg2))
+  const filters = computed(() => parseFilterArgs(arg1, arg2))
   const queryClient =
     filters.value.queryClient ?? useQueryClient(filters.value.queryClientKey)
 
@@ -28,9 +28,8 @@ export function useIsMutating(
   })
 
   watch(
-    [() => arg1, () => arg2],
+    filters,
     () => {
-      filters.value = parseMutationFilterArgs(arg1, arg2)
       isMutating.value = queryClient.isMutating(filters)
     },
     { deep: true },
@@ -43,18 +42,20 @@ export function useIsMutating(
   return isMutating
 }
 
-export function parseMutationFilterArgs(
-  arg1?: MutationKey | MutationFilters,
+export function parseFilterArgs(
+  arg1?: MaybeRef<MutationKey> | MutationFilters,
   arg2: MutationFilters = {},
 ) {
-  let options: MutationFilters
+  const plainArg1 = isRef(arg1) ? arg1.value : arg1
+  const plainArg2 = isRef(arg2) ? arg2.value : arg2
 
-  if (isQueryKey(arg1)) {
-    options = { ...arg2, mutationKey: arg1 }
+  let options = plainArg1
+
+  if (isQueryKey(plainArg1)) {
+    options = { ...plainArg2, mutationKey: plainArg1 }
   } else {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    options = arg1 || {}
+    options = plainArg1 || {}
   }
 
   return cloneDeepUnref(options) as WithQueryClientKey<MF>
-}
+}
\ No newline at end of file

From ed7e008430ca40f5a530f5508700fc8de6161f03 Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Mon, 7 Nov 2022 00:49:34 +0100
Subject: [PATCH 08/15] test: add test for isRestoring

---
 .../src/__tests__/useIsMutating.test.ts       |  2 +-
 .../src/__tests__/vueQueryPlugin.test.ts      | 30 ++++++++++++++++++-
 packages/vue-query/src/useBaseQuery.ts        |  1 -
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/vue-query/src/__tests__/useIsMutating.test.ts b/packages/vue-query/src/__tests__/useIsMutating.test.ts
index d2d4b05b71..111642f78a 100644
--- a/packages/vue-query/src/__tests__/useIsMutating.test.ts
+++ b/packages/vue-query/src/__tests__/useIsMutating.test.ts
@@ -99,7 +99,7 @@ describe('useIsMutating', () => {
       const filters = ref({ fetching: ref(true) })
 
       const result = parseFilterArgs(key, filters)
-      const expected = { queryKey: ['key'], fetching: true }
+      const expected = { mutationKey: ['key'], fetching: true }
 
       expect(result).toEqual(expected)
     })
diff --git a/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts b/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts
index c316e89546..d8cc069f6c 100644
--- a/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts
+++ b/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts
@@ -1,10 +1,11 @@
 import type { App, ComponentOptions } from 'vue'
-import { isVue2, isVue3 } from 'vue-demi'
+import { isVue2, isVue3, ref } from 'vue-demi'
 
 import type { QueryClient } from '../queryClient'
 import { VueQueryPlugin } from '../vueQueryPlugin'
 import { VUE_QUERY_CLIENT } from '../utils'
 import { setupDevtools } from '../devtools/devtools'
+import { flushPromises } from './test-utils'
 
 jest.mock('../devtools/devtools')
 
@@ -258,4 +259,31 @@ describe('VueQueryPlugin', () => {
       expect(customClient.mount).toHaveBeenCalledTimes(1)
     })
   })
+
+  describe('when persister is provided', () => {
+    test('should properly modify isRestoring flag on queryClient', async () => {
+      const appMock = getAppMock()
+      const customClient = {
+        mount: jest.fn(),
+        isRestoring: ref(false),
+      } as unknown as QueryClient
+
+      VueQueryPlugin.install(appMock, {
+        queryClient: customClient,
+        clientPersister: () => [
+          jest.fn(),
+          new Promise((resolve) => {
+            resolve()
+          }),
+        ],
+      })
+
+      expect(customClient.isRestoring.value).toBeTruthy()
+
+      await flushPromises();
+
+      expect(customClient.isRestoring.value).toBeFalsy()
+
+    })
+  })
 })
diff --git a/packages/vue-query/src/useBaseQuery.ts b/packages/vue-query/src/useBaseQuery.ts
index bdba9bb5f5..5183133a78 100644
--- a/packages/vue-query/src/useBaseQuery.ts
+++ b/packages/vue-query/src/useBaseQuery.ts
@@ -65,7 +65,6 @@ export function useBaseQuery<
     ? 'isRestoring'
     : 'optimistic'
     
-    console.log('defaulted options recalculate', options.value, queryClient.isRestoring.value, defaulted)
     return defaulted
   })
 

From 2e9ea937356544de1be3301eefc8512a86be9db6 Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Mon, 7 Nov 2022 01:15:36 +0100
Subject: [PATCH 09/15] chore: fix formatting

---
 packages/vue-query/src/__tests__/useIsFetching.test.ts |  2 +-
 packages/vue-query/src/__tests__/useIsMutating.test.ts |  2 +-
 .../vue-query/src/__tests__/vueQueryPlugin.test.ts     |  3 +--
 packages/vue-query/src/useBaseQuery.ts                 | 10 ++++------
 packages/vue-query/src/useIsFetching.ts                |  2 +-
 packages/vue-query/src/useIsMutating.ts                |  2 +-
 6 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/vue-query/src/__tests__/useIsFetching.test.ts b/packages/vue-query/src/__tests__/useIsFetching.test.ts
index 4eadec8244..d90be4cf62 100644
--- a/packages/vue-query/src/__tests__/useIsFetching.test.ts
+++ b/packages/vue-query/src/__tests__/useIsFetching.test.ts
@@ -89,7 +89,7 @@ describe('useIsFetching', () => {
     })
 
     test('should unwrap refs arguments', () => {
-      const key = ref(['key']);
+      const key = ref(['key'])
       const filters = ref({ stale: ref(true) })
 
       const result = parseFilterArgs(key, filters)
diff --git a/packages/vue-query/src/__tests__/useIsMutating.test.ts b/packages/vue-query/src/__tests__/useIsMutating.test.ts
index 111642f78a..afc96654e2 100644
--- a/packages/vue-query/src/__tests__/useIsMutating.test.ts
+++ b/packages/vue-query/src/__tests__/useIsMutating.test.ts
@@ -95,7 +95,7 @@ describe('useIsMutating', () => {
     })
 
     test('should unwrap refs arguments', () => {
-      const key = ref(['key']);
+      const key = ref(['key'])
       const filters = ref({ fetching: ref(true) })
 
       const result = parseFilterArgs(key, filters)
diff --git a/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts b/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts
index d8cc069f6c..7128c4e3ad 100644
--- a/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts
+++ b/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts
@@ -280,10 +280,9 @@ describe('VueQueryPlugin', () => {
 
       expect(customClient.isRestoring.value).toBeTruthy()
 
-      await flushPromises();
+      await flushPromises()
 
       expect(customClient.isRestoring.value).toBeFalsy()
-
     })
   })
 })
diff --git a/packages/vue-query/src/useBaseQuery.ts b/packages/vue-query/src/useBaseQuery.ts
index 5183133a78..8c8ecda658 100644
--- a/packages/vue-query/src/useBaseQuery.ts
+++ b/packages/vue-query/src/useBaseQuery.ts
@@ -62,9 +62,9 @@ export function useBaseQuery<
   const defaultedOptions = computed(() => {
     const defaulted = queryClient.defaultQueryOptions(options.value)
     defaulted._optimisticResults = queryClient.isRestoring.value
-    ? 'isRestoring'
-    : 'optimistic'
-    
+      ? 'isRestoring'
+      : 'optimistic'
+
     return defaulted
   })
 
@@ -78,10 +78,8 @@ export function useBaseQuery<
   watch(
     queryClient.isRestoring,
     (isRestoring) => {
-      // isRestoring.value = val
-
       if (!isRestoring) {
-        unsubscribe.value();
+        unsubscribe.value()
         unsubscribe.value = observer.subscribe((result) => {
           updateState(state, result)
         })
diff --git a/packages/vue-query/src/useIsFetching.ts b/packages/vue-query/src/useIsFetching.ts
index 390b19c441..857a27f86f 100644
--- a/packages/vue-query/src/useIsFetching.ts
+++ b/packages/vue-query/src/useIsFetching.ts
@@ -11,7 +11,7 @@ export type QueryFilters = MaybeRefDeep<WithQueryClientKey<QF>>
 export function useIsFetching(filters?: QueryFilters): Ref<number>
 export function useIsFetching(
   queryKey?: MaybeRef<QueryKey>,
-  filters?:  Omit<QueryFilters, 'queryKey'>,
+  filters?: Omit<QueryFilters, 'queryKey'>,
 ): Ref<number>
 export function useIsFetching(
   arg1?: MaybeRef<QueryKey> | QueryFilters,
diff --git a/packages/vue-query/src/useIsMutating.ts b/packages/vue-query/src/useIsMutating.ts
index ed49957172..0d0e497dee 100644
--- a/packages/vue-query/src/useIsMutating.ts
+++ b/packages/vue-query/src/useIsMutating.ts
@@ -58,4 +58,4 @@ export function parseFilterArgs(
   }
 
   return cloneDeepUnref(options) as WithQueryClientKey<MF>
-}
\ No newline at end of file
+}

From 19e4e463314ad06abfea964ea9c2b28b8d9cd198 Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Sun, 13 Nov 2022 20:52:21 +0100
Subject: [PATCH 10/15] fix(vue-query): suspense unsubscribe from watch

---
 packages/vue-query/src/useBaseQuery.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/vue-query/src/useBaseQuery.ts b/packages/vue-query/src/useBaseQuery.ts
index 8c8ecda658..74e0f5c54b 100644
--- a/packages/vue-query/src/useBaseQuery.ts
+++ b/packages/vue-query/src/useBaseQuery.ts
@@ -103,14 +103,19 @@ export function useBaseQuery<
 
   const suspense = () => {
     return new Promise<QueryObserverResult<TData, TError>>((resolve) => {
+      let stopWatch = () => {
+        //noop
+      }
       const run = () => {
         if (defaultedOptions.value.enabled !== false) {
           const optimisticResult = observer.getOptimisticResult(
             defaultedOptions.value,
           )
           if (optimisticResult.isStale) {
+            stopWatch()
             resolve(observer.fetchOptimistic(defaultedOptions.value))
           } else {
+            stopWatch()
             resolve(optimisticResult)
           }
         }
@@ -118,7 +123,7 @@ export function useBaseQuery<
 
       run()
 
-      watch(defaultedOptions, run, { deep: true })
+      stopWatch = watch(defaultedOptions, run, { deep: true })
     })
   }
 

From 3dfd9ef09818feef8b360edf667b97fcc33f2c75 Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Sun, 13 Nov 2022 23:54:44 +0100
Subject: [PATCH 11/15] feat: persistent useQueries

---
 packages/vue-query/src/useQueries.ts | 72 ++++++++++++++++++++--------
 1 file changed, 53 insertions(+), 19 deletions(-)

diff --git a/packages/vue-query/src/useQueries.ts b/packages/vue-query/src/useQueries.ts
index 7311f61ac1..0f5e5c4696 100644
--- a/packages/vue-query/src/useQueries.ts
+++ b/packages/vue-query/src/useQueries.ts
@@ -1,13 +1,21 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { QueriesObserver } from '@tanstack/query-core'
-import { onScopeDispose, reactive, readonly, watch } from 'vue-demi'
+import {
+  computed,
+  onScopeDispose,
+  reactive,
+  readonly,
+  ref,
+  watch,
+} from 'vue-demi'
 import type { Ref } from 'vue-demi'
 
 import type { QueryFunction, QueryObserverResult } from '@tanstack/query-core'
 
 import { useQueryClient } from './useQueryClient'
-import type { UseQueryOptions } from './useQuery'
 import { cloneDeepUnref } from './utils'
+import type { UseQueryOptions } from './useQuery'
+import type { QueryClient } from './queryClient'
 
 // Avoid TS depth-limit error in case of large array literal
 type MAXIMUM_DEPTH = 20
@@ -130,37 +138,63 @@ export function useQueries<T extends any[]>({
 }: {
   queries: Ref<UseQueriesOptionsArg<T>> | UseQueriesOptionsArg<T>
 }): Readonly<UseQueriesResults<T>> {
-  const unreffedQueries = cloneDeepUnref(queries) as UseQueriesOptionsArg<T>
+  const options = computed(
+    () => cloneDeepUnref(queries) as UseQueriesOptionsArg<T>,
+  )
 
-  const queryClientKey = unreffedQueries[0]?.queryClientKey
-  const optionsQueryClient = unreffedQueries[0]?.queryClient
+  const queryClientKey = options.value[0]?.queryClientKey
+  const optionsQueryClient = options.value[0]?.queryClient as
+    | QueryClient
+    | undefined
   const queryClient = optionsQueryClient ?? useQueryClient(queryClientKey)
-  const defaultedQueries = unreffedQueries.map((options) => {
-    return queryClient.defaultQueryOptions(options)
-  })
+  const defaultedQueries = computed(() =>
+    options.value.map((options) => {
+      const defaulted = queryClient.defaultQueryOptions(options)
+      defaulted._optimisticResults = queryClient.isRestoring.value
+        ? 'isRestoring'
+        : 'optimistic'
+
+      return defaulted
+    }),
+  )
 
-  const observer = new QueriesObserver(queryClient, defaultedQueries)
+  const observer = new QueriesObserver(queryClient, defaultedQueries.value)
   const state = reactive(observer.getCurrentResult())
 
-  const unsubscribe = observer.subscribe((result) => {
-    state.splice(0, state.length, ...result)
+  const unsubscribe = ref(() => {
+    // noop
   })
 
   watch(
-    () => queries,
+    queryClient.isRestoring,
+    (isRestoring) => {
+      if (!isRestoring) {
+        unsubscribe.value()
+        unsubscribe.value = observer.subscribe((result) => {
+          state.splice(0, result.length, ...result)
+        })
+        // Subscription would not fire for persisted results
+        state.splice(
+          0,
+          state.length,
+          ...observer.getOptimisticResult(defaultedQueries.value),
+        )
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(
+    options,
     () => {
-      const defaulted = (
-        cloneDeepUnref(queries) as UseQueriesOptionsArg<T>
-      ).map((options) => {
-        return queryClient.defaultQueryOptions(options)
-      })
-      observer.setQueries(defaulted)
+      observer.setQueries(defaultedQueries.value)
+      state.splice(0, state.length, ...observer.getCurrentResult())
     },
     { deep: true },
   )
 
   onScopeDispose(() => {
-    unsubscribe()
+    unsubscribe.value()
   })
 
   return readonly(state) as UseQueriesResults<T>

From 771de02341f6c6317cfece87c0bf59e07d80882f Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Mon, 14 Nov 2022 00:02:05 +0100
Subject: [PATCH 12/15] chore: examples formatting

---
 examples/vue/basic/src/App.vue            | 24 ++++++++++-----------
 examples/vue/basic/src/Post.vue           | 24 ++++++++++-----------
 examples/vue/basic/src/Posts.vue          | 26 +++++++++++------------
 examples/vue/basic/src/main.ts            |  8 +++----
 examples/vue/basic/src/shims-vue.d.ts     |  8 +++----
 examples/vue/basic/src/types.d.ts         |  8 +++----
 examples/vue/persister/src/App.vue        | 24 ++++++++++-----------
 examples/vue/persister/src/Post.vue       | 24 ++++++++++-----------
 examples/vue/persister/src/Posts.vue      | 26 +++++++++++------------
 examples/vue/persister/src/main.ts        |  7 +++++-
 examples/vue/persister/src/shims-vue.d.ts |  8 +++----
 examples/vue/persister/src/types.d.ts     |  8 +++----
 package.json                              |  2 +-
 13 files changed, 101 insertions(+), 96 deletions(-)

diff --git a/examples/vue/basic/src/App.vue b/examples/vue/basic/src/App.vue
index 52028d9dcd..c8275e1840 100644
--- a/examples/vue/basic/src/App.vue
+++ b/examples/vue/basic/src/App.vue
@@ -1,29 +1,29 @@
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { defineComponent, ref } from 'vue'
 
-import Posts from "./Posts.vue";
-import Post from "./Post.vue";
+import Posts from './Posts.vue'
+import Post from './Post.vue'
 
 export default defineComponent({
-  name: "App",
+  name: 'App',
   components: { Posts, Post },
   setup() {
-    const visitedPosts = ref(new Set());
-    const isVisited = (id: number) => visitedPosts.value.has(id);
+    const visitedPosts = ref(new Set())
+    const isVisited = (id: number) => visitedPosts.value.has(id)
 
-    const postId = ref(-1);
+    const postId = ref(-1)
     const setPostId = (id: number) => {
-      visitedPosts.value.add(id);
-      postId.value = id;
-    };
+      visitedPosts.value.add(id)
+      postId.value = id
+    }
 
     return {
       isVisited,
       postId,
       setPostId,
-    };
+    }
   },
-});
+})
 </script>
 
 <template>
diff --git a/examples/vue/basic/src/Post.vue b/examples/vue/basic/src/Post.vue
index bb9f36e089..c0bef062d7 100644
--- a/examples/vue/basic/src/Post.vue
+++ b/examples/vue/basic/src/Post.vue
@@ -1,32 +1,32 @@
 <script lang="ts">
-import { defineComponent } from "vue";
-import { useQuery } from "@tanstack/vue-query";
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
 
-import { Post } from "./types";
+import { Post } from './types'
 
 const fetcher = async (id: number): Promise<Post> =>
   await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
-    (response) => response.json()
-  );
+    (response) => response.json(),
+  )
 
 export default defineComponent({
-  name: "PostDetails",
+  name: 'PostDetails',
   props: {
     postId: {
       type: Number,
       required: true,
     },
   },
-  emits: ["setPostId"],
+  emits: ['setPostId'],
   setup(props) {
     const { isLoading, isError, isFetching, data, error } = useQuery(
-      ["post", props.postId],
-      () => fetcher(props.postId)
-    );
+      ['post', props.postId],
+      () => fetcher(props.postId),
+    )
 
-    return { isLoading, isError, isFetching, data, error };
+    return { isLoading, isError, isFetching, data, error }
   },
-});
+})
 </script>
 
 <template>
diff --git a/examples/vue/basic/src/Posts.vue b/examples/vue/basic/src/Posts.vue
index 30816ac3c9..64432603d8 100644
--- a/examples/vue/basic/src/Posts.vue
+++ b/examples/vue/basic/src/Posts.vue
@@ -1,32 +1,32 @@
 <script lang="ts">
-import { defineComponent } from "vue";
-import { useQuery } from "@tanstack/vue-query";
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
 
-import type { Post } from "./types";
+import type { Post } from './types'
 
 const fetcher = async (): Promise<Post[]> =>
-  await fetch("https://jsonplaceholder.typicode.com/posts").then((response) =>
-    response.json()
-  );
+  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
+    response.json(),
+  )
 
 export default defineComponent({
-  name: "PostsList",
+  name: 'PostsList',
   props: {
     isVisited: {
       type: Function,
       required: true,
     },
   },
-  emits: ["setPostId"],
+  emits: ['setPostId'],
   setup() {
     const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
-      ["posts"],
-      fetcher
-    );
+      ['posts'],
+      fetcher,
+    )
 
-    return { isLoading, isError, isFetching, data, error, refetch };
+    return { isLoading, isError, isFetching, data, error, refetch }
   },
-});
+})
 </script>
 
 <template>
diff --git a/examples/vue/basic/src/main.ts b/examples/vue/basic/src/main.ts
index 7c6ec1d6b8..e8ac89a8ab 100644
--- a/examples/vue/basic/src/main.ts
+++ b/examples/vue/basic/src/main.ts
@@ -1,6 +1,6 @@
-import { createApp } from "vue";
-import { VueQueryPlugin } from "@tanstack/vue-query";
+import { createApp } from 'vue'
+import { VueQueryPlugin } from '@tanstack/vue-query'
 
-import App from "./App.vue";
+import App from './App.vue'
 
-createApp(App).use(VueQueryPlugin).mount("#app");
+createApp(App).use(VueQueryPlugin).mount('#app')
diff --git a/examples/vue/basic/src/shims-vue.d.ts b/examples/vue/basic/src/shims-vue.d.ts
index daba9b9ec0..ac1ded7923 100644
--- a/examples/vue/basic/src/shims-vue.d.ts
+++ b/examples/vue/basic/src/shims-vue.d.ts
@@ -1,5 +1,5 @@
-declare module "*.vue" {
-  import { DefineComponent } from "vue";
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }
diff --git a/examples/vue/basic/src/types.d.ts b/examples/vue/basic/src/types.d.ts
index 0ff5fbb96d..4851e81022 100644
--- a/examples/vue/basic/src/types.d.ts
+++ b/examples/vue/basic/src/types.d.ts
@@ -1,6 +1,6 @@
 export interface Post {
-  userId: number;
-  id: number;
-  title: string;
-  body: string;
+  userId: number
+  id: number
+  title: string
+  body: string
 }
diff --git a/examples/vue/persister/src/App.vue b/examples/vue/persister/src/App.vue
index 52028d9dcd..c8275e1840 100644
--- a/examples/vue/persister/src/App.vue
+++ b/examples/vue/persister/src/App.vue
@@ -1,29 +1,29 @@
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { defineComponent, ref } from 'vue'
 
-import Posts from "./Posts.vue";
-import Post from "./Post.vue";
+import Posts from './Posts.vue'
+import Post from './Post.vue'
 
 export default defineComponent({
-  name: "App",
+  name: 'App',
   components: { Posts, Post },
   setup() {
-    const visitedPosts = ref(new Set());
-    const isVisited = (id: number) => visitedPosts.value.has(id);
+    const visitedPosts = ref(new Set())
+    const isVisited = (id: number) => visitedPosts.value.has(id)
 
-    const postId = ref(-1);
+    const postId = ref(-1)
     const setPostId = (id: number) => {
-      visitedPosts.value.add(id);
-      postId.value = id;
-    };
+      visitedPosts.value.add(id)
+      postId.value = id
+    }
 
     return {
       isVisited,
       postId,
       setPostId,
-    };
+    }
   },
-});
+})
 </script>
 
 <template>
diff --git a/examples/vue/persister/src/Post.vue b/examples/vue/persister/src/Post.vue
index bb9f36e089..c0bef062d7 100644
--- a/examples/vue/persister/src/Post.vue
+++ b/examples/vue/persister/src/Post.vue
@@ -1,32 +1,32 @@
 <script lang="ts">
-import { defineComponent } from "vue";
-import { useQuery } from "@tanstack/vue-query";
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
 
-import { Post } from "./types";
+import { Post } from './types'
 
 const fetcher = async (id: number): Promise<Post> =>
   await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(
-    (response) => response.json()
-  );
+    (response) => response.json(),
+  )
 
 export default defineComponent({
-  name: "PostDetails",
+  name: 'PostDetails',
   props: {
     postId: {
       type: Number,
       required: true,
     },
   },
-  emits: ["setPostId"],
+  emits: ['setPostId'],
   setup(props) {
     const { isLoading, isError, isFetching, data, error } = useQuery(
-      ["post", props.postId],
-      () => fetcher(props.postId)
-    );
+      ['post', props.postId],
+      () => fetcher(props.postId),
+    )
 
-    return { isLoading, isError, isFetching, data, error };
+    return { isLoading, isError, isFetching, data, error }
   },
-});
+})
 </script>
 
 <template>
diff --git a/examples/vue/persister/src/Posts.vue b/examples/vue/persister/src/Posts.vue
index 12ee8ef15e..fb21a55ed0 100644
--- a/examples/vue/persister/src/Posts.vue
+++ b/examples/vue/persister/src/Posts.vue
@@ -1,32 +1,32 @@
 <script lang="ts">
-import { defineComponent } from "vue";
-import { useQuery } from "@tanstack/vue-query";
+import { defineComponent } from 'vue'
+import { useQuery } from '@tanstack/vue-query'
 
-import { Post } from "./types";
+import { Post } from './types'
 
 const fetcher = async (): Promise<Post[]> =>
-  await fetch("https://jsonplaceholder.typicode.com/posts").then((response) =>
-    response.json()
-  );
+  await fetch('https://jsonplaceholder.typicode.com/posts').then((response) =>
+    response.json(),
+  )
 
 export default defineComponent({
-  name: "PostsList",
+  name: 'PostsList',
   props: {
     isVisited: {
       type: Function,
       required: true,
     },
   },
-  emits: ["setPostId"],
+  emits: ['setPostId'],
   setup() {
     const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
-      ["posts"],
-      fetcher
-    );
+      ['posts'],
+      fetcher,
+    )
 
-    return { isLoading, isError, isFetching, data, error, refetch };
+    return { isLoading, isError, isFetching, data, error, refetch }
   },
-});
+})
 </script>
 
 <template>
diff --git a/examples/vue/persister/src/main.ts b/examples/vue/persister/src/main.ts
index 5454f71a1e..61a93de4a0 100644
--- a/examples/vue/persister/src/main.ts
+++ b/examples/vue/persister/src/main.ts
@@ -7,7 +7,12 @@ import App from './App.vue'
 
 const vueQueryOptions: VueQueryPluginOptions = {
   queryClientConfig: {
-    defaultOptions: { queries: { cacheTime: 1000 * 60 * 60 * 24, staleTime: 1000 * 60 * 60 * 24 } },
+    defaultOptions: {
+      queries: {
+        cacheTime: 1000 * 60 * 60 * 24,
+        staleTime: 1000 * 60 * 60 * 24,
+      },
+    },
   },
   clientPersister: (queryClient) => {
     return persistQueryClient({
diff --git a/examples/vue/persister/src/shims-vue.d.ts b/examples/vue/persister/src/shims-vue.d.ts
index daba9b9ec0..ac1ded7923 100644
--- a/examples/vue/persister/src/shims-vue.d.ts
+++ b/examples/vue/persister/src/shims-vue.d.ts
@@ -1,5 +1,5 @@
-declare module "*.vue" {
-  import { DefineComponent } from "vue";
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }
diff --git a/examples/vue/persister/src/types.d.ts b/examples/vue/persister/src/types.d.ts
index 0ff5fbb96d..4851e81022 100644
--- a/examples/vue/persister/src/types.d.ts
+++ b/examples/vue/persister/src/types.d.ts
@@ -1,6 +1,6 @@
 export interface Post {
-  userId: number;
-  id: number;
-  title: string;
-  body: string;
+  userId: number
+  id: number
+  title: string
+  body: string
 }
diff --git a/package.json b/package.json
index f73f5cb3c1..49627b8f0f 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "typecheck": "tsc -b",
     "watch": "concurrently --kill-others \"rollup --config rollup.config.js -w\" \"pnpm run typecheck --watch\"",
     "dev": "pnpm run watch",
-    "prettier": "prettier \"packages/*/{src/**,examples/**/src/**}.{md,js,jsx,ts,tsx,json}\"",
+    "prettier": "prettier \"packages/*/{src/**,examples/**/src/**}.{md,js,jsx,ts,tsx,json,vue}\"",
     "prettier:write": "pnpm run prettier --write",
     "cipublish": "ts-node scripts/publish.ts"
   },

From ebc79bde1028da618292e8c4cbf201a2c4f3a8ed Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Mon, 14 Nov 2022 01:11:26 +0100
Subject: [PATCH 13/15] test: persister

---
 .../vue-query/src/__mocks__/useBaseQuery.ts   |  4 +-
 .../src/__tests__/useMutation.test.ts         | 15 +++
 .../vue-query/src/__tests__/useQuery.test.ts  | 49 +++++++++-
 .../src/__tests__/vueQueryPlugin.test.ts      | 98 ++++++++++++++++++-
 pnpm-lock.yaml                                | 68 +++++++++++++
 5 files changed, 231 insertions(+), 3 deletions(-)

diff --git a/packages/vue-query/src/__mocks__/useBaseQuery.ts b/packages/vue-query/src/__mocks__/useBaseQuery.ts
index 4072f1b692..d8f718d93e 100644
--- a/packages/vue-query/src/__mocks__/useBaseQuery.ts
+++ b/packages/vue-query/src/__mocks__/useBaseQuery.ts
@@ -1,3 +1,5 @@
-const { useBaseQuery: originImpl } = jest.requireActual('../useBaseQuery')
+const { useBaseQuery: originImpl, parseQueryArgs: originalParse } =
+  jest.requireActual('../useBaseQuery')
 
 export const useBaseQuery = jest.fn(originImpl)
+export const parseQueryArgs = originalParse
diff --git a/packages/vue-query/src/__tests__/useMutation.test.ts b/packages/vue-query/src/__tests__/useMutation.test.ts
index 3c3b860664..67e4e85ab9 100644
--- a/packages/vue-query/src/__tests__/useMutation.test.ts
+++ b/packages/vue-query/src/__tests__/useMutation.test.ts
@@ -346,5 +346,20 @@ describe('useMutation', () => {
 
       expect(result).toEqual(expected)
     })
+
+    test('should unwrap refs arguments', () => {
+      const key = ref(['key'])
+      const mutationFn = ref(successMutator)
+      const options = ref({ retry: ref(12) })
+
+      const result = parseMutationArgs(key, mutationFn, options)
+      const expected = {
+        mutationKey: ['key'],
+        mutationFn: successMutator,
+        retry: 12,
+      }
+
+      expect(result).toEqual(expected)
+    })
   })
 })
diff --git a/packages/vue-query/src/__tests__/useQuery.test.ts b/packages/vue-query/src/__tests__/useQuery.test.ts
index b3d81c4fc6..7bb51a6600 100644
--- a/packages/vue-query/src/__tests__/useQuery.test.ts
+++ b/packages/vue-query/src/__tests__/useQuery.test.ts
@@ -14,7 +14,7 @@ import {
   getSimpleFetcherWithReturnData,
 } from './test-utils'
 import { useQuery } from '../useQuery'
-import { useBaseQuery } from '../useBaseQuery'
+import { parseQueryArgs, useBaseQuery } from '../useBaseQuery'
 
 jest.mock('../useQueryClient')
 jest.mock('../useBaseQuery')
@@ -233,6 +233,53 @@ describe('useQuery', () => {
     expect(status.value).toStrictEqual('loading')
   })
 
+  describe('parseQueryArgs', () => {
+    test('should unwrap refs arguments', () => {
+      const key = ref(['key'])
+      const fn = ref(simpleFetcher)
+      const options = ref({ enabled: ref(true) })
+
+      const result = parseQueryArgs(key, fn, options)
+      const expected = {
+        queryKey: ['key'],
+        queryFn: simpleFetcher,
+        enabled: true,
+      }
+
+      expect(result).toEqual(expected)
+    })
+
+    test('should unwrap refs with fn in options', () => {
+      const key = ref(['key'])
+      const fn = ref(simpleFetcher)
+      const options = ref({ queryFn: fn, enabled: ref(true) })
+
+      const result = parseQueryArgs(key, options)
+      const expected = {
+        queryKey: ['key'],
+        queryFn: simpleFetcher,
+        enabled: true,
+      }
+
+      expect(result).toEqual(expected)
+    })
+
+    test('should unwrap refs in options', () => {
+      const key = ref(['key'])
+      const fn = ref(simpleFetcher)
+      const options = ref({ queryKey: key, queryFn: fn, enabled: ref(true) })
+
+      const result = parseQueryArgs(options)
+      const expected = {
+        queryKey: ['key'],
+        queryFn: simpleFetcher,
+        enabled: true,
+      }
+
+      expect(result).toEqual(expected)
+    })
+  })
+
   describe('suspense', () => {
     test('should return a Promise', () => {
       const getCurrentInstanceSpy = getCurrentInstance as jest.Mock
diff --git a/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts b/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts
index 7128c4e3ad..e9154fcf35 100644
--- a/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts
+++ b/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts
@@ -1,13 +1,17 @@
 import type { App, ComponentOptions } from 'vue'
 import { isVue2, isVue3, ref } from 'vue-demi'
 
-import type { QueryClient } from '../queryClient'
+import { QueryClient } from '../queryClient'
 import { VueQueryPlugin } from '../vueQueryPlugin'
 import { VUE_QUERY_CLIENT } from '../utils'
 import { setupDevtools } from '../devtools/devtools'
 import { flushPromises } from './test-utils'
+import { useQuery } from '../useQuery'
+import { useQueries } from '../useQueries'
 
 jest.mock('../devtools/devtools')
+jest.mock('../useQueryClient')
+jest.mock('../useBaseQuery')
 
 interface TestApp extends App {
   onUnmount: Function
@@ -284,5 +288,97 @@ describe('VueQueryPlugin', () => {
 
       expect(customClient.isRestoring.value).toBeFalsy()
     })
+
+    test('should delay useQuery subscription and not call fetcher if data is not stale', async () => {
+      const appMock = getAppMock()
+      const customClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 1000 * 60 * 60,
+          },
+        },
+      })
+
+      VueQueryPlugin.install(appMock, {
+        queryClient: customClient,
+        clientPersister: (customClient) => [
+          jest.fn(),
+          new Promise((resolve) => {
+            setTimeout(() => {
+              customClient.setQueryData(['persist'], () => ({
+                foo: 'bar',
+              }))
+              resolve()
+            }, 0)
+          }),
+        ],
+      })
+
+      const fnSpy = jest.fn()
+
+      const query = useQuery(['persist'], fnSpy, {
+        queryClient: customClient,
+      })
+
+      expect(customClient.isRestoring.value).toBeTruthy()
+      expect(query.isFetching.value).toBeFalsy()
+      expect(query.data.value).toStrictEqual(undefined)
+      expect(fnSpy).toHaveBeenCalledTimes(0)
+
+      await flushPromises()
+
+      expect(customClient.isRestoring.value).toBeFalsy()
+      expect(query.data.value).toStrictEqual({ foo: 'bar' })
+      expect(fnSpy).toHaveBeenCalledTimes(0)
+    })
+
+    test('should delay useQueries subscription and not call fetcher if data is not stale', async () => {
+      const appMock = getAppMock()
+      const customClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 1000 * 60 * 60,
+          },
+        },
+      })
+
+      VueQueryPlugin.install(appMock, {
+        queryClient: customClient,
+        clientPersister: (customClient) => [
+          jest.fn(),
+          new Promise((resolve) => {
+            setTimeout(() => {
+              customClient.setQueryData(['persist'], () => ({
+                foo: 'bar',
+              }))
+              resolve()
+            }, 0)
+          }),
+        ],
+      })
+
+      const fnSpy = jest.fn()
+
+      const queries = useQueries({
+        queries: [
+          {
+            queryKey: ['persist'],
+            queryFn: fnSpy,
+            queryClient: customClient,
+          },
+        ],
+      })
+
+      expect(customClient.isRestoring.value).toBeTruthy()
+      expect(queries[0].isFetching).toBeFalsy()
+      expect(queries[0].data).toStrictEqual(undefined)
+      expect(fnSpy).toHaveBeenCalledTimes(0)
+
+      await flushPromises()
+
+      expect(customClient.isRestoring.value).toBeFalsy()
+      expect(queries[0].data).toStrictEqual({ foo: 'bar' })
+      expect(fnSpy).toHaveBeenCalledTimes(0)
+    })
   })
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 294efd9857..fa049fe18c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -657,6 +657,25 @@ importers:
       typescript: 4.8.4
       vite: 3.1.8
 
+  examples/vue/persister:
+    specifiers:
+      '@tanstack/query-persist-client-core': ^4.14.1
+      '@tanstack/query-sync-storage-persister': ^4.14.1
+      '@tanstack/vue-query': ^4.14.1
+      '@vitejs/plugin-vue': 3.2.0
+      typescript: 4.8.4
+      vite: 3.2.2
+      vue: 3.2.41
+    dependencies:
+      '@tanstack/query-persist-client-core': link:../../../packages/query-persist-client-core
+      '@tanstack/query-sync-storage-persister': link:../../../packages/query-sync-storage-persister
+      '@tanstack/vue-query': link:../../../packages/vue-query
+      vue: 3.2.41
+    devDependencies:
+      '@vitejs/plugin-vue': 3.2.0_vite@3.2.2+vue@3.2.41
+      typescript: 4.8.4
+      vite: 3.2.2
+
   packages/eslint-plugin-query:
     specifiers:
       '@typescript-eslint/eslint-plugin': ^5.41.0
@@ -6314,6 +6333,17 @@ packages:
       vue: 3.2.41
     dev: true
 
+  /@vitejs/plugin-vue/3.2.0_vite@3.2.2+vue@3.2.41:
+    resolution: {integrity: sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      vite: ^3.0.0
+      vue: ^3.2.25
+    dependencies:
+      vite: 3.2.2
+      vue: 3.2.41
+    dev: true
+
   /@vue/compiler-core/3.2.37:
     resolution: {integrity: sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==}
     dependencies:
@@ -14077,6 +14107,14 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /rollup/2.79.1:
+    resolution: {integrity: sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /rooks/6.4.3_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-nHrCdzlU8EAoDo1sNzLLzOSVgqK4ypbhOpLmbsEI7b4xDOagsiePueYwVJizGE4l5qhOYY5x+8YuSYZDp+OMjw==}
     engines: {node: '>=v10.24.1'}
@@ -15597,6 +15635,36 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /vite/3.2.2:
+    resolution: {integrity: sha512-pLrhatFFOWO9kS19bQ658CnRYzv0WLbsPih6R+iFeEEhDOuYgYCX2rztUViMz/uy/V8cLCJvLFeiOK7RJEzHcw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    hasBin: true
+    peerDependencies:
+      less: '*'
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.15.9
+      postcss: 8.4.18
+      resolve: 1.22.1
+      rollup: 2.79.1
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /vlq/1.0.1:
     resolution: {integrity: sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==}
     dev: false

From 8b1d52447fc2850eaf401a047334e7f9e5ee8587 Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Mon, 14 Nov 2022 01:23:05 +0100
Subject: [PATCH 14/15] chore: fix lint errors

---
 .../vue-query/src/__tests__/vueQueryPlugin.test.ts     |  8 ++++----
 packages/vue-query/src/useQueries.ts                   | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts b/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts
index e9154fcf35..0902778af4 100644
--- a/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts
+++ b/packages/vue-query/src/__tests__/vueQueryPlugin.test.ts
@@ -301,11 +301,11 @@ describe('VueQueryPlugin', () => {
 
       VueQueryPlugin.install(appMock, {
         queryClient: customClient,
-        clientPersister: (customClient) => [
+        clientPersister: (client) => [
           jest.fn(),
           new Promise((resolve) => {
             setTimeout(() => {
-              customClient.setQueryData(['persist'], () => ({
+              client.setQueryData(['persist'], () => ({
                 foo: 'bar',
               }))
               resolve()
@@ -344,11 +344,11 @@ describe('VueQueryPlugin', () => {
 
       VueQueryPlugin.install(appMock, {
         queryClient: customClient,
-        clientPersister: (customClient) => [
+        clientPersister: (client) => [
           jest.fn(),
           new Promise((resolve) => {
             setTimeout(() => {
-              customClient.setQueryData(['persist'], () => ({
+              client.setQueryData(['persist'], () => ({
                 foo: 'bar',
               }))
               resolve()
diff --git a/packages/vue-query/src/useQueries.ts b/packages/vue-query/src/useQueries.ts
index 0f5e5c4696..bfababaa3a 100644
--- a/packages/vue-query/src/useQueries.ts
+++ b/packages/vue-query/src/useQueries.ts
@@ -138,17 +138,17 @@ export function useQueries<T extends any[]>({
 }: {
   queries: Ref<UseQueriesOptionsArg<T>> | UseQueriesOptionsArg<T>
 }): Readonly<UseQueriesResults<T>> {
-  const options = computed(
+  const unreffedQueries = computed(
     () => cloneDeepUnref(queries) as UseQueriesOptionsArg<T>,
   )
 
-  const queryClientKey = options.value[0]?.queryClientKey
-  const optionsQueryClient = options.value[0]?.queryClient as
+  const queryClientKey = unreffedQueries.value[0]?.queryClientKey
+  const optionsQueryClient = unreffedQueries.value[0]?.queryClient as
     | QueryClient
     | undefined
   const queryClient = optionsQueryClient ?? useQueryClient(queryClientKey)
   const defaultedQueries = computed(() =>
-    options.value.map((options) => {
+    unreffedQueries.value.map((options) => {
       const defaulted = queryClient.defaultQueryOptions(options)
       defaulted._optimisticResults = queryClient.isRestoring.value
         ? 'isRestoring'
@@ -185,7 +185,7 @@ export function useQueries<T extends any[]>({
   )
 
   watch(
-    options,
+    unreffedQueries,
     () => {
       observer.setQueries(defaultedQueries.value)
       state.splice(0, state.length, ...observer.getCurrentResult())

From e46ecd704f53a0cf673a33f9a92288cb00ab87cc Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Mon, 14 Nov 2022 01:28:49 +0100
Subject: [PATCH 15/15] chore: fix weird lint errors

---
 packages/vue-query/src/useBaseQuery.ts  | 1 +
 packages/vue-query/src/useIsFetching.ts | 1 +
 packages/vue-query/src/useIsMutating.ts | 1 +
 3 files changed, 3 insertions(+)

diff --git a/packages/vue-query/src/useBaseQuery.ts b/packages/vue-query/src/useBaseQuery.ts
index 74e0f5c54b..66e8e74960 100644
--- a/packages/vue-query/src/useBaseQuery.ts
+++ b/packages/vue-query/src/useBaseQuery.ts
@@ -78,6 +78,7 @@ export function useBaseQuery<
   watch(
     queryClient.isRestoring,
     (isRestoring) => {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
       if (!isRestoring) {
         unsubscribe.value()
         unsubscribe.value = observer.subscribe((result) => {
diff --git a/packages/vue-query/src/useIsFetching.ts b/packages/vue-query/src/useIsFetching.ts
index 857a27f86f..3df3f366b9 100644
--- a/packages/vue-query/src/useIsFetching.ts
+++ b/packages/vue-query/src/useIsFetching.ts
@@ -54,6 +54,7 @@ export function parseFilterArgs(
   if (isQueryKey(plainArg1)) {
     options = { ...plainArg2, queryKey: plainArg1 }
   } else {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     options = plainArg1 || {}
   }
 
diff --git a/packages/vue-query/src/useIsMutating.ts b/packages/vue-query/src/useIsMutating.ts
index 0d0e497dee..03b037df5d 100644
--- a/packages/vue-query/src/useIsMutating.ts
+++ b/packages/vue-query/src/useIsMutating.ts
@@ -54,6 +54,7 @@ export function parseFilterArgs(
   if (isQueryKey(plainArg1)) {
     options = { ...plainArg2, mutationKey: plainArg1 }
   } else {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     options = plainArg1 || {}
   }