fix(vue-query): add shallow option, strip readonly in prod mode

Author: DamianOsipiuk

packages/vue-query/src/useBaseQuery.ts

@@ -2,6 +2,7 @@ import {
   computed,
   getCurrentScope,
   onScopeDispose,
+  readonly,
   shallowReactive,
   shallowReadonly,
   toRefs,
@@ -145,7 +146,7 @@ export function useBaseQuery<
     return new Promise<QueryObserverResult<TData, TError>>(
       (resolve, reject) => {
         let stopWatch = () => {
-          //noop
+          // noop
         }
         const run = () => {
           if (defaultedOptions.value.enabled !== false) {
@@ -201,7 +202,15 @@ export function useBaseQuery<
     },
   )
 
-  const object: any = toRefs(shallowReadonly(state))
+  const readonlyState =
+    process.env.NODE_ENV === 'production'
+      ? state
+      : // @ts-expect-error
+        defaultedOptions.value.shallow
+        ? shallowReadonly(state)
+        : readonly(state)
+
+  const object: any = toRefs(readonlyState)
   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/useInfiniteQuery.ts

@@ -49,6 +49,8 @@ export type UseInfiniteQueryOptions<
           TPageParam
         >[Property]
       >
+} & {
+  shallow?: boolean
 }
 
 export type UseInfiniteQueryReturnType<TData, TError> = UseBaseQueryReturnType<

packages/vue-query/src/useMutation.ts

@@ -2,6 +2,7 @@ import {
   computed,
   getCurrentScope,
   onScopeDispose,
+  readonly,
   shallowReactive,
   shallowReadonly,
   toRefs,
@@ -26,12 +27,17 @@ type MutationResult<TData, TError, TVariables, TContext> = DistributiveOmit<
   'mutate' | 'reset'
 >
 
+type UseMutationOptionsBase<TData, TError, TVariables, TContext> =
+  MutationObserverOptions<TData, TError, TVariables, TContext> & {
+    shallow?: boolean
+  }
+
 export type UseMutationOptions<
   TData = unknown,
   TError = DefaultError,
   TVariables = void,
   TContext = unknown,
-> = MaybeRefDeep<MutationObserverOptions<TData, TError, TVariables, TContext>>
+> = MaybeRefDeep<UseMutationOptionsBase<TData, TError, TVariables, TContext>>
 
 type MutateSyncFunction<
   TData = unknown,
@@ -61,7 +67,7 @@ export function useMutation<
   TContext = unknown,
 >(
   mutationOptions: MaybeRefDeep<
-    MutationObserverOptions<TData, TError, TVariables, TContext>
+    UseMutationOptionsBase<TData, TError, TVariables, TContext>
   >,
   queryClient?: QueryClient,
 ): UseMutationReturnType<TData, TError, TVariables, TContext> {
@@ -101,7 +107,14 @@ export function useMutation<
     unsubscribe()
   })
 
-  const resultRefs = toRefs(shallowReadonly(state)) as unknown as ToRefs<
+  const readonlyState =
+    process.env.NODE_ENV === 'production'
+      ? state
+      : 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

@@ -4,6 +4,7 @@ import {
   getCurrentScope,
   onScopeDispose,
   readonly,
+  shallowReadonly,
   shallowRef,
   unref,
   watch,
@@ -256,6 +257,7 @@ export function useQueries<
   }: {
     queries: MaybeRefDeep<UseQueriesOptionsArg<T>>
     combine?: (result: UseQueriesResults<T>) => TCombinedResult
+    shallow?: boolean
   },
   queryClient?: QueryClient,
 ): Readonly<Ref<TCombinedResult>> {
@@ -348,5 +350,9 @@ export function useQueries<
     unsubscribe()
   })
 
-  return readonly(state) as Readonly<Ref<TCombinedResult>>
+  return process.env.NODE_ENV === 'production'
+    ? state
+    : options.shallow
+      ? shallowReadonly(state)
+      : (readonly(state) as Readonly<Ref<TCombinedResult>>)
 }

packages/vue-query/src/useQuery.ts

@@ -23,33 +23,37 @@ export type UseQueryOptions<
   TData = TQueryFnData,
   TQueryData = TQueryFnData,
   TQueryKey extends QueryKey = QueryKey,
-> = MaybeRef<{
-  [Property in keyof QueryObserverOptions<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryData,
-    TQueryKey
-  >]: Property extends 'enabled'
-    ? MaybeRefOrGetter<
-        QueryObserverOptions<
-          TQueryFnData,
-          TError,
-          TData,
-          TQueryData,
-          DeepUnwrapRef<TQueryKey>
-        >[Property]
-      >
-    : MaybeRefDeep<
-        QueryObserverOptions<
-          TQueryFnData,
-          TError,
-          TData,
-          TQueryData,
-          DeepUnwrapRef<TQueryKey>
-        >[Property]
-      >
-}>
+> = MaybeRef<
+  {
+    [Property in keyof QueryObserverOptions<
+      TQueryFnData,
+      TError,
+      TData,
+      TQueryData,
+      TQueryKey
+    >]: Property extends 'enabled'
+      ? MaybeRefOrGetter<
+          QueryObserverOptions<
+            TQueryFnData,
+            TError,
+            TData,
+            TQueryData,
+            DeepUnwrapRef<TQueryKey>
+          >[Property]
+        >
+      : MaybeRefDeep<
+          QueryObserverOptions<
+            TQueryFnData,
+            TError,
+            TData,
+            TQueryData,
+            DeepUnwrapRef<TQueryKey>
+          >[Property]
+        >
+  } & {
+    shallow?: boolean
+  }
+>
 
 export type UndefinedInitialQueryOptions<
   TQueryFnData = unknown,