···

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

···

       
1
       
+
       
---

     

       
2
       
+
       
'@urql/vue': minor

     

       
3
       
+
       
---

     

       
4
       
+
       


     

       
5
       
+
       
Fix regression breaking `variables` typing

     

···

       
15
       
 
       
} from '@urql/core';

     

       
16
       
 
       


     

       
17
       
 
       
import { useClient } from './useClient';

     

       
18
       
-
       
import type { MaybeRef } from './utils';

     

       
19
       
-
       
import { createRequestWithArgs, useRequestState } from './utils';

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
20
       
 
       


     

       
21
       
 
       
/** State of the last mutation executed by {@link useMutation}.

     

       
22
       
 
       
 *

     
···

       
132
       
 
       
}

     

       
133
       
 
       


     

       
134
       
 
       
export function callUseMutation<T = any, V extends AnyVariables = AnyVariables>(

     

       
135
       
-
       
  query: MaybeRef<DocumentInput<T, V>>,

     

       
136
       
 
       
  client: Ref<Client> = useClient()

     

       
137
       
 
       
): UseMutationResponse<T, V> {

     

       
138
       
 
       
  const data: Ref<T | undefined> = shallowRef();

     
···

       
156
       
 
       


     

       
157
       
 
       
      return pipe(

     

       
158
       
 
       
        client.value.executeMutation<T, V>(

     

       
159
       
-
       
          createRequestWithArgs({ query, variables }),

     

       
160
       
 
       
          context || {}

     

       
161
       
 
       
        ),

     

       
162
       
 
       
        onPush(result => {

     

···

       
15
       
 
       
} from '@urql/core';

     

       
16
       
 
       


     

       
17
       
 
       
import { useClient } from './useClient';

     

       
18
       
+
       
import {

     

       
19
       
+
       
  createRequestWithArgs,

     

       
20
       
+
       
  type MaybeRefOrGetter,

     

       
21
       
+
       
  useRequestState,

     

       
22
       
+
       
} from './utils';

     

       
23
       
 
       


     

       
24
       
 
       
/** State of the last mutation executed by {@link useMutation}.

     

       
25
       
 
       
 *

     
···

       
135
       
 
       
}

     

       
136
       
 
       


     

       
137
       
 
       
export function callUseMutation<T = any, V extends AnyVariables = AnyVariables>(

     

       
138
       
+
       
  query: MaybeRefOrGetter<DocumentInput<T, V>>,

     

       
139
       
 
       
  client: Ref<Client> = useClient()

     

       
140
       
 
       
): UseMutationResponse<T, V> {

     

       
141
       
 
       
  const data: Ref<T | undefined> = shallowRef();

     
···

       
159
       
 
       


     

       
160
       
 
       
      return pipe(

     

       
161
       
 
       
        client.value.executeMutation<T, V>(

     

       
162
       
+
       
          createRequestWithArgs<T, V>({ query, variables }),

     

       
163
       
 
       
          context || {}

     

       
164
       
 
       
        ),

     

       
165
       
 
       
        onPush(result => {

     

···

       
120
       
 
       
    );

     

       
121
       
 
       
  });

     

       
122
       
 
       


     

       
123
       
-
       
  it('runs a query with different variables', async () => {

     

       
124
       
-
       
    const simpleVariables = {

     

       
125
       
-
       
      null: null,

     

       
126
       
-
       
      NaN: NaN,

     

       
127
       
-
       
      empty: '',

     

       
128
       
-
       
      bool: false,

     

       
129
       
-
       
      int: 1,

     

       
130
       
-
       
      float: 1.1,

     

       
131
       
-
       
      string: 'string',

     

       
132
       
-
       
      blob: new Blob(),

     

       
133
       
-
       
      date: new Date(),

     

       
134
       
-
       
    };

     

       
135
       
-
       


     

       
136
       
-
       
    const variablesSet = {

     

       
137
       
-
       
      func: () => 'func',

     

       
138
       
-
       
      ref: ref('ref'),

     

       
139
       
-
       
      computed: computed(() => 'computed'),

     

       
140
       
-
       
      ...simpleVariables,

     

       
141
       
-
       
    };

     

       
142
       
-
       


     

       
143
       
-
       
    const variablesSetUnwrapped = {

     

       
144
       
-
       
      func: 'func',

     

       
145
       
-
       
      ref: 'ref',

     

       
146
       
-
       
      computed: 'computed',

     

       
147
       
-
       
      ...simpleVariables,

     

       
148
       
-
       
    };

     

       
149
       
-
       


     

       
150
       
-
       
    const { query$ } = createQuery({

     

       
151
       
-
       
      query: ref('{ test }'),

     

       
152
       
-
       
      variables: {

     

       
153
       
-
       
        ...variablesSet,

     

       
154
       
-
       
        nested: variablesSet,

     

       
155
       
-
       
        array: [variablesSet],

     

       
156
       
-
       
      },

     

       
157
       
-
       
    });

     

       
158
       
-
       


     

       
159
       
-
       
    await query$;

     

       
160
       
-
       


     

       
161
       
-
       
    expect(query$.operation.value?.variables).toStrictEqual({

     

       
162
       
-
       
      ...variablesSetUnwrapped,

     

       
163
       
-
       
      nested: variablesSetUnwrapped,

     

       
164
       
-
       
      array: [variablesSetUnwrapped],

     

       
165
       
-
       
    });

     

       
166
       
-
       
  });

     

       
167
       
-
       


     

       
168
       
 
       
  it('reacts to ref variables changing', async () => {

     

       
169
       
 
       
    const variables = ref({ prop: 1 });

     

       
170
       
 
       


     
···

       
188
       
 
       
    expect(query$.operation.value).toHaveProperty('variables.prop', 3);

     

       
189
       
 
       
  });

     

       
190
       
 
       


     

       
191
       
-
       
  it('reacts to nested ref variables changing', async () => {

     

       
192
       
-
       
    const prop = ref(1);

     

       
0
       
 
       

     

       
193
       
 
       


     

       
194
       
 
       
    const { executeQuery, query$ } = createQuery({

     

       
195
       
 
       
      query: ref('{ test }'),

     

       
196
       
-
       
      variables: { prop },

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
197
       
 
       
    });

     

       
198
       
 
       


     

       
199
       
 
       
    await query$;

     

       
200
       
 
       
    expect(executeQuery).toHaveBeenCalledTimes(1);

     

       
201
       
 
       
    expect(query$.operation.value).toHaveProperty('variables.prop', 1);

     

       
202
       
 
       


     

       
203
       
-
       
    prop.value++;

     

       
204
       
 
       
    await query$;

     

       
205
       
 
       
    expect(executeQuery).toHaveBeenCalledTimes(2);

     

       
206
       
 
       
    expect(query$.operation.value).toHaveProperty('variables.prop', 2);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
207
       
 
       
  });

     

       
208
       
 
       


     

       
209
       
-
       
  it('reacts to deep nested ref variables changing', async () => {

     

       
210
       
-
       
    const prop = ref(1);

     

       
0
       
 
       

     

       
211
       
 
       


     

       
212
       
 
       
    const { executeQuery, query$ } = createQuery({

     

       
213
       
 
       
      query: ref('{ test }'),

     

       
214
       
-
       
      variables: { deep: { nested: { prop } } },

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
215
       
 
       
    });

     

       
216
       
 
       


     

       
217
       
 
       
    await query$;

     

       
218
       
 
       
    expect(executeQuery).toHaveBeenCalledTimes(1);

     

       
219
       
-
       
    expect(query$.operation.value).toHaveProperty(

     

       
220
       
-
       
      'variables.deep.nested.prop',

     

       
221
       
-
       
      1

     

       
222
       
-
       
    );

     

       
223
       
 
       


     

       
224
       
-
       
    prop.value++;

     

       
225
       
 
       
    await query$;

     

       
226
       
 
       
    expect(executeQuery).toHaveBeenCalledTimes(2);

     

       
227
       
-
       
    expect(query$.operation.value).toHaveProperty(

     

       
228
       
-
       
      'variables.deep.nested.prop',

     

       
229
       
-
       
      2

     

       
230
       
-
       
    );

     

       
0
       
 
       

     

       
0
       
 
       

     

       
231
       
 
       
  });

     

       
232
       
 
       


     

       
233
       
 
       
  it('reacts to reactive variables changing', async () => {

     
···

       
258
       
 
       
  });

     

       
259
       
 
       


     

       
260
       
 
       
  it('reacts to computed variables changing', async () => {

     

       
261
       
-
       
    const prop = ref(1);

     

       
262
       
-
       
    const prop2 = ref(1);

     

       
263
       
 
       
    const variables = computed(() => ({

     

       
264
       
-
       
      prop: prop.value,

     

       
265
       
-
       
      deep: { nested: { prop2 } },

     

       
266
       
 
       
    }));

     

       
267
       
 
       


     

       
268
       
 
       
    const { executeQuery, query$ } = createQuery({

     
···

       
274
       
 
       
    expect(executeQuery).toHaveBeenCalledTimes(1);

     

       
275
       
 
       
    expect(query$.operation.value).toHaveProperty('variables.prop', 1);

     

       
276
       
 
       


     

       
277
       
-
       
    prop.value++;

     

       
278
       
 
       
    await query$;

     

       
279
       
 
       
    expect(executeQuery).toHaveBeenCalledTimes(2);

     

       
280
       
 
       
    expect(query$.operation.value).toHaveProperty('variables.prop', 2);

     

       
281
       
 
       


     

       
282
       
-
       
    prop2.value++;

     

       
283
       
 
       
    await query$;

     

       
284
       
 
       
    expect(executeQuery).toHaveBeenCalledTimes(3);

     

       
285
       
 
       
    expect(query$.operation.value).toHaveProperty(

     

       
286
       
-
       
      'variables.deep.nested.prop2',

     

       
287
       
-
       
      2

     

       
288
       
-
       
    );

     

       
289
       
-
       
  });

     

       
290
       
-
       


     

       
291
       
-
       
  it('reacts to callback variables changing', async () => {

     

       
292
       
-
       
    const prop = ref(1);

     

       
293
       
-
       
    const prop2 = ref(1);

     

       
294
       
-
       
    const variables = () => ({

     

       
295
       
-
       
      prop: prop.value,

     

       
296
       
-
       
      deep: { nested: { prop2 } },

     

       
297
       
-
       
    });

     

       
298
       
-
       


     

       
299
       
-
       
    const { executeQuery, query$ } = createQuery({

     

       
300
       
-
       
      query: ref('{ test }'),

     

       
301
       
-
       
      variables,

     

       
302
       
-
       
    });

     

       
303
       
-
       


     

       
304
       
-
       
    await query$;

     

       
305
       
-
       
    expect(executeQuery).toHaveBeenCalledTimes(1);

     

       
306
       
-
       
    expect(query$.operation.value).toHaveProperty('variables.prop', 1);

     

       
307
       
-
       


     

       
308
       
-
       
    prop.value++;

     

       
309
       
-
       
    await query$;

     

       
310
       
-
       
    expect(executeQuery).toHaveBeenCalledTimes(2);

     

       
311
       
-
       
    expect(query$.operation.value).toHaveProperty('variables.prop', 2);

     

       
312
       
-
       


     

       
313
       
-
       
    prop2.value++;

     

       
314
       
-
       
    await query$;

     

       
315
       
-
       
    expect(executeQuery).toHaveBeenCalledTimes(3);

     

       
316
       
-
       
    expect(query$.operation.value).toHaveProperty(

     

       
317
       
-
       
      'variables.deep.nested.prop2',

     

       
318
       
 
       
      2

     

       
319
       
 
       
    );

     

       
320
       
 
       
  });

     

···

       
120
       
 
       
    );

     

       
121
       
 
       
  });

     

       
122
       
 
       


     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
123
       
 
       
  it('reacts to ref variables changing', async () => {

     

       
124
       
 
       
    const variables = ref({ prop: 1 });

     

       
125
       
 
       


     
···

       
143
       
 
       
    expect(query$.operation.value).toHaveProperty('variables.prop', 3);

     

       
144
       
 
       
  });

     

       
145
       
 
       


     

       
146
       
+
       
  it('reacts to ref variables changing', async () => {

     

       
147
       
+
       
    const foo = ref(1);

     

       
148
       
+
       
    const bar = ref(1);

     

       
149
       
 
       


     

       
150
       
 
       
    const { executeQuery, query$ } = createQuery({

     

       
151
       
 
       
      query: ref('{ test }'),

     

       
152
       
+
       
      variables: ref({

     

       
153
       
+
       
        prop: foo,

     

       
154
       
+
       
        nested: {

     

       
155
       
+
       
          prop: bar,

     

       
156
       
+
       
        },

     

       
157
       
+
       
      }),

     

       
158
       
 
       
    });

     

       
159
       
 
       


     

       
160
       
 
       
    await query$;

     

       
161
       
 
       
    expect(executeQuery).toHaveBeenCalledTimes(1);

     

       
162
       
 
       
    expect(query$.operation.value).toHaveProperty('variables.prop', 1);

     

       
163
       
 
       


     

       
164
       
+
       
    foo.value++;

     

       
165
       
 
       
    await query$;

     

       
166
       
 
       
    expect(executeQuery).toHaveBeenCalledTimes(2);

     

       
167
       
 
       
    expect(query$.operation.value).toHaveProperty('variables.prop', 2);

     

       
168
       
+
       


     

       
169
       
+
       
    bar.value++;

     

       
170
       
+
       
    await query$;

     

       
171
       
+
       
    expect(executeQuery).toHaveBeenCalledTimes(3);

     

       
172
       
+
       
    expect(query$.operation.value).toHaveProperty('variables.nested.prop', 2);

     

       
173
       
 
       
  });

     

       
174
       
 
       


     

       
175
       
+
       
  it('reacts to getter variables changing', async () => {

     

       
176
       
+
       
    const foo = ref(1);

     

       
177
       
+
       
    const bar = ref(1);

     

       
178
       
 
       


     

       
179
       
 
       
    const { executeQuery, query$ } = createQuery({

     

       
180
       
 
       
      query: ref('{ test }'),

     

       
181
       
+
       
      variables: () => ({

     

       
182
       
+
       
        prop: foo.value,

     

       
183
       
+
       
        nested: {

     

       
184
       
+
       
          prop: bar.value,

     

       
185
       
+
       
        },

     

       
186
       
+
       
      }),

     

       
187
       
 
       
    });

     

       
188
       
 
       


     

       
189
       
 
       
    await query$;

     

       
190
       
 
       
    expect(executeQuery).toHaveBeenCalledTimes(1);

     

       
191
       
+
       
    expect(query$.operation.value).toHaveProperty('variables.prop', 1);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
192
       
 
       


     

       
193
       
+
       
    foo.value++;

     

       
194
       
 
       
    await query$;

     

       
195
       
 
       
    expect(executeQuery).toHaveBeenCalledTimes(2);

     

       
196
       
+
       
    expect(query$.operation.value).toHaveProperty('variables.prop', 2);

     

       
197
       
+
       


     

       
198
       
+
       
    bar.value++;

     

       
199
       
+
       
    await query$;

     

       
200
       
+
       
    expect(executeQuery).toHaveBeenCalledTimes(3);

     

       
201
       
+
       
    expect(query$.operation.value).toHaveProperty('variables.nested.prop', 2);

     

       
202
       
 
       
  });

     

       
203
       
 
       


     

       
204
       
 
       
  it('reacts to reactive variables changing', async () => {

     
···

       
229
       
 
       
  });

     

       
230
       
 
       


     

       
231
       
 
       
  it('reacts to computed variables changing', async () => {

     

       
232
       
+
       
    const foo = ref(1);

     

       
233
       
+
       
    const bar = ref(1);

     

       
234
       
 
       
    const variables = computed(() => ({

     

       
235
       
+
       
      prop: foo.value,

     

       
236
       
+
       
      deep: { nested: { prop: bar.value } },

     

       
237
       
 
       
    }));

     

       
238
       
 
       


     

       
239
       
 
       
    const { executeQuery, query$ } = createQuery({

     
···

       
245
       
 
       
    expect(executeQuery).toHaveBeenCalledTimes(1);

     

       
246
       
 
       
    expect(query$.operation.value).toHaveProperty('variables.prop', 1);

     

       
247
       
 
       


     

       
248
       
+
       
    foo.value++;

     

       
249
       
 
       
    await query$;

     

       
250
       
 
       
    expect(executeQuery).toHaveBeenCalledTimes(2);

     

       
251
       
 
       
    expect(query$.operation.value).toHaveProperty('variables.prop', 2);

     

       
252
       
 
       


     

       
253
       
+
       
    bar.value++;

     

       
254
       
 
       
    await query$;

     

       
255
       
 
       
    expect(executeQuery).toHaveBeenCalledTimes(3);

     

       
256
       
 
       
    expect(query$.operation.value).toHaveProperty(

     

       
257
       
+
       
      'variables.deep.nested.prop',

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
258
       
 
       
      2

     

       
259
       
 
       
    );

     

       
260
       
 
       
  });

     

···

       
18
       
 
       


     

       
19
       
 
       
import { useClient } from './useClient';

     

       
20
       
 
       


     

       
21
       
-
       
import type { MaybeRef, MaybeRefObj } from './utils';

     

       
22
       
 
       
import { useRequestState, useClientState } from './utils';

     

       
23
       
 
       


     

       
24
       
 
       
/** Input arguments for the {@link useQuery} function.

     
···

       
42
       
 
       
   *

     

       
43
       
 
       
   * @see {@link OperationContext.requestPolicy} for where this value is set.

     

       
44
       
 
       
   */

     

       
