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/useMutation.ts

@@ -2,8 +2,8 @@ import {
   computed,
   getCurrentScope,
   onScopeDispose,
-  reactive,
-  readonly,
+  shallowReactive,
+  shallowReadonly,
   toRefs,
   watch,
 } from 'vue-demi'
@@ -78,7 +78,7 @@ export function useMutation<
     return client.defaultMutationOptions(cloneDeepUnref(mutationOptions))
   })
   const observer = new MutationObserver(client, options.value)
-  const state = reactive(observer.getCurrentResult())
+  const state = shallowReactive(observer.getCurrentResult())
 
   const unsubscribe = observer.subscribe((result) => {
     updateState(state, result)
@@ -101,7 +101,7 @@ export function useMutation<
     unsubscribe()
   })
 
-  const resultRefs = toRefs(readonly(state)) as unknown as ToRefs<
+  const resultRefs = toRefs(shallowReadonly(state)) as unknown as ToRefs<
     Readonly<MutationResult<TData, TError, TVariables, TContext>>
   >
 

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) => {