Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
Use shallowRef instead of ref for deep objects (#3611)
+18
-13
+5
.changeset/old-onions-travel.md
+5
.changeset/old-onions-travel.md
+3
-3
packages/vue-urql/src/useClient.ts
+3
-3
packages/vue-urql/src/useClient.ts
···
1
1
import type { App, Ref } from 'vue';
2
-
import { getCurrentInstance, inject, provide, isRef, ref } from 'vue';
2
+
import { getCurrentInstance, inject, provide, isRef, shallowRef } from 'vue';
3
3
import type { ClientOptions } from '@urql/core';
4
4
import { Client } from '@urql/core';
5
5
···
36
36
export function provideClient(opts: ClientOptions | Client | Ref<Client>) {
37
37
let client: Ref<Client>;
38
38
if (!isRef(opts)) {
39
-
client = ref(opts instanceof Client ? opts : new Client(opts));
39
+
client = shallowRef(opts instanceof Client ? opts : new Client(opts));
40
40
} else {
41
41
client = opts;
42
42
}
···
78
78
export function install(app: App, opts: ClientOptions | Client | Ref<Client>) {
79
79
let client: Ref<Client>;
80
80
if (!isRef(opts)) {
81
-
client = ref(opts instanceof Client ? opts : new Client(opts));
81
+
client = shallowRef(opts instanceof Client ? opts : new Client(opts));
82
82
} else {
83
83
client = opts;
84
84
}
+4
-4
packages/vue-urql/src/useMutation.ts
+4
-4
packages/vue-urql/src/useMutation.ts
···
1
1
/* eslint-disable react-hooks/rules-of-hooks */
2
2
3
3
import type { Ref } from 'vue';
4
-
import { ref } from 'vue';
4
+
import { ref, shallowRef } from 'vue';
5
5
import type { DocumentNode } from 'graphql';
6
6
import { pipe, onPush, filter, toPromise, take } from 'wonka';
7
7
···
138
138
const data: Ref<T | undefined> = ref();
139
139
const stale: Ref<boolean> = ref(false);
140
140
const fetching: Ref<boolean> = ref(false);
141
-
const error: Ref<CombinedError | undefined> = ref();
142
-
const operation: Ref<Operation<T, V> | undefined> = ref();
143
-
const extensions: Ref<Record<string, any> | undefined> = ref();
141
+
const error: Ref<CombinedError | undefined> = shallowRef();
142
+
const operation: Ref<Operation<T, V> | undefined> = shallowRef();
143
+
const extensions: Ref<Record<string, any> | undefined> = shallowRef();
144
144
145
145
return {
146
146
data,
+3
-3
packages/vue-urql/src/useQuery.ts
+3
-3
packages/vue-urql/src/useQuery.ts
···
250
250
const data: Ref<T | undefined> = ref();
251
251
const stale: Ref<boolean> = ref(false);
252
252
const fetching: Ref<boolean> = ref(false);
253
-
const error: Ref<CombinedError | undefined> = ref();
254
-
const operation: Ref<Operation<T, V> | undefined> = ref();
255
-
const extensions: Ref<Record<string, any> | undefined> = ref();
253
+
const error: Ref<CombinedError | undefined> = shallowRef();
254
+
const operation: Ref<Operation<T, V> | undefined> = shallowRef();
255
+
const extensions: Ref<Record<string, any> | undefined> = shallowRef();
256
256
257
257
const isPaused: Ref<boolean> = ref(!!unref(args.pause));
258
258
if (isRef(args.pause) || typeof args.pause === 'function') {
+3
-3
packages/vue-urql/src/useSubscription.ts
+3
-3
packages/vue-urql/src/useSubscription.ts
···
249
249
const data: Ref<R | undefined> = ref();
250
250
const stale: Ref<boolean> = ref(false);
251
251
const fetching: Ref<boolean> = ref(false);
252
-
const error: Ref<CombinedError | undefined> = ref();
253
-
const operation: Ref<Operation<T, V> | undefined> = ref();
254
-
const extensions: Ref<Record<string, any> | undefined> = ref();
252
+
const error: Ref<CombinedError | undefined> = shallowRef();
253
+
const operation: Ref<Operation<T, V> | undefined> = shallowRef();
254
+
const extensions: Ref<Record<string, any> | undefined> = shallowRef();
255
255
256
256
const scanHandler = ref(handler);
257
257
const isPaused: Ref<boolean> = ref(!!unref(args.pause));