@apollo/client 4.2.0-alpha.2 → 4.2.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +61 -0
- package/__cjs/core/ApolloClient.cjs +9 -9
- package/__cjs/core/ApolloClient.cjs.map +1 -1
- package/__cjs/core/ApolloClient.d.cts +131 -21
- package/__cjs/link/ws/index.cjs +9 -1
- package/__cjs/link/ws/index.cjs.map +1 -1
- package/__cjs/link/ws/index.d.cts +1 -1
- package/__cjs/react/hooks/useBackgroundQuery.cjs.map +1 -1
- package/__cjs/react/hooks/useBackgroundQuery.d.cts +1466 -65
- package/__cjs/react/hooks/useLazyQuery.cjs.map +1 -1
- package/__cjs/react/hooks/useLazyQuery.d.cts +346 -39
- package/__cjs/react/hooks/useLoadableQuery.cjs.map +1 -1
- package/__cjs/react/hooks/useLoadableQuery.d.cts +492 -49
- package/__cjs/react/hooks/useMutation.cjs +5 -48
- package/__cjs/react/hooks/useMutation.cjs.map +1 -1
- package/__cjs/react/hooks/useMutation.d.cts +239 -130
- package/__cjs/react/hooks/useQuery.cjs.map +1 -1
- package/__cjs/react/hooks/useQuery.d.cts +570 -40
- package/__cjs/react/hooks/useSubscription.cjs +1 -1
- package/__cjs/react/hooks/useSubscription.cjs.map +1 -1
- package/__cjs/react/hooks/useSubscription.d.cts +2 -2
- package/__cjs/react/hooks/useSuspenseQuery.cjs.map +1 -1
- package/__cjs/react/hooks/useSuspenseQuery.d.cts +734 -45
- package/__cjs/version.cjs +1 -1
- package/core/ApolloClient.d.ts +131 -21
- package/core/ApolloClient.js +9 -9
- package/core/ApolloClient.js.map +1 -1
- package/link/ws/index.d.ts +1 -1
- package/link/ws/index.js +9 -1
- package/link/ws/index.js.map +1 -1
- package/package.json +3 -7
- package/react/hooks/useBackgroundQuery.d.ts +1466 -65
- package/react/hooks/useBackgroundQuery.js.map +1 -1
- package/react/hooks/useLazyQuery.d.ts +346 -39
- package/react/hooks/useLazyQuery.js.map +1 -1
- package/react/hooks/useLoadableQuery.d.ts +492 -49
- package/react/hooks/useLoadableQuery.js.map +1 -1
- package/react/hooks/useMutation.d.ts +239 -130
- package/react/hooks/useMutation.js +5 -48
- package/react/hooks/useMutation.js.map +1 -1
- package/react/hooks/useQuery.d.ts +570 -40
- package/react/hooks/useQuery.js.map +1 -1
- package/react/hooks/useSubscription.d.ts +2 -2
- package/react/hooks/useSubscription.js +1 -1
- package/react/hooks/useSubscription.js.map +1 -1
- package/react/hooks/useSuspenseQuery.d.ts +734 -45
- package/react/hooks/useSuspenseQuery.js.map +1 -1
- package/react/hooks-compiled/useBackgroundQuery.d.ts +1466 -65
- package/react/hooks-compiled/useBackgroundQuery.js.map +1 -1
- package/react/hooks-compiled/useLazyQuery.d.ts +346 -39
- package/react/hooks-compiled/useLazyQuery.js.map +1 -1
- package/react/hooks-compiled/useLoadableQuery.d.ts +492 -49
- package/react/hooks-compiled/useLoadableQuery.js.map +1 -1
- package/react/hooks-compiled/useMutation.d.ts +239 -130
- package/react/hooks-compiled/useMutation.js +4 -47
- package/react/hooks-compiled/useMutation.js.map +1 -1
- package/react/hooks-compiled/useQuery.d.ts +570 -40
- package/react/hooks-compiled/useQuery.js.map +1 -1
- package/react/hooks-compiled/useSubscription.d.ts +2 -2
- package/react/hooks-compiled/useSubscription.js +1 -1
- package/react/hooks-compiled/useSubscription.js.map +1 -1
- package/react/hooks-compiled/useSuspenseQuery.d.ts +734 -45
- package/react/hooks-compiled/useSuspenseQuery.js.map +1 -1
- package/skills/apollo-client/SKILL.md +168 -0
- package/skills/apollo-client/references/caching.md +560 -0
- package/skills/apollo-client/references/error-handling.md +350 -0
- package/skills/apollo-client/references/fragments.md +804 -0
- package/skills/apollo-client/references/integration-client.md +336 -0
- package/skills/apollo-client/references/integration-nextjs.md +325 -0
- package/skills/apollo-client/references/integration-react-router.md +256 -0
- package/skills/apollo-client/references/integration-tanstack-start.md +378 -0
- package/skills/apollo-client/references/mutations.md +549 -0
- package/skills/apollo-client/references/queries.md +416 -0
- package/skills/apollo-client/references/state-management.md +428 -0
- package/skills/apollo-client/references/suspense-hooks.md +773 -0
- package/skills/apollo-client/references/troubleshooting.md +487 -0
- package/skills/apollo-client/references/typescript-codegen.md +133 -0
- package/version.js +1 -1
|
@@ -185,138 +185,789 @@ export declare namespace useSuspenseQuery {
|
|
|
185
185
|
}
|
|
186
186
|
}
|
|
187
187
|
namespace DocumentationTypes {
|
|
188
|
-
/**
|
|
189
|
-
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
190
|
-
*
|
|
191
|
-
* @example
|
|
192
|
-
*
|
|
193
|
-
* ```jsx
|
|
194
|
-
* import { Suspense } from "react";
|
|
195
|
-
* import { useSuspenseQuery } from "@apollo/client";
|
|
196
|
-
*
|
|
197
|
-
* const listQuery = gql`
|
|
198
|
-
* query {
|
|
199
|
-
* list {
|
|
200
|
-
* id
|
|
201
|
-
* }
|
|
202
|
-
* }
|
|
203
|
-
* `;
|
|
204
|
-
*
|
|
205
|
-
* function App() {
|
|
206
|
-
* return (
|
|
207
|
-
* <Suspense fallback={<Spinner />}>
|
|
208
|
-
* <List />
|
|
209
|
-
* </Suspense>
|
|
210
|
-
* );
|
|
211
|
-
* }
|
|
212
|
-
*
|
|
213
|
-
* function List() {
|
|
214
|
-
* const { data } = useSuspenseQuery(listQuery);
|
|
215
|
-
*
|
|
216
|
-
* return (
|
|
217
|
-
* <ol>
|
|
218
|
-
* {data.list.map((item) => (
|
|
219
|
-
* <Item key={item.id} id={item.id} />
|
|
220
|
-
* ))}
|
|
221
|
-
* </ol>
|
|
222
|
-
* );
|
|
223
|
-
* }
|
|
224
|
-
* ```
|
|
225
|
-
*
|
|
226
|
-
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
227
|
-
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
228
|
-
*/
|
|
229
188
|
interface useSuspenseQuery {
|
|
189
|
+
/**
|
|
190
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
191
|
+
*
|
|
192
|
+
* @example
|
|
193
|
+
*
|
|
194
|
+
* ```jsx
|
|
195
|
+
* import { Suspense } from "react";
|
|
196
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
197
|
+
*
|
|
198
|
+
* const listQuery = gql`
|
|
199
|
+
* query {
|
|
200
|
+
* list {
|
|
201
|
+
* id
|
|
202
|
+
* }
|
|
203
|
+
* }
|
|
204
|
+
* `;
|
|
205
|
+
*
|
|
206
|
+
* function App() {
|
|
207
|
+
* return (
|
|
208
|
+
* <Suspense fallback={<Spinner />}>
|
|
209
|
+
* <List />
|
|
210
|
+
* </Suspense>
|
|
211
|
+
* );
|
|
212
|
+
* }
|
|
213
|
+
*
|
|
214
|
+
* function List() {
|
|
215
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
216
|
+
*
|
|
217
|
+
* return (
|
|
218
|
+
* <ol>
|
|
219
|
+
* {data.list.map((item) => (
|
|
220
|
+
* <Item key={item.id} id={item.id} />
|
|
221
|
+
* ))}
|
|
222
|
+
* </ol>
|
|
223
|
+
* );
|
|
224
|
+
* }
|
|
225
|
+
* ```
|
|
226
|
+
*
|
|
227
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
228
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
229
|
+
*/
|
|
230
230
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: useSuspenseQuery.Options<TVariables>): useSuspenseQuery.Result<TData, TVariables>;
|
|
231
231
|
}
|
|
232
|
-
/**
|
|
233
|
-
* @deprecated Avoid manually specifying generic arguments on `useSuspenseQuery`.
|
|
234
|
-
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
235
|
-
*/
|
|
236
232
|
interface useSuspenseQuery_Deprecated {
|
|
233
|
+
/**
|
|
234
|
+
* @deprecated Avoid manually specifying generic arguments on `useSuspenseQuery`.
|
|
235
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
236
|
+
*
|
|
237
|
+
*
|
|
238
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
239
|
+
*
|
|
240
|
+
* @example
|
|
241
|
+
*
|
|
242
|
+
* ```jsx
|
|
243
|
+
* import { Suspense } from "react";
|
|
244
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
245
|
+
*
|
|
246
|
+
* const listQuery = gql`
|
|
247
|
+
* query {
|
|
248
|
+
* list {
|
|
249
|
+
* id
|
|
250
|
+
* }
|
|
251
|
+
* }
|
|
252
|
+
* `;
|
|
253
|
+
*
|
|
254
|
+
* function App() {
|
|
255
|
+
* return (
|
|
256
|
+
* <Suspense fallback={<Spinner />}>
|
|
257
|
+
* <List />
|
|
258
|
+
* </Suspense>
|
|
259
|
+
* );
|
|
260
|
+
* }
|
|
261
|
+
*
|
|
262
|
+
* function List() {
|
|
263
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
264
|
+
*
|
|
265
|
+
* return (
|
|
266
|
+
* <ol>
|
|
267
|
+
* {data.list.map((item) => (
|
|
268
|
+
* <Item key={item.id} id={item.id} />
|
|
269
|
+
* ))}
|
|
270
|
+
* </ol>
|
|
271
|
+
* );
|
|
272
|
+
* }
|
|
273
|
+
* ```
|
|
274
|
+
*
|
|
275
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
276
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
277
|
+
*/
|
|
237
278
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: useSuspenseQuery.Options<TVariables>): useSuspenseQuery.Result<TData, TVariables>;
|
|
238
279
|
}
|
|
239
280
|
}
|
|
240
281
|
namespace Signatures {
|
|
241
282
|
/**
|
|
283
|
+
* @deprecated Avoid manually specifying generic arguments on `useSuspenseQuery`.
|
|
284
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
285
|
+
*
|
|
286
|
+
*
|
|
287
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
288
|
+
*
|
|
289
|
+
* @example
|
|
290
|
+
*
|
|
291
|
+
* ```jsx
|
|
292
|
+
* import { Suspense } from "react";
|
|
293
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
242
294
|
*
|
|
295
|
+
* const listQuery = gql`
|
|
296
|
+
* query {
|
|
297
|
+
* list {
|
|
298
|
+
* id
|
|
299
|
+
* }
|
|
300
|
+
* }
|
|
301
|
+
* `;
|
|
302
|
+
*
|
|
303
|
+
* function App() {
|
|
304
|
+
* return (
|
|
305
|
+
* <Suspense fallback={<Spinner />}>
|
|
306
|
+
* <List />
|
|
307
|
+
* </Suspense>
|
|
308
|
+
* );
|
|
309
|
+
* }
|
|
310
|
+
*
|
|
311
|
+
* function List() {
|
|
312
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
313
|
+
*
|
|
314
|
+
* return (
|
|
315
|
+
* <ol>
|
|
316
|
+
* {data.list.map((item) => (
|
|
317
|
+
* <Item key={item.id} id={item.id} />
|
|
318
|
+
* ))}
|
|
319
|
+
* </ol>
|
|
320
|
+
* );
|
|
321
|
+
* }
|
|
322
|
+
* ```
|
|
323
|
+
*
|
|
324
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
325
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
243
326
|
*/
|
|
244
327
|
interface Classic {
|
|
245
328
|
/**
|
|
329
|
+
* @deprecated Avoid manually specifying generic arguments on `useSuspenseQuery`.
|
|
330
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
331
|
+
*
|
|
246
332
|
*
|
|
333
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
334
|
+
*
|
|
335
|
+
* @example
|
|
336
|
+
*
|
|
337
|
+
* ```jsx
|
|
338
|
+
* import { Suspense } from "react";
|
|
339
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
340
|
+
*
|
|
341
|
+
* const listQuery = gql`
|
|
342
|
+
* query {
|
|
343
|
+
* list {
|
|
344
|
+
* id
|
|
345
|
+
* }
|
|
346
|
+
* }
|
|
347
|
+
* `;
|
|
348
|
+
*
|
|
349
|
+
* function App() {
|
|
350
|
+
* return (
|
|
351
|
+
* <Suspense fallback={<Spinner />}>
|
|
352
|
+
* <List />
|
|
353
|
+
* </Suspense>
|
|
354
|
+
* );
|
|
355
|
+
* }
|
|
356
|
+
*
|
|
357
|
+
* function List() {
|
|
358
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
359
|
+
*
|
|
360
|
+
* return (
|
|
361
|
+
* <ol>
|
|
362
|
+
* {data.list.map((item) => (
|
|
363
|
+
* <Item key={item.id} id={item.id} />
|
|
364
|
+
* ))}
|
|
365
|
+
* </ol>
|
|
366
|
+
* );
|
|
367
|
+
* }
|
|
368
|
+
* ```
|
|
369
|
+
*
|
|
370
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
371
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
247
372
|
*/
|
|
248
373
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useSuspenseQuery.Options<NoInfer<TVariables>> & {
|
|
249
374
|
returnPartialData: true;
|
|
250
375
|
errorPolicy: "ignore" | "all";
|
|
251
376
|
}): useSuspenseQuery.Result<TData, TVariables, "complete" | "streaming" | "partial" | "empty">;
|
|
252
377
|
/**
|
|
378
|
+
* @deprecated Avoid manually specifying generic arguments on `useSuspenseQuery`.
|
|
379
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
380
|
+
*
|
|
253
381
|
*
|
|
382
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
383
|
+
*
|
|
384
|
+
* @example
|
|
385
|
+
*
|
|
386
|
+
* ```jsx
|
|
387
|
+
* import { Suspense } from "react";
|
|
388
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
389
|
+
*
|
|
390
|
+
* const listQuery = gql`
|
|
391
|
+
* query {
|
|
392
|
+
* list {
|
|
393
|
+
* id
|
|
394
|
+
* }
|
|
395
|
+
* }
|
|
396
|
+
* `;
|
|
397
|
+
*
|
|
398
|
+
* function App() {
|
|
399
|
+
* return (
|
|
400
|
+
* <Suspense fallback={<Spinner />}>
|
|
401
|
+
* <List />
|
|
402
|
+
* </Suspense>
|
|
403
|
+
* );
|
|
404
|
+
* }
|
|
405
|
+
*
|
|
406
|
+
* function List() {
|
|
407
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
408
|
+
*
|
|
409
|
+
* return (
|
|
410
|
+
* <ol>
|
|
411
|
+
* {data.list.map((item) => (
|
|
412
|
+
* <Item key={item.id} id={item.id} />
|
|
413
|
+
* ))}
|
|
414
|
+
* </ol>
|
|
415
|
+
* );
|
|
416
|
+
* }
|
|
417
|
+
* ```
|
|
418
|
+
*
|
|
419
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
420
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
254
421
|
*/
|
|
255
422
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useSuspenseQuery.Options<NoInfer<TVariables>> & {
|
|
256
423
|
errorPolicy: "ignore" | "all";
|
|
257
424
|
}): useSuspenseQuery.Result<TData, TVariables, "complete" | "streaming" | "empty">;
|
|
258
425
|
/**
|
|
426
|
+
* @deprecated Avoid manually specifying generic arguments on `useSuspenseQuery`.
|
|
427
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
428
|
+
*
|
|
429
|
+
*
|
|
430
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
259
431
|
*
|
|
432
|
+
* @example
|
|
433
|
+
*
|
|
434
|
+
* ```jsx
|
|
435
|
+
* import { Suspense } from "react";
|
|
436
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
437
|
+
*
|
|
438
|
+
* const listQuery = gql`
|
|
439
|
+
* query {
|
|
440
|
+
* list {
|
|
441
|
+
* id
|
|
442
|
+
* }
|
|
443
|
+
* }
|
|
444
|
+
* `;
|
|
445
|
+
*
|
|
446
|
+
* function App() {
|
|
447
|
+
* return (
|
|
448
|
+
* <Suspense fallback={<Spinner />}>
|
|
449
|
+
* <List />
|
|
450
|
+
* </Suspense>
|
|
451
|
+
* );
|
|
452
|
+
* }
|
|
453
|
+
*
|
|
454
|
+
* function List() {
|
|
455
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
456
|
+
*
|
|
457
|
+
* return (
|
|
458
|
+
* <ol>
|
|
459
|
+
* {data.list.map((item) => (
|
|
460
|
+
* <Item key={item.id} id={item.id} />
|
|
461
|
+
* ))}
|
|
462
|
+
* </ol>
|
|
463
|
+
* );
|
|
464
|
+
* }
|
|
465
|
+
* ```
|
|
466
|
+
*
|
|
467
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
468
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
260
469
|
*/
|
|
261
470
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useSuspenseQuery.Options<NoInfer<TVariables>> & {
|
|
262
471
|
skip: boolean;
|
|
263
472
|
returnPartialData: true;
|
|
264
473
|
}): useSuspenseQuery.Result<TData, TVariables, "complete" | "empty" | "streaming" | "partial">;
|
|
265
474
|
/**
|
|
475
|
+
* @deprecated Avoid manually specifying generic arguments on `useSuspenseQuery`.
|
|
476
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
477
|
+
*
|
|
478
|
+
*
|
|
479
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
266
480
|
*
|
|
481
|
+
* @example
|
|
482
|
+
*
|
|
483
|
+
* ```jsx
|
|
484
|
+
* import { Suspense } from "react";
|
|
485
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
486
|
+
*
|
|
487
|
+
* const listQuery = gql`
|
|
488
|
+
* query {
|
|
489
|
+
* list {
|
|
490
|
+
* id
|
|
491
|
+
* }
|
|
492
|
+
* }
|
|
493
|
+
* `;
|
|
494
|
+
*
|
|
495
|
+
* function App() {
|
|
496
|
+
* return (
|
|
497
|
+
* <Suspense fallback={<Spinner />}>
|
|
498
|
+
* <List />
|
|
499
|
+
* </Suspense>
|
|
500
|
+
* );
|
|
501
|
+
* }
|
|
502
|
+
*
|
|
503
|
+
* function List() {
|
|
504
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
505
|
+
*
|
|
506
|
+
* return (
|
|
507
|
+
* <ol>
|
|
508
|
+
* {data.list.map((item) => (
|
|
509
|
+
* <Item key={item.id} id={item.id} />
|
|
510
|
+
* ))}
|
|
511
|
+
* </ol>
|
|
512
|
+
* );
|
|
513
|
+
* }
|
|
514
|
+
* ```
|
|
515
|
+
*
|
|
516
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
517
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
267
518
|
*/
|
|
268
519
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useSuspenseQuery.Options<NoInfer<TVariables>> & {
|
|
269
520
|
returnPartialData: true;
|
|
270
521
|
}): useSuspenseQuery.Result<TData, TVariables, "partial" | "streaming" | "complete">;
|
|
271
522
|
/**
|
|
523
|
+
* @deprecated Avoid manually specifying generic arguments on `useSuspenseQuery`.
|
|
524
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
525
|
+
*
|
|
526
|
+
*
|
|
527
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
272
528
|
*
|
|
529
|
+
* @example
|
|
530
|
+
*
|
|
531
|
+
* ```jsx
|
|
532
|
+
* import { Suspense } from "react";
|
|
533
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
534
|
+
*
|
|
535
|
+
* const listQuery = gql`
|
|
536
|
+
* query {
|
|
537
|
+
* list {
|
|
538
|
+
* id
|
|
539
|
+
* }
|
|
540
|
+
* }
|
|
541
|
+
* `;
|
|
542
|
+
*
|
|
543
|
+
* function App() {
|
|
544
|
+
* return (
|
|
545
|
+
* <Suspense fallback={<Spinner />}>
|
|
546
|
+
* <List />
|
|
547
|
+
* </Suspense>
|
|
548
|
+
* );
|
|
549
|
+
* }
|
|
550
|
+
*
|
|
551
|
+
* function List() {
|
|
552
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
553
|
+
*
|
|
554
|
+
* return (
|
|
555
|
+
* <ol>
|
|
556
|
+
* {data.list.map((item) => (
|
|
557
|
+
* <Item key={item.id} id={item.id} />
|
|
558
|
+
* ))}
|
|
559
|
+
* </ol>
|
|
560
|
+
* );
|
|
561
|
+
* }
|
|
562
|
+
* ```
|
|
563
|
+
*
|
|
564
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
565
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
273
566
|
*/
|
|
274
567
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useSuspenseQuery.Options<NoInfer<TVariables>> & {
|
|
275
568
|
skip: boolean;
|
|
276
569
|
}): useSuspenseQuery.Result<TData, TVariables, "complete" | "streaming" | "empty">;
|
|
277
570
|
/**
|
|
571
|
+
* @deprecated Avoid manually specifying generic arguments on `useSuspenseQuery`.
|
|
572
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
573
|
+
*
|
|
574
|
+
*
|
|
575
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
278
576
|
*
|
|
577
|
+
* @example
|
|
578
|
+
*
|
|
579
|
+
* ```jsx
|
|
580
|
+
* import { Suspense } from "react";
|
|
581
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
582
|
+
*
|
|
583
|
+
* const listQuery = gql`
|
|
584
|
+
* query {
|
|
585
|
+
* list {
|
|
586
|
+
* id
|
|
587
|
+
* }
|
|
588
|
+
* }
|
|
589
|
+
* `;
|
|
590
|
+
*
|
|
591
|
+
* function App() {
|
|
592
|
+
* return (
|
|
593
|
+
* <Suspense fallback={<Spinner />}>
|
|
594
|
+
* <List />
|
|
595
|
+
* </Suspense>
|
|
596
|
+
* );
|
|
597
|
+
* }
|
|
598
|
+
*
|
|
599
|
+
* function List() {
|
|
600
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
601
|
+
*
|
|
602
|
+
* return (
|
|
603
|
+
* <ol>
|
|
604
|
+
* {data.list.map((item) => (
|
|
605
|
+
* <Item key={item.id} id={item.id} />
|
|
606
|
+
* ))}
|
|
607
|
+
* </ol>
|
|
608
|
+
* );
|
|
609
|
+
* }
|
|
610
|
+
* ```
|
|
611
|
+
*
|
|
612
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
613
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
279
614
|
*/
|
|
280
615
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: SkipToken | (useSuspenseQuery.Options<NoInfer<TVariables>> & {
|
|
281
616
|
returnPartialData: true;
|
|
282
617
|
})): useSuspenseQuery.Result<TData, TVariables, "empty" | "streaming" | "complete" | "partial">;
|
|
283
618
|
/**
|
|
619
|
+
* @deprecated Avoid manually specifying generic arguments on `useSuspenseQuery`.
|
|
620
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
621
|
+
*
|
|
622
|
+
*
|
|
623
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
624
|
+
*
|
|
625
|
+
* @example
|
|
284
626
|
*
|
|
627
|
+
* ```jsx
|
|
628
|
+
* import { Suspense } from "react";
|
|
629
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
630
|
+
*
|
|
631
|
+
* const listQuery = gql`
|
|
632
|
+
* query {
|
|
633
|
+
* list {
|
|
634
|
+
* id
|
|
635
|
+
* }
|
|
636
|
+
* }
|
|
637
|
+
* `;
|
|
638
|
+
*
|
|
639
|
+
* function App() {
|
|
640
|
+
* return (
|
|
641
|
+
* <Suspense fallback={<Spinner />}>
|
|
642
|
+
* <List />
|
|
643
|
+
* </Suspense>
|
|
644
|
+
* );
|
|
645
|
+
* }
|
|
646
|
+
*
|
|
647
|
+
* function List() {
|
|
648
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
649
|
+
*
|
|
650
|
+
* return (
|
|
651
|
+
* <ol>
|
|
652
|
+
* {data.list.map((item) => (
|
|
653
|
+
* <Item key={item.id} id={item.id} />
|
|
654
|
+
* ))}
|
|
655
|
+
* </ol>
|
|
656
|
+
* );
|
|
657
|
+
* }
|
|
658
|
+
* ```
|
|
659
|
+
*
|
|
660
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
661
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
285
662
|
*/
|
|
286
663
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, ...[options]: {} extends TVariables ? [
|
|
287
664
|
options?: useSuspenseQuery.Options<NoInfer<TVariables>>
|
|
288
665
|
] : [options: useSuspenseQuery.Options<NoInfer<TVariables>>]): useSuspenseQuery.Result<TData, TVariables, "complete" | "streaming">;
|
|
289
666
|
/**
|
|
667
|
+
* @deprecated Avoid manually specifying generic arguments on `useSuspenseQuery`.
|
|
668
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
669
|
+
*
|
|
670
|
+
*
|
|
671
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
672
|
+
*
|
|
673
|
+
* @example
|
|
290
674
|
*
|
|
675
|
+
* ```jsx
|
|
676
|
+
* import { Suspense } from "react";
|
|
677
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
678
|
+
*
|
|
679
|
+
* const listQuery = gql`
|
|
680
|
+
* query {
|
|
681
|
+
* list {
|
|
682
|
+
* id
|
|
683
|
+
* }
|
|
684
|
+
* }
|
|
685
|
+
* `;
|
|
686
|
+
*
|
|
687
|
+
* function App() {
|
|
688
|
+
* return (
|
|
689
|
+
* <Suspense fallback={<Spinner />}>
|
|
690
|
+
* <List />
|
|
691
|
+
* </Suspense>
|
|
692
|
+
* );
|
|
693
|
+
* }
|
|
694
|
+
*
|
|
695
|
+
* function List() {
|
|
696
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
697
|
+
*
|
|
698
|
+
* return (
|
|
699
|
+
* <ol>
|
|
700
|
+
* {data.list.map((item) => (
|
|
701
|
+
* <Item key={item.id} id={item.id} />
|
|
702
|
+
* ))}
|
|
703
|
+
* </ol>
|
|
704
|
+
* );
|
|
705
|
+
* }
|
|
706
|
+
* ```
|
|
707
|
+
*
|
|
708
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
709
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
291
710
|
*/
|
|
292
711
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, ...[options]: {} extends TVariables ? [
|
|
293
712
|
options?: SkipToken | useSuspenseQuery.Options<NoInfer<TVariables>>
|
|
294
713
|
] : [options: SkipToken | useSuspenseQuery.Options<NoInfer<TVariables>>]): useSuspenseQuery.Result<TData, TVariables, "complete" | "streaming" | "empty">;
|
|
295
714
|
/**
|
|
715
|
+
* @deprecated Avoid manually specifying generic arguments on `useSuspenseQuery`.
|
|
716
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
717
|
+
*
|
|
718
|
+
*
|
|
719
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
720
|
+
*
|
|
721
|
+
* @example
|
|
296
722
|
*
|
|
723
|
+
* ```jsx
|
|
724
|
+
* import { Suspense } from "react";
|
|
725
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
726
|
+
*
|
|
727
|
+
* const listQuery = gql`
|
|
728
|
+
* query {
|
|
729
|
+
* list {
|
|
730
|
+
* id
|
|
731
|
+
* }
|
|
732
|
+
* }
|
|
733
|
+
* `;
|
|
734
|
+
*
|
|
735
|
+
* function App() {
|
|
736
|
+
* return (
|
|
737
|
+
* <Suspense fallback={<Spinner />}>
|
|
738
|
+
* <List />
|
|
739
|
+
* </Suspense>
|
|
740
|
+
* );
|
|
741
|
+
* }
|
|
742
|
+
*
|
|
743
|
+
* function List() {
|
|
744
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
745
|
+
*
|
|
746
|
+
* return (
|
|
747
|
+
* <ol>
|
|
748
|
+
* {data.list.map((item) => (
|
|
749
|
+
* <Item key={item.id} id={item.id} />
|
|
750
|
+
* ))}
|
|
751
|
+
* </ol>
|
|
752
|
+
* );
|
|
753
|
+
* }
|
|
754
|
+
* ```
|
|
755
|
+
*
|
|
756
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
757
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
297
758
|
*/
|
|
298
759
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: SkipToken | useSuspenseQuery.Options<NoInfer<TVariables>>): useSuspenseQuery.Result<TData, TVariables, "complete" | "streaming" | "empty">;
|
|
299
760
|
}
|
|
300
761
|
/**
|
|
762
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
763
|
+
*
|
|
764
|
+
* @example
|
|
765
|
+
*
|
|
766
|
+
* ```jsx
|
|
767
|
+
* import { Suspense } from "react";
|
|
768
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
769
|
+
*
|
|
770
|
+
* const listQuery = gql`
|
|
771
|
+
* query {
|
|
772
|
+
* list {
|
|
773
|
+
* id
|
|
774
|
+
* }
|
|
775
|
+
* }
|
|
776
|
+
* `;
|
|
301
777
|
*
|
|
778
|
+
* function App() {
|
|
779
|
+
* return (
|
|
780
|
+
* <Suspense fallback={<Spinner />}>
|
|
781
|
+
* <List />
|
|
782
|
+
* </Suspense>
|
|
783
|
+
* );
|
|
784
|
+
* }
|
|
785
|
+
*
|
|
786
|
+
* function List() {
|
|
787
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
788
|
+
*
|
|
789
|
+
* return (
|
|
790
|
+
* <ol>
|
|
791
|
+
* {data.list.map((item) => (
|
|
792
|
+
* <Item key={item.id} id={item.id} />
|
|
793
|
+
* ))}
|
|
794
|
+
* </ol>
|
|
795
|
+
* );
|
|
796
|
+
* }
|
|
797
|
+
* ```
|
|
798
|
+
*
|
|
799
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
800
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
302
801
|
*/
|
|
303
802
|
interface Modern {
|
|
304
803
|
/**
|
|
804
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
805
|
+
*
|
|
806
|
+
* @example
|
|
807
|
+
*
|
|
808
|
+
* ```jsx
|
|
809
|
+
* import { Suspense } from "react";
|
|
810
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
811
|
+
*
|
|
812
|
+
* const listQuery = gql`
|
|
813
|
+
* query {
|
|
814
|
+
* list {
|
|
815
|
+
* id
|
|
816
|
+
* }
|
|
817
|
+
* }
|
|
818
|
+
* `;
|
|
819
|
+
*
|
|
820
|
+
* function App() {
|
|
821
|
+
* return (
|
|
822
|
+
* <Suspense fallback={<Spinner />}>
|
|
823
|
+
* <List />
|
|
824
|
+
* </Suspense>
|
|
825
|
+
* );
|
|
826
|
+
* }
|
|
827
|
+
*
|
|
828
|
+
* function List() {
|
|
829
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
830
|
+
*
|
|
831
|
+
* return (
|
|
832
|
+
* <ol>
|
|
833
|
+
* {data.list.map((item) => (
|
|
834
|
+
* <Item key={item.id} id={item.id} />
|
|
835
|
+
* ))}
|
|
836
|
+
* </ol>
|
|
837
|
+
* );
|
|
838
|
+
* }
|
|
839
|
+
* ```
|
|
305
840
|
*
|
|
841
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
842
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
306
843
|
*/
|
|
307
844
|
<TData, TVariables extends OperationVariables, Options extends never>(query: {} extends TVariables ? DocumentNode | TypedDocumentNode<TData, TVariables> : never): useSuspenseQuery.ResultForOptions<TData, TVariables, Record<string, never>>;
|
|
308
845
|
/**
|
|
846
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
309
847
|
*
|
|
848
|
+
* @example
|
|
849
|
+
*
|
|
850
|
+
* ```jsx
|
|
851
|
+
* import { Suspense } from "react";
|
|
852
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
853
|
+
*
|
|
854
|
+
* const listQuery = gql`
|
|
855
|
+
* query {
|
|
856
|
+
* list {
|
|
857
|
+
* id
|
|
858
|
+
* }
|
|
859
|
+
* }
|
|
860
|
+
* `;
|
|
861
|
+
*
|
|
862
|
+
* function App() {
|
|
863
|
+
* return (
|
|
864
|
+
* <Suspense fallback={<Spinner />}>
|
|
865
|
+
* <List />
|
|
866
|
+
* </Suspense>
|
|
867
|
+
* );
|
|
868
|
+
* }
|
|
869
|
+
*
|
|
870
|
+
* function List() {
|
|
871
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
872
|
+
*
|
|
873
|
+
* return (
|
|
874
|
+
* <ol>
|
|
875
|
+
* {data.list.map((item) => (
|
|
876
|
+
* <Item key={item.id} id={item.id} />
|
|
877
|
+
* ))}
|
|
878
|
+
* </ol>
|
|
879
|
+
* );
|
|
880
|
+
* }
|
|
881
|
+
* ```
|
|
882
|
+
*
|
|
883
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
884
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
310
885
|
*/
|
|
311
886
|
<TData, TVariables extends OperationVariables, TOptions extends never>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, skipToken: SkipToken): useSuspenseQuery.ResultForOptions<TData, TVariables, SkipToken>;
|
|
312
887
|
/**
|
|
888
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
889
|
+
*
|
|
890
|
+
* @example
|
|
891
|
+
*
|
|
892
|
+
* ```jsx
|
|
893
|
+
* import { Suspense } from "react";
|
|
894
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
313
895
|
*
|
|
896
|
+
* const listQuery = gql`
|
|
897
|
+
* query {
|
|
898
|
+
* list {
|
|
899
|
+
* id
|
|
900
|
+
* }
|
|
901
|
+
* }
|
|
902
|
+
* `;
|
|
903
|
+
*
|
|
904
|
+
* function App() {
|
|
905
|
+
* return (
|
|
906
|
+
* <Suspense fallback={<Spinner />}>
|
|
907
|
+
* <List />
|
|
908
|
+
* </Suspense>
|
|
909
|
+
* );
|
|
910
|
+
* }
|
|
911
|
+
*
|
|
912
|
+
* function List() {
|
|
913
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
914
|
+
*
|
|
915
|
+
* return (
|
|
916
|
+
* <ol>
|
|
917
|
+
* {data.list.map((item) => (
|
|
918
|
+
* <Item key={item.id} id={item.id} />
|
|
919
|
+
* ))}
|
|
920
|
+
* </ol>
|
|
921
|
+
* );
|
|
922
|
+
* }
|
|
923
|
+
* ```
|
|
924
|
+
*
|
|
925
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
926
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
314
927
|
*/
|
|
315
928
|
<TData, TVariables extends OperationVariables, TOptions extends useSuspenseQuery.Options<NoInfer<TVariables>> & VariablesOption<TVariables & {
|
|
316
929
|
[K in Exclude<keyof TOptions["variables"], keyof TVariables>]?: never;
|
|
317
930
|
}>>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, ...[options]: {} extends TVariables ? [options?: TOptions] : [options: TOptions]): useSuspenseQuery.ResultForOptions<TData, TVariables, TOptions>;
|
|
318
931
|
/**
|
|
932
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
933
|
+
*
|
|
934
|
+
* @example
|
|
935
|
+
*
|
|
936
|
+
* ```jsx
|
|
937
|
+
* import { Suspense } from "react";
|
|
938
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
939
|
+
*
|
|
940
|
+
* const listQuery = gql`
|
|
941
|
+
* query {
|
|
942
|
+
* list {
|
|
943
|
+
* id
|
|
944
|
+
* }
|
|
945
|
+
* }
|
|
946
|
+
* `;
|
|
947
|
+
*
|
|
948
|
+
* function App() {
|
|
949
|
+
* return (
|
|
950
|
+
* <Suspense fallback={<Spinner />}>
|
|
951
|
+
* <List />
|
|
952
|
+
* </Suspense>
|
|
953
|
+
* );
|
|
954
|
+
* }
|
|
319
955
|
*
|
|
956
|
+
* function List() {
|
|
957
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
958
|
+
*
|
|
959
|
+
* return (
|
|
960
|
+
* <ol>
|
|
961
|
+
* {data.list.map((item) => (
|
|
962
|
+
* <Item key={item.id} id={item.id} />
|
|
963
|
+
* ))}
|
|
964
|
+
* </ol>
|
|
965
|
+
* );
|
|
966
|
+
* }
|
|
967
|
+
* ```
|
|
968
|
+
*
|
|
969
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
970
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
320
971
|
*/
|
|
321
972
|
<TData, TVariables extends OperationVariables, TOptions extends useSuspenseQuery.Options<NoInfer<TVariables>> & VariablesOption<TVariables & {
|
|
322
973
|
[K in Exclude<keyof TOptions["variables"], keyof TVariables>]?: never;
|
|
@@ -325,7 +976,45 @@ export declare namespace useSuspenseQuery {
|
|
|
325
976
|
type Evaluated = SignatureStyle extends "classic" ? Classic : Modern;
|
|
326
977
|
}
|
|
327
978
|
/**
|
|
979
|
+
* For a detailed explanation of `useSuspenseQuery`, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
|
|
980
|
+
*
|
|
981
|
+
* @example
|
|
982
|
+
*
|
|
983
|
+
* ```jsx
|
|
984
|
+
* import { Suspense } from "react";
|
|
985
|
+
* import { useSuspenseQuery } from "@apollo/client";
|
|
986
|
+
*
|
|
987
|
+
* const listQuery = gql`
|
|
988
|
+
* query {
|
|
989
|
+
* list {
|
|
990
|
+
* id
|
|
991
|
+
* }
|
|
992
|
+
* }
|
|
993
|
+
* `;
|
|
994
|
+
*
|
|
995
|
+
* function App() {
|
|
996
|
+
* return (
|
|
997
|
+
* <Suspense fallback={<Spinner />}>
|
|
998
|
+
* <List />
|
|
999
|
+
* </Suspense>
|
|
1000
|
+
* );
|
|
1001
|
+
* }
|
|
1002
|
+
*
|
|
1003
|
+
* function List() {
|
|
1004
|
+
* const { data } = useSuspenseQuery(listQuery);
|
|
1005
|
+
*
|
|
1006
|
+
* return (
|
|
1007
|
+
* <ol>
|
|
1008
|
+
* {data.list.map((item) => (
|
|
1009
|
+
* <Item key={item.id} id={item.id} />
|
|
1010
|
+
* ))}
|
|
1011
|
+
* </ol>
|
|
1012
|
+
* );
|
|
1013
|
+
* }
|
|
1014
|
+
* ```
|
|
328
1015
|
*
|
|
1016
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
1017
|
+
* @param options - An optional object containing options for the query. Instead of passing a `useSuspenseQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useSuspenseQuery` hook from executing the query or suspending.
|
|
329
1018
|
*/
|
|
330
1019
|
interface Signature extends Signatures.Evaluated {
|
|
331
1020
|
}
|