From 08f0fcdeabec4a1c4d334b766c70d97e30cbd26c Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Fri, 8 Mar 2024 11:52:05 +0100
Subject: [PATCH] fix: use shallowRef on result & error

---
 packages/vue-apollo-composable/src/useMutation.ts     | 4 ++--
 packages/vue-apollo-composable/src/useQuery.ts        | 4 ++--
 packages/vue-apollo-composable/src/useSubscription.ts | 5 +++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/vue-apollo-composable/src/useMutation.ts b/packages/vue-apollo-composable/src/useMutation.ts
index 6c95c72a..aee637c3 100644
--- a/packages/vue-apollo-composable/src/useMutation.ts
+++ b/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]>()
diff --git a/packages/vue-apollo-composable/src/useQuery.ts b/packages/vue-apollo-composable/src/useQuery.ts
index fa465050..bf340c5b 100644
--- a/packages/vue-apollo-composable/src/useQuery.ts
+++ b/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
diff --git a/packages/vue-apollo-composable/src/useSubscription.ts b/packages/vue-apollo-composable/src/useSubscription.ts
index 1a152dd4..b6c8e5bf 100644
--- a/packages/vue-apollo-composable/src/useSubscription.ts
+++ b/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)