45
       
-
       
  requestPolicy?: MaybeRef<RequestPolicy>;

     

       
46
       
 
       
  /** Updates the {@link OperationContext} for the executed GraphQL query operation.

     

       
47
       
 
       
   *

     

       
48
       
 
       
   * @remarks

     
···

       
60
       
 
       
   * });

     

       
61
       
 
       
   * ```

     

       
62
       
 
       
   */

     

       
63
       
-
       
  context?: MaybeRef<Partial<OperationContext>>;

     

       
64
       
 
       
  /** Prevents {@link useQuery} from automatically executing GraphQL query operations.

     

       
65
       
 
       
   *

     

       
66
       
 
       
   * @remarks

     
···

       
72
       
 
       
   * @see {@link https://urql.dev/goto/docs/basics/vue#pausing-usequery} for

     

       
73
       
 
       
   * documentation on the `pause` option.

     

       
74
       
 
       
   */

     

       
75
       
-
       
  pause?: MaybeRef<boolean>;

     

       
76
       
-
       
} & MaybeRefObj<GraphQLRequestParams<Data, MaybeRefObj<Variables>>>;

     

       
77
       
 
       


     

       
78
       
 
       
/** State of the current query, your {@link useQuery} function is executing.

     

       
79
       
 
       
 *

     
···

       
246
       
 
       
  const { fetching, operation, extensions, stale, error, hasNext } =

     

       
247
       
 
       
    useRequestState<T, V>();

     

       
248
       
 
       


     

       
249
       
-
       
  const { isPaused, source, pause, resume, execute, teardown } = useClientState(

     

       
250
       
-
       
    args,

     

       
251
       
-
       
    client,

     

       
252
       
-
       
    'executeQuery'

     

       
253
       
-
       
  );

     

       
254
       
 
       


     

       
255
       
 
       
  const teardownQuery = watchEffect(

     

       
256
       
 
       
    onInvalidate => {

     

···

       
18
       
 
       


     

       
19
       
 
       
import { useClient } from './useClient';

     

       
20
       
 
       


     

       
21
       
+
       
import type { MaybeRefOrGetter, MaybeRefOrGetterObj } from './utils';

     

       
22
       
 
       
import { useRequestState, useClientState } from './utils';

     

       
23
       
 
       


     

       
24
       
 
       
/** Input arguments for the {@link useQuery} function.

     
···

       
42
       
 
       
   *

     

       
43
       
 
       
   * @see {@link OperationContext.requestPolicy} for where this value is set.

     

       
44
       
 
       
   */

     

       
