fix(vue-query): make vue-query client compatible with query-core (#9250)

* fix(vue-query): make vue-query client compatible with query-core

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: DamianOsipiuk

packages/vue-query/src/__tests__/vueQueryPlugin.test.ts

@@ -269,11 +269,11 @@ describe('VueQueryPlugin', () => {
         ],
       })
 
-      expect(customClient.isRestoring.value).toBeTruthy()
+      expect(customClient.isRestoring?.value).toBeTruthy()
 
       await sleep(0)
 
-      expect(customClient.isRestoring.value).toBeFalsy()
+      expect(customClient.isRestoring?.value).toBeFalsy()
     })
 
     test('should delay useQuery subscription and not call fetcher if data is not stale', async () => {
@@ -311,14 +311,14 @@ describe('VueQueryPlugin', () => {
         customClient,
       )
 
-      expect(customClient.isRestoring.value).toBeTruthy()
+      expect(customClient.isRestoring?.value).toBeTruthy()
       expect(query.isFetching.value).toBeFalsy()
       expect(query.data.value).toStrictEqual(undefined)
       expect(fnSpy).toHaveBeenCalledTimes(0)
 
       await sleep(0)
 
-      expect(customClient.isRestoring.value).toBeFalsy()
+      expect(customClient.isRestoring?.value).toBeFalsy()
       expect(query.data.value).toStrictEqual({ foo: 'bar' })
       expect(fnSpy).toHaveBeenCalledTimes(0)
     })
@@ -373,7 +373,7 @@ describe('VueQueryPlugin', () => {
         customClient,
       )
 
-      expect(customClient.isRestoring.value).toBeTruthy()
+      expect(customClient.isRestoring?.value).toBeTruthy()
 
       expect(query.isFetching.value).toBeFalsy()
       expect(query.data.value).toStrictEqual(undefined)
@@ -384,7 +384,7 @@ describe('VueQueryPlugin', () => {
 
       await sleep(0)
 
-      expect(customClient.isRestoring.value).toBeFalsy()
+      expect(customClient.isRestoring?.value).toBeFalsy()
       expect(query.data.value).toStrictEqual({ foo1: 'bar1' })
       expect(queries.value[0].data).toStrictEqual({ foo2: 'bar2' })
       expect(fnSpy).toHaveBeenCalledTimes(0)

packages/vue-query/src/queryClient.ts

@@ -44,7 +44,7 @@ export class QueryClient extends QC {
     super(vueQueryConfig)
   }
 
-  isRestoring: Ref<boolean> = ref(false)
+  isRestoring?: Ref<boolean> = ref(false)
 
   isFetching(filters: MaybeRefDeep<QueryFilters> = {}): number {
     return super.isFetching(cloneDeepUnref(filters))

packages/vue-query/src/useBaseQuery.ts

@@ -93,7 +93,7 @@ export function useBaseQuery<
       TQueryKey
     > = client.defaultQueryOptions(clonedOptions)
 
-    defaulted._optimisticResults = client.isRestoring.value
+    defaulted._optimisticResults = client.isRestoring?.value
       ? 'isRestoring'
       : 'optimistic'
 
@@ -110,18 +110,20 @@ export function useBaseQuery<
     // noop
   }
 
-  watch(
-    client.isRestoring,
-    (isRestoring) => {
-      if (!isRestoring) {
-        unsubscribe()
-        unsubscribe = observer.subscribe((result) => {
-          updateState(state, result)
-        })
-      }
-    },
-    { immediate: true },
-  )
+  if (client.isRestoring) {
+    watch(
+      client.isRestoring,
+      (isRestoring) => {
+        if (!isRestoring) {
+          unsubscribe()
+          unsubscribe = observer.subscribe((result) => {
+            updateState(state, result)
+          })
+        }
+      },
+      { immediate: true },
+    )
+  }
 
   const updater = () => {
     observer.setOptions(defaultedOptions.value)

packages/vue-query/src/useQueries.ts

@@ -274,7 +274,7 @@ export function useQueries<
       }
 
       const defaulted = client.defaultQueryOptions(clonedOptions)
-      defaulted._optimisticResults = client.isRestoring.value
+      defaulted._optimisticResults = client.isRestoring?.value
         ? 'isRestoring'
         : 'optimistic'
 
@@ -317,20 +317,22 @@ export function useQueries<
     // noop
   }
 
-  watch(
-    client.isRestoring,
-    (isRestoring) => {
-      if (!isRestoring) {
-        unsubscribe()
-        unsubscribe = observer.subscribe(() => {
-          state.value = getOptimisticResult()
-        })
+  if (client.isRestoring) {
+    watch(
+      client.isRestoring,
+      (isRestoring) => {
+        if (!isRestoring) {
+          unsubscribe()
+          unsubscribe = observer.subscribe(() => {
+            state.value = getOptimisticResult()
+          })
 
-        state.value = getOptimisticResult()
-      }
-    },
-    { immediate: true },
-  )
+          state.value = getOptimisticResult()
+        }
+      },
+      { immediate: true },
+    )
+  }
 
   watch(defaultedQueries, (queriesValue) => {
     observer.setQueries(

packages/vue-query/src/vueQueryPlugin.ts

@@ -47,11 +47,15 @@ export const VueQueryPlugin = {
     }
 
     if (options.clientPersister) {
-      client.isRestoring.value = true
+      if (client.isRestoring) {
+        client.isRestoring.value = true
+      }
       const [unmount, promise] = options.clientPersister(client)
       persisterUnmount = unmount
       promise.then(() => {
-        client.isRestoring.value = false
+        if (client.isRestoring) {
+          client.isRestoring.value = false
+        }
         options.clientPersisterOnSuccess?.(client)
       })
     }