fix(vue-query): unify shallow flag behaviour (#9050)

Author: DamianOsipiuk

packages/vue-query/src/useBaseQuery.ts

@@ -2,6 +2,7 @@ import {
   computed,
   getCurrentScope,
   onScopeDispose,
+  reactive,
   readonly,
   shallowReactive,
   shallowReadonly,
@@ -106,7 +107,10 @@ export function useBaseQuery<
   })
 
   const observer = new Observer(client, defaultedOptions.value)
-  const state = shallowReactive(observer.getCurrentResult())
+  // @ts-expect-error
+  const state = defaultedOptions.value.shallow
+    ? shallowReactive(observer.getCurrentResult())
+    : reactive(observer.getCurrentResult())
 
   let unsubscribe = () => {
     // noop
@@ -202,13 +206,10 @@ export function useBaseQuery<
     },
   )
 
-  const readonlyState =
-    process.env.NODE_ENV === 'production'
-      ? state
-      : // @ts-expect-error
-        defaultedOptions.value.shallow
-        ? shallowReadonly(state)
-        : readonly(state)
+  // @ts-expect-error
+  const readonlyState = defaultedOptions.value.shallow
+    ? shallowReadonly(state)
+    : readonly(state)
 
   const object: any = toRefs(readonlyState)
   for (const key in state) {

packages/vue-query/src/useMutation.ts

@@ -2,6 +2,7 @@ import {
   computed,
   getCurrentScope,
   onScopeDispose,
+  reactive,
   readonly,
   shallowReactive,
   shallowReadonly,
@@ -87,7 +88,9 @@ export function useMutation<
     return client.defaultMutationOptions(cloneDeepUnref(mutationOptions))
   })
   const observer = new MutationObserver(client, options.value)
-  const state = shallowReactive(observer.getCurrentResult())
+  const state = options.value.shallow
+    ? shallowReactive(observer.getCurrentResult())
+    : reactive(observer.getCurrentResult())
 
   const unsubscribe = observer.subscribe((result) => {
     updateState(state, result)
@@ -110,12 +113,9 @@ export function useMutation<
     unsubscribe()
   })
 
-  const readonlyState =
-    process.env.NODE_ENV === 'production'
-      ? state
-      : options.value.shallow
-        ? shallowReadonly(state)
-        : readonly(state)
+  const readonlyState = options.value.shallow
+    ? shallowReadonly(state)
+    : readonly(state)
 
   const resultRefs = toRefs(readonlyState) as ToRefs<
     Readonly<MutationResult<TData, TError, TVariables, TContext>>

packages/vue-query/src/useQueries.ts

@@ -344,9 +344,7 @@ export function useQueries<
     unsubscribe()
   })
 
-  return process.env.NODE_ENV === 'production'
-    ? state
-    : options.shallow
-      ? shallowReadonly(state)
-      : (readonly(state) as Readonly<Ref<TCombinedResult>>)
+  return options.shallow
+    ? shallowReadonly(state)
+    : (readonly(state) as Readonly<Ref<TCombinedResult>>)
 }