45
       
+
       
  requestPolicy?: MaybeRefOrGetter<RequestPolicy>;

     

       
46
       
 
       
  /** Updates the {@link OperationContext} for the executed GraphQL query operation.

     

       
47
       
 
       
   *

     

       
48
       
 
       
   * @remarks

     
···

       
60
       
 
       
   * });

     

       
61
       
 
       
   * ```

     

       
62
       
 
       
   */

     

       
63
       
+
       
  context?: MaybeRefOrGetter<Partial<OperationContext>>;

     

       
64
       
 
       
  /** Prevents {@link useQuery} from automatically executing GraphQL query operations.

     

       
65
       
 
       
   *

     

       
66
       
 
       
   * @remarks

     
···

       
72
       
 
       
   * @see {@link https://urql.dev/goto/docs/basics/vue#pausing-usequery} for

     

       
73
       
 
       
   * documentation on the `pause` option.

     

       
74
       
 
       
   */

     

       
75
       
+
       
  pause?: MaybeRefOrGetter<boolean>;

     

       
76
       
+
       
} & MaybeRefOrGetterObj<GraphQLRequestParams<Data, Variables>>;

     

       
77
       
 
       


     

       
78
       
 
       
/** State of the current query, your {@link useQuery} function is executing.

     

       
79
       
 
       
 *

     
···

       
246
       
 
       
  const { fetching, operation, extensions, stale, error, hasNext } =

     

       
247
       
 
       
    useRequestState<T, V>();

     

       
248
       
 
       


     

       
249
       
+
       
  const { isPaused, source, pause, resume, execute, teardown } = useClientState<

     

       
250
       
+
       
    T,

     

       
251
       
+
       
    V

     

       
252
       
+
       
  >(args, client, 'executeQuery');

     

       
0
       
 
       

     

       
253
       
 
       


     

       
254
       
 
       
  const teardownQuery = watchEffect(

     

       
255
       
 
       
    onInvalidate => {

     

···

       
16
       
 
       


     

       
17
       
 
       
import { useClient } from './useClient';

     

       
18
       
 
       


     

       
19
       
-
       
import type { MaybeRef, MaybeRefObj } from './utils';

     

       
20
       
 
       
import { useRequestState, useClientState } from './utils';

     

       
21
       
 
       


     

       
22
       
 
       
/** Input arguments for the {@link useSubscription} function.

     
···

       
36
       
 
       
   * {@link UseSubscriptionResponse.resume} is called, or, if `pause` is a reactive

     

       
37
       
 
       
   * ref of a boolean, until this ref changes to `true`.

     

       
38
       
 
       
   */

     

       
