fix(vue-query): use shallowReactive and shallowReadonly to prevent perforamcne slowdown for large datasets

Author: junheep-dev

packages/vue-query/src/useBaseQuery.ts

@@ -2,8 +2,8 @@ import {
   computed,
   getCurrentScope,
   onScopeDispose,
-  reactive,
-  readonly,
+  shallowReactive,
+  shallowReadonly,
   toRefs,
   watch,
 } from 'vue-demi'
@@ -105,7 +105,7 @@ export function useBaseQuery<
   })
 
   const observer = new Observer(client, defaultedOptions.value)
-  const state = reactive(observer.getCurrentResult())
+  const state = shallowReactive(observer.getCurrentResult())
 
   let unsubscribe = () => {
     // noop
@@ -201,7 +201,7 @@ export function useBaseQuery<
     },
   )
 
-  const object: any = toRefs(readonly(state))
+  const object: any = toRefs(shallowReadonly(state))
   for (const key in state) {
     if (typeof state[key as keyof typeof state] === 'function') {
       object[key] = state[key as keyof typeof state]

packages/vue-query/src/utils.ts

@@ -9,7 +9,7 @@ export function getClientKey(key?: string) {
 }
 
 export function updateState(
-  state: Record<string, unknown>,
+  state: Record<string, any>,
   update: Record<string, any>,
 ): void {
   Object.keys(state).forEach((key) => {