perf(vue): use shallowRef for data (#3641)

urql-graphql · Jul 29, 2024 · 1315df1 · 1315df1
1 parent c012b07
commit 1315df1
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/.changeset/old-humans-knock.md 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
@@ -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
@@ -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
@@ -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,