Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
fix(vue): Support getter-functions on `MaybeRef`-typed inputs (#3582)
authored by
Phil Pluckthun
and committed by
GitHub
9bf3289b
019b1bb0
+43
-52
+5
.changeset/itchy-cups-remember.md
+5
.changeset/itchy-cups-remember.md
+4
-3
packages/vue-urql/src/useMutation.ts
+4
-3
packages/vue-urql/src/useMutation.ts
···
17
17
import { createRequest } from '@urql/core';
18
18
19
19
import { useClient } from './useClient';
20
-
import { unwrapPossibleProxy } from './utils';
20
+
import type { MaybeRef } from './utils';
21
+
import { unref } from './utils';
21
22
22
23
/** State of the last mutation executed by {@link useMutation}.
23
24
*
···
131
132
}
132
133
133
134
export function callUseMutation<T = any, V extends AnyVariables = AnyVariables>(
134
-
query: TypedDocumentNode<T, V> | DocumentNode | string,
135
+
query: MaybeRef<TypedDocumentNode<T, V> | DocumentNode | string>,
135
136
client: Ref<Client> = useClient()
136
137
): UseMutationResponse<T, V> {
137
138
const data: Ref<T | undefined> = ref();
···
156
157
157
158
return pipe(
158
159
client.value.executeMutation<T, V>(
159
-
createRequest<T, V>(query, unwrapPossibleProxy(variables)),
160
+
createRequest<T, V>(unref(query), unref(variables)),
160
161
context || {}
161
162
),
162
163
onPush(result => {
+14
-25
packages/vue-urql/src/useQuery.ts
+14
-25
packages/vue-urql/src/useQuery.ts
···
1
1
/* eslint-disable react-hooks/rules-of-hooks */
2
2
3
3
import type { WatchStopHandle, Ref } from 'vue';
4
-
import { shallowRef, ref, watchEffect, reactive, isRef } from 'vue';
4
+
import { shallowRef, ref, watchEffect, reactive } from 'vue';
5
5
6
6
import type { Subscription, Source } from 'wonka';
7
7
import { pipe, subscribe, onEnd } from 'wonka';
···
19
19
import { createRequest } from '@urql/core';
20
20
21
21
import { useClient } from './useClient';
22
-
import { unwrapPossibleProxy, updateShallowRef } from './utils';
23
-
24
-
type MaybeRef<T> = T | Ref<T>;
25
-
type MaybeRefObj<T extends {}> = { [K in keyof T]: MaybeRef<T[K]> };
22
+
import type { MaybeRef, MaybeRefObj } from './utils';
23
+
import { unref, updateShallowRef } from './utils';
26
24
27
25
/** Input arguments for the {@link useQuery} function.
28
26
*
···
246
244
client: Ref<Client> = useClient(),
247
245
stops: WatchStopHandle[] = []
248
246
): UseQueryResponse<T, V> {
249
-
const args = reactive(_args);
247
+
const args = reactive(_args) as UseQueryArgs<T, V>;
250
248
251
249
const data: Ref<T | undefined> = ref();
252
250
const stale: Ref<boolean> = ref(false);
···
255
253
const operation: Ref<Operation<T, V> | undefined> = ref();
256
254
const extensions: Ref<Record<string, any> | undefined> = ref();
257
255
258
-
const isPaused: Ref<boolean> = isRef(_args.pause)
259
-
? _args.pause
260
-
: ref(!!_args.pause);
256
+
const isPaused = ref(!!unref(args.pause));
261
257
262
258
const input = shallowRef({
263
-
request: createRequest<T, V>(
264
-
unwrapPossibleProxy(args.query as any),
265
-
unwrapPossibleProxy<V>(args.variables as V)
266
-
),
267
-
requestPolicy: unwrapPossibleProxy(args.requestPolicy),
259
+
request: createRequest<T, V>(unref(args.query), unref(args.variables) as V),
260
+
requestPolicy: unref(args.requestPolicy),
268
261
isPaused: isPaused.value,
269
262
});
270
263
···
274
267
watchEffect(() => {
275
268
updateShallowRef(input, {
276
269
request: createRequest<T, V>(
277
-
unwrapPossibleProxy(args.query as any),
278
-
unwrapPossibleProxy<V>(args.variables as V)
270
+
unref(args.query),
271
+
unref(args.variables) as V
279
272
),
280
-
requestPolicy: unwrapPossibleProxy(args.requestPolicy),
273
+
requestPolicy: unref(args.requestPolicy),
281
274
isPaused: isPaused.value,
282
275
});
283
276
}, watchOptions)
···
287
280
watchEffect(() => {
288
281
source.value = !input.value.isPaused
289
282
? client.value.executeQuery<T, V>(input.value.request, {
290
-
requestPolicy: unwrapPossibleProxy(
291
-
args.requestPolicy
292
-
) as RequestPolicy,
293
-
...unwrapPossibleProxy(args.context),
283
+
requestPolicy: unref(args.requestPolicy),
284
+
...unref(args.context),
294
285
})
295
286
: undefined;
296
287
}, watchOptions)
···
308
299
const s = (source.value = client.value.executeQuery<T, V>(
309
300
input.value.request,
310
301
{
311
-
requestPolicy: unwrapPossibleProxy(
312
-
args.requestPolicy
313
-
) as RequestPolicy,
314
-
...args.context,
302
+
requestPolicy: unref(args.requestPolicy),
303
+
...unref(args.context),
315
304
...opts,
316
305
}
317
306
));
+11
-19
packages/vue-urql/src/useSubscription.ts
+11
-19
packages/vue-urql/src/useSubscription.ts
···
4
4
import { pipe, subscribe, onEnd } from 'wonka';
5
5
6
6
import type { WatchStopHandle, Ref } from 'vue';
7
-
import { ref, shallowRef, watchEffect, reactive, isRef } from 'vue';
7
+
import { ref, shallowRef, watchEffect, reactive } from 'vue';
8
8
9
9
import type {
10
10
Client,
···
18
18
import { createRequest } from '@urql/core';
19
19
20
20
import { useClient } from './useClient';
21
-
import { unwrapPossibleProxy, updateShallowRef } from './utils';
22
-
23
-
type MaybeRef<T> = Exclude<T, void> | Ref<Exclude<T, void>>;
24
-
type MaybeRefObj<T extends {}> = { [K in keyof T]: MaybeRef<T[K]> };
21
+
import type { MaybeRef, MaybeRefObj } from './utils';
22
+
import { unref, updateShallowRef } from './utils';
25
23
26
24
/** Input arguments for the {@link useSubscription} function.
27
25
*
···
245
243
client: Ref<Client> = useClient(),
246
244
stops: WatchStopHandle[] = []
247
245
): UseSubscriptionResponse<T, R, V> {
248
-
const args = reactive(_args);
246
+
const args = reactive(_args) as UseSubscriptionArgs<T, V>;
249
247
250
248
const data: Ref<R | undefined> = ref();
251
249
const stale: Ref<boolean> = ref(false);
···
254
252
const operation: Ref<Operation<T, V> | undefined> = ref();
255
253
const extensions: Ref<Record<string, any> | undefined> = ref();
256
254
257
-
const scanHandler: Ref<SubscriptionHandler<T, R> | undefined> = ref(handler);
258
-
259
-
const isPaused: Ref<boolean> = isRef(_args.pause)
260
-
? _args.pause
261
-
: ref(!!_args.pause);
255
+
const scanHandler = ref(handler);
256
+
const isPaused = ref(!!unref(args.pause));
262
257
263
258
const input = shallowRef({
264
-
request: createRequest<T, V>(
265
-
unwrapPossibleProxy(args.query as any),
266
-
unwrapPossibleProxy<V>(args.variables as V)
267
-
),
259
+
request: createRequest<T, V>(unref(args.query), unref(args.variables) as V),
268
260
isPaused: isPaused.value,
269
261
});
270
262
···
274
266
watchEffect(() => {
275
267
updateShallowRef(input, {
276
268
request: createRequest<T, V>(
277
-
unwrapPossibleProxy(args.query as any),
278
-
unwrapPossibleProxy<V>(args.variables as V)
269
+
unref(args.query),
270
+
unref(args.variables) as V
279
271
),
280
272
isPaused: isPaused.value,
281
273
});
···
286
278
watchEffect(() => {
287
279
source.value = !isPaused.value
288
280
? client.value.executeSubscription<T, V>(input.value.request, {
289
-
...(unwrapPossibleProxy(args.context) as Partial<OperationContext>),
281
+
...unref(args.context),
290
282
})
291
283
: undefined;
292
284
}, watchOptions)
···
338
330
source.value = client.value.executeSubscription<T, V>(
339
331
input.value.request,
340
332
{
341
-
...unwrapPossibleProxy(args.context),
333
+
...unref(args.context),
342
334
...opts,
343
335
}
344
336
);
+9
-5
packages/vue-urql/src/utils.ts
+9
-5
packages/vue-urql/src/utils.ts
···
2
2
import type { Ref, ShallowRef } from 'vue';
3
3
import { isRef } from 'vue';
4
4
5
-
export function unwrapPossibleProxy<V>(possibleProxy: V | Ref<V>): V {
6
-
return possibleProxy && isRef(possibleProxy)
7
-
? possibleProxy.value
8
-
: possibleProxy;
9
-
}
5
+
export type MaybeRef<T> = T | (() => T) | Ref<T>;
6
+
export type MaybeRefObj<T extends {}> = { [K in keyof T]: MaybeRef<T[K]> };
7
+
8
+
export const unref = <T>(maybeRef: MaybeRef<T>): T =>
9
+
typeof maybeRef === 'function'
10
+
? (maybeRef as () => T)()
11
+
: maybeRef != null && isRef(maybeRef)
12
+
? maybeRef.value
13
+
: maybeRef;
10
14
11
15
export interface RequestState<
12
16
Data = any,