fix: use shallowRef on result & error

Author: Akryum

packages/vue-apollo-composable/src/useMutation.ts

@@ -1,6 +1,6 @@
 import { DocumentNode } from 'graphql'
 import { MutationOptions, OperationVariables, FetchResult, TypedDocumentNode, ApolloError, ApolloClient } from '@apollo/client/core/index.js'
-import { ref, onBeforeUnmount, isRef, Ref, getCurrentInstance } from 'vue-demi'
+import { ref, onBeforeUnmount, isRef, Ref, getCurrentInstance, shallowRef } from 'vue-demi'
 import { useApolloClient } from './useApolloClient'
 import { ReactiveFunction } from './util/ReactiveFunction'
 import { useEventHook } from './util/useEventHook'
@@ -56,7 +56,7 @@ export function useMutation<
   const vm = getCurrentInstance()
   const loading = ref<boolean>(false)
   vm && trackMutation(loading)
-  const error = ref<ApolloError | null>(null)
+  const error = shallowRef<ApolloError | null>(null)
   const called = ref<boolean>(false)
 
   const doneEvent = useEventHook<[FetchResult<TResult, Record<string, any>, Record<string, any>>, OnDoneContext]>()

packages/vue-apollo-composable/src/useQuery.ts

@@ -165,9 +165,9 @@ export function useQueryImpl<
   /**
    * Result from the query
    */
-  const result = ref<TResult | undefined>()
+  const result = shallowRef<TResult | undefined>()
   const resultEvent = useEventHook<[ApolloQueryResult<TResult>, OnResultContext]>()
-  const error = ref<ApolloError | null>(null)
+  const error = shallowRef<ApolloError | null>(null)
   const errorEvent = useEventHook<[ApolloError, OnErrorContext]>()
 
   // Loading

packages/vue-apollo-composable/src/useSubscription.ts

@@ -8,6 +8,7 @@ import {
   getCurrentInstance,
   onBeforeUnmount,
   nextTick,
+  shallowRef,
 } from 'vue-demi'
 import type {
   OperationVariables,
@@ -127,9 +128,9 @@ export function useSubscription <
   const variablesRef = paramToRef(variables)
   const optionsRef = paramToReactive(options)
 
-  const result = ref<TResult | null | undefined>()
+  const result = shallowRef<TResult | null | undefined>()
   const resultEvent = useEventHook<[FetchResult<TResult>, OnResultContext]>()
-  const error = ref<ApolloError | null>(null)
+  const error = shallowRef<ApolloError | null>(null)
   const errorEvent = useEventHook<[ApolloError, OnErrorContext]>()
 
   const loading = ref(false)