From 1315df1eaf9632f2afbc6d82fe897f91f9e4fdea Mon Sep 17 00:00:00 2001
From: Yurk Sha <yurkins@gmail.com>
Date: Mon, 29 Jul 2024 11:42:14 +0300
Subject: [PATCH] perf(vue): use shallowRef for data (#3641)

---
 .changeset/old-humans-knock.md           | 5 +++++
 packages/vue-urql/src/useMutation.ts     | 4 ++--
 packages/vue-urql/src/useQuery.ts        | 4 ++--
 packages/vue-urql/src/useSubscription.ts | 4 ++--
 4 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/old-humans-knock.md

diff --git a/.changeset/old-humans-knock.md b/.changeset/old-humans-knock.md
new file mode 100644
index 0000000000..e87d696a0e
--- /dev/null
+++ b/.changeset/old-humans-knock.md
@@ -0,0 +1,5 @@
+---
+'@urql/vue': patch
+---
+
+Use `shallowRef` for data variable to avoid extra overhead for heavy objects
diff --git a/packages/vue-urql/src/useMutation.ts b/packages/vue-urql/src/useMutation.ts
index 74fd65e9c4..e585678302 100644
--- a/packages/vue-urql/src/useMutation.ts
+++ b/packages/vue-urql/src/useMutation.ts
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 
 import type { Ref } from 'vue';
-import { ref } from 'vue';
+import { shallowRef } from 'vue';
 import { pipe, onPush, filter, toPromise, take } from 'wonka';
 
 import type {
@@ -133,7 +133,7 @@ export function callUseMutation<T = any, V extends AnyVariables = AnyVariables>(
   query: MaybeRef<DocumentInput<T, V>>,
   client: Ref<Client> = useClient()
 ): UseMutationResponse<T, V> {
-  const data: Ref<T | undefined> = ref();
+  const data: Ref<T | undefined> = shallowRef();
 
   const { fetching, operation, extensions, stale, error } = useRequestState<
     T,
diff --git a/packages/vue-urql/src/useQuery.ts b/packages/vue-urql/src/useQuery.ts
index b06fde3edd..d8da69b7d0 100644
--- a/packages/vue-urql/src/useQuery.ts
+++ b/packages/vue-urql/src/useQuery.ts
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 
 import type { Ref, WatchStopHandle } from 'vue';
-import { ref, watchEffect } from 'vue';
+import { shallowRef, watchEffect } from 'vue';
 
 import type { Subscription } from 'wonka';
 import { pipe, subscribe, onEnd } from 'wonka';
@@ -239,7 +239,7 @@ export function callUseQuery<T = any, V extends AnyVariables = AnyVariables>(
   client: Ref<Client> = useClient(),
   stops?: WatchStopHandle[]
 ): UseQueryResponse<T, V> {
-  const data: Ref<T | undefined> = ref();
+  const data: Ref<T | undefined> = shallowRef();
 
   const { fetching, operation, extensions, stale, error } = useRequestState<
     T,
diff --git a/packages/vue-urql/src/useSubscription.ts b/packages/vue-urql/src/useSubscription.ts
index 084d7586e9..b80991f755 100644
--- a/packages/vue-urql/src/useSubscription.ts
+++ b/packages/vue-urql/src/useSubscription.ts
@@ -3,7 +3,7 @@
 import { pipe, subscribe, onEnd } from 'wonka';
 
 import type { Ref, WatchStopHandle } from 'vue';
-import { isRef, ref, watchEffect } from 'vue';
+import { shallowRef, isRef, watchEffect } from 'vue';
 
 import type {
   Client,
@@ -239,7 +239,7 @@ export function callUseSubscription<
   client: Ref<Client> = useClient(),
   stops?: WatchStopHandle[]
 ): UseSubscriptionResponse<T, R, V> {
-  const data: Ref<R | undefined> = ref();
+  const data: Ref<R | undefined> = shallowRef();
 
   const { fetching, operation, extensions, stale, error } = useRequestState<
     T,