Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
fix(vue): variables lose reactivity (#3614)
authored by
Jovi De Croock
and committed by
GitHub
d35da8fb
ad291445
+41
-1
+5
.changeset/curvy-pets-yawn.md
+5
.changeset/curvy-pets-yawn.md
+32
packages/vue-urql/src/useQuery.test.ts
+32
packages/vue-urql/src/useQuery.test.ts
···
108
108
);
109
109
});
110
110
111
+
it('reacts to variables changing', async () => {
112
+
const executeQuery = vi
113
+
.spyOn(client, 'executeQuery')
114
+
.mockImplementation(request => {
115
+
return pipe(
116
+
fromValue({ operation: request, data: { test: true } }),
117
+
delay(1)
118
+
) as any;
119
+
});
120
+
121
+
const variables = {
122
+
test: ref(1),
123
+
};
124
+
const query$ = useQuery({
125
+
query: '{ test }',
126
+
variables,
127
+
});
128
+
129
+
await query$;
130
+
131
+
expect(executeQuery).toHaveBeenCalledTimes(1);
132
+
133
+
expect(query$.operation.value).toHaveProperty('variables.test', 1);
134
+
135
+
variables.test.value = 2;
136
+
137
+
await query$;
138
+
139
+
expect(executeQuery).toHaveBeenCalledTimes(2);
140
+
expect(query$.operation.value).toHaveProperty('variables.test', 2);
141
+
});
142
+
111
143
it('pauses query when asked to do so', async () => {
112
144
const subject = makeSubject<any>();
113
145
const executeQuery = vi
+4
-1
packages/vue-urql/src/useQuery.ts
+4
-1
packages/vue-urql/src/useQuery.ts
···
1
1
/* eslint-disable react-hooks/rules-of-hooks */
2
2
3
3
import type { Ref, WatchStopHandle } from 'vue';
4
+
import { reactive } from 'vue';
4
5
import { isRef, ref, shallowRef, watch, watchEffect } from 'vue';
5
6
6
7
import type { Subscription, Source } from 'wonka';
···
241
242
}
242
243
243
244
export function callUseQuery<T = any, V extends AnyVariables = AnyVariables>(
244
-
args: UseQueryArgs<T, V>,
245
+
_args: UseQueryArgs<T, V>,
245
246
client: Ref<Client> = useClient(),
246
247
stops: WatchStopHandle[] = []
247
248
): UseQueryResponse<T, V> {
249
+
const args = reactive(_args) as UseQueryArgs<T, V>;
250
+
248
251
const data: Ref<T | undefined> = ref();
249
252
const stale: Ref<boolean> = ref(false);
250
253
const fetching: Ref<boolean> = ref(false);