39
       
-
       
  pause?: MaybeRef<boolean>;

     

       
40
       
 
       
  /** Updates the {@link OperationContext} for the executed GraphQL subscription operation.

     

       
41
       
 
       
   *

     

       
42
       
 
       
   * @remarks

     
···

       
54
       
 
       
   * });

     

       
55
       
 
       
   * ```

     

       
56
       
 
       
   */

     

       
57
       
-
       
  context?: MaybeRef<Partial<OperationContext>>;

     

       
58
       
-
       
} & MaybeRefObj<GraphQLRequestParams<Data, MaybeRefObj<Variables>>>;

     

       
59
       
 
       


     

       
60
       
 
       
/** Combines previous data with an incoming subscription result’s data.

     

       
61
       
 
       
 *

     
···

       
246
       
 
       
    V

     

       
247
       
 
       
  >();

     

       
248
       
 
       


     

       
249
       
-
       
  const { isPaused, source, pause, resume, execute, teardown } = useClientState(

     

       
250
       
-
       
    args,

     

       
251
       
-
       
    client,

     

       
252
       
-
       
    'executeSubscription'

     

       
253
       
-
       
  );

     

       
254
       
 
       


     

       
255
       
 
       
  const teardownSubscription = watchEffect(onInvalidate => {

     

       
256
       
 
       
    if (source.value) {

     

···

       
16
       
 
       


     

       
17
       
 
       
import { useClient } from './useClient';

     

       
18
       
 
       


     

       
19
       
+
       
import type { MaybeRefOrGetter, MaybeRefOrGetterObj } from './utils';

     

       
20
       
 
       
import { useRequestState, useClientState } from './utils';

     

       
21
       
 
       


     

       
22
       
 
       
/** Input arguments for the {@link useSubscription} function.

     
···

       
36
       
 
       
   * {@link UseSubscriptionResponse.resume} is called, or, if `pause` is a reactive

     

       
37
       
 
       
   * ref of a boolean, until this ref changes to `true`.

     

       
38
       
 
       
   */

     

       
39
       
+
       
  pause?: MaybeRefOrGetter<boolean>;

     

       
40
       
 
       
  /** Updates the {@link OperationContext} for the executed GraphQL subscription operation.

     

       
41
       
 
       
   *

     

       
42
       
 
       
   * @remarks

     
···

       
54
       
 
       
   * });

     

       
55
       
 
       
   * ```

     

       
56
       
 
       
   */

     

       
57
       
+
       
  context?: MaybeRefOrGetter<Partial<OperationContext>>;

     

       
58
       
+
       
} & MaybeRefOrGetterObj<GraphQLRequestParams<Data, Variables>>;

     

       
59
       
 
       


     

       
60
       
 
       
/** Combines previous data with an incoming subscription result’s data.

     

       
61
       
 
       
 *

     
···

       
246
       
 
       
    V

     

       
247
       
 
       
  >();

     

       
248
       
 
       


     

       
249
       
+
       
  const { isPaused, source, pause, resume, execute, teardown } = useClientState<

     

       
250
       
+
       
    T,

     

       
251
       
+
       
    V

     

       
252
       
+
       
  >(args, client, 'executeSubscription');

     

       
0
       
 
       

     

       
253
       
 
       


     

       
254
       
 
       
  const teardownSubscription = watchEffect(onInvalidate => {

     

       
255
       
 
       
    if (source.value) {

     

···

       
3
       
 
       
  Client,

     

       
4
       
 
       
  CombinedError,

     

       
5
       
 
       
  DocumentInput,

     

       
0
       
 
       

     

       
6
       
 
       
  Operation,

     

       
7
       
 
       
  OperationContext,

     

       
8
       
 
       
  OperationResult,

     

       
9
       
 
       
  OperationResultSource,

     

       
10
       
 
       
} from '@urql/core';

     

       
11
       
 
       
import { createRequest } from '@urql/core';

     

       
12
       
-
       
import type { Ref } from 'vue';

     

       
13
       
 
       
import { watchEffect, isReadonly, computed, ref, shallowRef, isRef } from 'vue';

     

       
14
       
 
       
import type { UseSubscriptionArgs } from './useSubscription';

     

       
15
       
 
       
import type { UseQueryArgs } from './useQuery';

     

       
16
       
 
       


     

       
17
       
-
       
export type MaybeRef<T> = T | (() => T) | Ref<T>;

     

       
18
       
-
       
export type MaybeRefObj<T> = T extends {}

     

       
19
       
-
       
  ? { [K in keyof T]: MaybeRef<T[K]> }

     

       
20
       
-
       
  : T;

     

       
21
       
-
       


     

       
22
       
-
       
const unwrap = <T>(maybeRef: MaybeRef<T>): T =>

     

       
23
       
-
       
  typeof maybeRef === 'function'

     

       
24
       
-
       
    ? (maybeRef as () => T)()

     

       
25
       
-
       
    : maybeRef != null && isRef(maybeRef)

     

       
26
       
-
       
      ? maybeRef.value

     

       
27
       
-
       
      : maybeRef;

     

       
28
       
-
       


     

       
29
       
-
       
const isPlainObject = (value: any): boolean => {

     

       
30
       
-
       
  if (typeof value !== 'object' || value === null) return false;

     

       
31
       
-
       
  return (

     

       
32
       
-
       
    value.constructor &&

     

       
33
       
-
       
    Object.getPrototypeOf(value).constructor === Object.prototype.constructor

     

       
34
       
-
       
  );

     

       
35
       
-
       
};

     

       
36
       
-
       
export const isArray = Array.isArray;

     

       
37
       
 
       


     

       
38
       
-
       
const unwrapDeeply = <T>(input: T): T => {

     

       
39
       
-
       
  input = isRef(input) ? (input.value as T) : input;

     

       
40
       
 
       


     

       
41
       
-
       
  if (typeof input === 'function') {

     

       
42
       
-
       
    return unwrapDeeply(input()) as T;

     

       
43
       
-
       
  }

     

       
44
       
-
       


     

       
45
       
-
       
  if (input && typeof input === 'object') {

     

       
46
       
-
       
    if (isArray(input)) {

     

       
47
       
-
       
      const length = input.length;

     

       
48
       
-
       
      const out = new Array(length) as T;

     

       
49
       
-
       
      let i = 0;

     

       
50
       
-
       
      for (; i < length; i++) {

     

       
51
       
-
       
        out[i] = unwrapDeeply(input[i]);

     

       
52
       
-
       
      }

     

       
53
       
-
       


     

       
54
       
-
       
      return out;

     

       
55
       
-
       
    } else if (isPlainObject(input)) {

     

       
56
       
-
       
      const keys = Object.keys(input);

     

       
57
       
-
       
      const length = keys.length;

     

       
58
       
-
       
      let i = 0;

     

       
59
       
-
       
      let key: string;

     

       
60
       
-
       
      const out = {} as T;

     

       
61
       
-
       


     

       
62
       
-
       
      for (; i < length; i++) {

     

       
63
       
-
       
        key = keys[i];

     

       
64
       
-
       
        out[key] = unwrapDeeply(input[key]);

     

       
65
       
-
       
      }

     

       
66
       
-
       


     

       
67
       
-
       
      return out;

     

       
68
       
-
       
    }

     

       
69
       
-
       
  }

     

       
70
       
-
       


     

       
71
       
-
       
  return input;

     

       
72
       
-
       
};

     

       
73
       
 
       


     

       
74
       
 
       
export const createRequestWithArgs = <

     

       
75
       
 
       
  T = any,

     
···

       
78
       
 
       
  args:

     

       
79
       
 
       
    | UseQueryArgs<T, V>

     

       
80
       
 
       
    | UseSubscriptionArgs<T, V>

     

       
81
       
-
       
    | { query: MaybeRef<DocumentInput<T, V>>; variables: V }

     

       
82
       
-
       
) => {

     

       
0
       
 
       

     

       
83
       
 
       
  return createRequest<T, V>(

     

       
84
       
-
       
    unwrap(args.query),

     

       
85
       
-
       
    unwrapDeeply(args.variables) as V

     

       
86
       
 
       
  );

     

       
87
       
 
       
};

     

       
88
       
 
       


     
···

       
120
       
 
       
      ? computed(args.pause)

     

       
121
       
 
       
      : ref(!!args.pause);

     

       
122
       
 
       


     

       
123
       
-
       
  const request = computed(() => createRequestWithArgs(args));

     

       
124
       
 
       


     

       
125
       
 
       
  const requestOptions = computed(() => {

     

       
126
       
 
       
    return 'requestPolicy' in args

     

       
127
       
 
       
      ? {

     

       
128
       
-
       
          requestPolicy: unwrap(args.requestPolicy),

     

       
129
       
-
       
          ...unwrap(args.context),

     

       
130
       
 
       
        }

     

       
131
       
 
       
      : {

     

       
132
       
-
       
          ...unwrap(args.context),

     

       
133
       
 
       
        };

     

       
134
       
 
       
  });

     

       
135
       
 
       


     

···

       
3
       
 
       
  Client,

     

       
4
       
 
       
  CombinedError,

     

       
5
       
 
       
  DocumentInput,

     

       
6
       
+
       
  GraphQLRequest,

     

       
7
       
 
       
  Operation,

     

       
8
       
 
       
  OperationContext,

     

       
9
       
 
       
  OperationResult,

     

       
10
       
 
       
  OperationResultSource,

     

       
11
       
 
       
} from '@urql/core';

     

       
12
       
 
       
import { createRequest } from '@urql/core';

     

       
13
       
+
       
import { type Ref, unref } from 'vue';

     

       
14
       
 
       
import { watchEffect, isReadonly, computed, ref, shallowRef, isRef } from 'vue';

     

       
15
       
 
       
import type { UseSubscriptionArgs } from './useSubscription';

     

       
16
       
 
       
import type { UseQueryArgs } from './useQuery';

     

       
17
       
 
       


     

       
18
       
+
       
export type MaybeRefOrGetter<T> = T | (() => T) | Ref<T>;

     

       
19
       
+
       
export type MaybeRefOrGetterObj<T extends {}> =

     

       
20
       
+
       
  T extends Record<string, never>

     

       
21
       
+
       
    ? T

     

       
22
       
+
       
    : { [K in keyof T]: MaybeRefOrGetter<T[K]> };

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
23
       
 
       


     

       
24
       
+
       
const isFunction = <T>(val: MaybeRefOrGetter<T>): val is () => T =>

     

       
25
       
+
       
  typeof val === 'function';

     

       
26
       
 
       


     

       
27
       
+
       
const toValue = <T>(source: MaybeRefOrGetter<T>): T =>

     

       
28
       
+
       
  isFunction(source) ? source() : unref(source);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
29
       
 
       


     

       
30
       
 
       
export const createRequestWithArgs = <

     

       
31
       
 
       
  T = any,

     
···

       
34
       
 
       
  args:

     

       
35
       
 
       
    | UseQueryArgs<T, V>

     

       
36
       
 
       
    | UseSubscriptionArgs<T, V>

     

       
37
       
+
       
    | { query: MaybeRefOrGetter<DocumentInput<T, V>>; variables: V }

     

       
38
       
+
       
): GraphQLRequest<T, V> => {

     

       
39
       
+
       
  const _args = toValue(args);

     

       
40
       
 
       
  return createRequest<T, V>(

     

       
41
       
+
       
    toValue(_args.query),

     

       
42
       
+
       
    toValue(_args.variables as MaybeRefOrGetter<V>)

     

       
43
       
 
       
  );

     

       
44
       
 
       
};

     

       
45
       
 
       


     
···

       
77
       
 
       
      ? computed(args.pause)

     

       
78
       
 
       
      : ref(!!args.pause);

     

       
79
       
 
       


     

       
80
       
+
       
  const request = computed(() => createRequestWithArgs<T, V>(args));

     

       
81
       
 
       


     

       
82
       
 
       
  const requestOptions = computed(() => {

     

       
83
       
 
       
    return 'requestPolicy' in args

     

       
84
       
 
       
      ? {

     

       
85
       
+
       
          requestPolicy: toValue(args.requestPolicy),

     

       
86
       
+
       
          ...toValue(args.context),

     

       
87
       
 
       
        }

     

       
88
       
 
       
      : {

     

       
89
       
+
       
          ...toValue(args.context),

     

       
90
       
 
       
        };

     

       
91
       
 
       
  });

     

       
92