@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.
Files changed (78) hide show
  1. package/CHANGELOG.md +61 -0
  2. package/__cjs/core/ApolloClient.cjs +9 -9
  3. package/__cjs/core/ApolloClient.cjs.map +1 -1
  4. package/__cjs/core/ApolloClient.d.cts +131 -21
  5. package/__cjs/link/ws/index.cjs +9 -1
  6. package/__cjs/link/ws/index.cjs.map +1 -1
  7. package/__cjs/link/ws/index.d.cts +1 -1
  8. package/__cjs/react/hooks/useBackgroundQuery.cjs.map +1 -1
  9. package/__cjs/react/hooks/useBackgroundQuery.d.cts +1466 -65
  10. package/__cjs/react/hooks/useLazyQuery.cjs.map +1 -1
  11. package/__cjs/react/hooks/useLazyQuery.d.cts +346 -39
  12. package/__cjs/react/hooks/useLoadableQuery.cjs.map +1 -1
  13. package/__cjs/react/hooks/useLoadableQuery.d.cts +492 -49
  14. package/__cjs/react/hooks/useMutation.cjs +5 -48
  15. package/__cjs/react/hooks/useMutation.cjs.map +1 -1
  16. package/__cjs/react/hooks/useMutation.d.cts +239 -130
  17. package/__cjs/react/hooks/useQuery.cjs.map +1 -1
  18. package/__cjs/react/hooks/useQuery.d.cts +570 -40
  19. package/__cjs/react/hooks/useSubscription.cjs +1 -1
  20. package/__cjs/react/hooks/useSubscription.cjs.map +1 -1
  21. package/__cjs/react/hooks/useSubscription.d.cts +2 -2
  22. package/__cjs/react/hooks/useSuspenseQuery.cjs.map +1 -1
  23. package/__cjs/react/hooks/useSuspenseQuery.d.cts +734 -45
  24. package/__cjs/version.cjs +1 -1
  25. package/core/ApolloClient.d.ts +131 -21
  26. package/core/ApolloClient.js +9 -9
  27. package/core/ApolloClient.js.map +1 -1
  28. package/link/ws/index.d.ts +1 -1
  29. package/link/ws/index.js +9 -1
  30. package/link/ws/index.js.map +1 -1
  31. package/package.json +3 -7
  32. package/react/hooks/useBackgroundQuery.d.ts +1466 -65
  33. package/react/hooks/useBackgroundQuery.js.map +1 -1
  34. package/react/hooks/useLazyQuery.d.ts +346 -39
  35. package/react/hooks/useLazyQuery.js.map +1 -1
  36. package/react/hooks/useLoadableQuery.d.ts +492 -49
  37. package/react/hooks/useLoadableQuery.js.map +1 -1
  38. package/react/hooks/useMutation.d.ts +239 -130
  39. package/react/hooks/useMutation.js +5 -48
  40. package/react/hooks/useMutation.js.map +1 -1
  41. package/react/hooks/useQuery.d.ts +570 -40
  42. package/react/hooks/useQuery.js.map +1 -1
  43. package/react/hooks/useSubscription.d.ts +2 -2
  44. package/react/hooks/useSubscription.js +1 -1
  45. package/react/hooks/useSubscription.js.map +1 -1
  46. package/react/hooks/useSuspenseQuery.d.ts +734 -45
  47. package/react/hooks/useSuspenseQuery.js.map +1 -1
  48. package/react/hooks-compiled/useBackgroundQuery.d.ts +1466 -65
  49. package/react/hooks-compiled/useBackgroundQuery.js.map +1 -1
  50. package/react/hooks-compiled/useLazyQuery.d.ts +346 -39
  51. package/react/hooks-compiled/useLazyQuery.js.map +1 -1
  52. package/react/hooks-compiled/useLoadableQuery.d.ts +492 -49
  53. package/react/hooks-compiled/useLoadableQuery.js.map +1 -1
  54. package/react/hooks-compiled/useMutation.d.ts +239 -130
  55. package/react/hooks-compiled/useMutation.js +4 -47
  56. package/react/hooks-compiled/useMutation.js.map +1 -1
  57. package/react/hooks-compiled/useQuery.d.ts +570 -40
  58. package/react/hooks-compiled/useQuery.js.map +1 -1
  59. package/react/hooks-compiled/useSubscription.d.ts +2 -2
  60. package/react/hooks-compiled/useSubscription.js +1 -1
  61. package/react/hooks-compiled/useSubscription.js.map +1 -1
  62. package/react/hooks-compiled/useSuspenseQuery.d.ts +734 -45
  63. package/react/hooks-compiled/useSuspenseQuery.js.map +1 -1
  64. package/skills/apollo-client/SKILL.md +168 -0
  65. package/skills/apollo-client/references/caching.md +560 -0
  66. package/skills/apollo-client/references/error-handling.md +350 -0
  67. package/skills/apollo-client/references/fragments.md +804 -0
  68. package/skills/apollo-client/references/integration-client.md +336 -0
  69. package/skills/apollo-client/references/integration-nextjs.md +325 -0
  70. package/skills/apollo-client/references/integration-react-router.md +256 -0
  71. package/skills/apollo-client/references/integration-tanstack-start.md +378 -0
  72. package/skills/apollo-client/references/mutations.md +549 -0
  73. package/skills/apollo-client/references/queries.md +416 -0
  74. package/skills/apollo-client/references/state-management.md +428 -0
  75. package/skills/apollo-client/references/suspense-hooks.md +773 -0
  76. package/skills/apollo-client/references/troubleshooting.md +487 -0
  77. package/skills/apollo-client/references/typescript-codegen.md +133 -0
  78. package/version.js +1 -1
@@ -237,94 +237,426 @@ export declare namespace useQuery {
237
237
  }
238
238
  }
239
239
  namespace DocumentationTypes {
240
- /**
241
- * A hook for executing queries in an Apollo application.
242
- *
243
- * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
244
- *
245
- * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
246
- *
247
- * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
248
- *
249
- * @example
250
- *
251
- * ```jsx
252
- * import { gql } from "@apollo/client";
253
- * import { useQuery } from "@apollo/client/react";
254
- *
255
- * const GET_GREETING = gql`
256
- * query GetGreeting($language: String!) {
257
- * greeting(language: $language) {
258
- * message
259
- * }
260
- * }
261
- * `;
262
- *
263
- * function Hello() {
264
- * const { loading, error, data } = useQuery(GET_GREETING, {
265
- * variables: { language: "english" },
266
- * });
267
- * if (loading) return <p>Loading ...</p>;
268
- * return <h1>Hello {data.greeting.message}!</h1>;
269
- * }
270
- * ```
271
- *
272
- * @param query - A GraphQL query document parsed into an AST by `gql`.
273
- * @param options - Options to control how the query is executed.
274
- * @returns Query result object
275
- */
276
240
  interface useQuery {
241
+ /**
242
+ * A hook for executing queries in an Apollo application.
243
+ *
244
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
245
+ *
246
+ * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
247
+ *
248
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
249
+ *
250
+ * @example
251
+ *
252
+ * ```jsx
253
+ * import { gql } from "@apollo/client";
254
+ * import { useQuery } from "@apollo/client/react";
255
+ *
256
+ * const GET_GREETING = gql`
257
+ * query GetGreeting($language: String!) {
258
+ * greeting(language: $language) {
259
+ * message
260
+ * }
261
+ * }
262
+ * `;
263
+ *
264
+ * function Hello() {
265
+ * const { loading, error, data } = useQuery(GET_GREETING, {
266
+ * variables: { language: "english" },
267
+ * });
268
+ * if (loading) return <p>Loading ...</p>;
269
+ * return <h1>Hello {data.greeting.message}!</h1>;
270
+ * }
271
+ * ```
272
+ *
273
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
274
+ * @param options - Options to control how the query is executed.
275
+ * @returns Query result object
276
+ */
277
277
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useQuery.Options<TData, TVariables>): useQuery.Result<TData, TVariables>;
278
278
  }
279
- /**
280
- * @deprecated Avoid manually specifying generics on `useQuery`.
281
- * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
282
- */
283
279
  interface useQuery_Deprecated {
280
+ /**
281
+ * @deprecated Avoid manually specifying generics on `useQuery`.
282
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
283
+ *
284
+ *
285
+ * A hook for executing queries in an Apollo application.
286
+ *
287
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
288
+ *
289
+ * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
290
+ *
291
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
292
+ *
293
+ * @example
294
+ *
295
+ * ```jsx
296
+ * import { gql } from "@apollo/client";
297
+ * import { useQuery } from "@apollo/client/react";
298
+ *
299
+ * const GET_GREETING = gql`
300
+ * query GetGreeting($language: String!) {
301
+ * greeting(language: $language) {
302
+ * message
303
+ * }
304
+ * }
305
+ * `;
306
+ *
307
+ * function Hello() {
308
+ * const { loading, error, data } = useQuery(GET_GREETING, {
309
+ * variables: { language: "english" },
310
+ * });
311
+ * if (loading) return <p>Loading ...</p>;
312
+ * return <h1>Hello {data.greeting.message}!</h1>;
313
+ * }
314
+ * ```
315
+ *
316
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
317
+ * @param options - Options to control how the query is executed.
318
+ * @returns Query result object
319
+ */
284
320
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useQuery.Options<TData, TVariables>): useQuery.Result<TData, TVariables>;
285
321
  }
286
322
  }
287
323
  namespace Signatures {
288
324
  /**
325
+ * @deprecated Avoid manually specifying generics on `useQuery`.
326
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
327
+ *
328
+ *
329
+ * A hook for executing queries in an Apollo application.
330
+ *
331
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
332
+ *
333
+ * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
334
+ *
335
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
336
+ *
337
+ * @example
338
+ *
339
+ * ```jsx
340
+ * import { gql } from "@apollo/client";
341
+ * import { useQuery } from "@apollo/client/react";
289
342
  *
343
+ * const GET_GREETING = gql`
344
+ * query GetGreeting($language: String!) {
345
+ * greeting(language: $language) {
346
+ * message
347
+ * }
348
+ * }
349
+ * `;
350
+ *
351
+ * function Hello() {
352
+ * const { loading, error, data } = useQuery(GET_GREETING, {
353
+ * variables: { language: "english" },
354
+ * });
355
+ * if (loading) return <p>Loading ...</p>;
356
+ * return <h1>Hello {data.greeting.message}!</h1>;
357
+ * }
358
+ * ```
359
+ *
360
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
361
+ * @param options - Options to control how the query is executed.
362
+ * @returns Query result object
290
363
  */
291
364
  interface Classic {
292
365
  /**
366
+ * @deprecated Avoid manually specifying generics on `useQuery`.
367
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
368
+ *
369
+ *
370
+ * A hook for executing queries in an Apollo application.
371
+ *
372
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
373
+ *
374
+ * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
375
+ *
376
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
377
+ *
378
+ * @example
293
379
  *
380
+ * ```jsx
381
+ * import { gql } from "@apollo/client";
382
+ * import { useQuery } from "@apollo/client/react";
383
+ *
384
+ * const GET_GREETING = gql`
385
+ * query GetGreeting($language: String!) {
386
+ * greeting(language: $language) {
387
+ * message
388
+ * }
389
+ * }
390
+ * `;
391
+ *
392
+ * function Hello() {
393
+ * const { loading, error, data } = useQuery(GET_GREETING, {
394
+ * variables: { language: "english" },
395
+ * });
396
+ * if (loading) return <p>Loading ...</p>;
397
+ * return <h1>Hello {data.greeting.message}!</h1>;
398
+ * }
399
+ * ```
400
+ *
401
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
402
+ * @param options - Options to control how the query is executed.
403
+ * @returns Query result object
294
404
  */
295
405
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useQuery.Options<NoInfer<TData>, NoInfer<TVariables>> & {
296
406
  returnPartialData: true;
297
407
  }): useQuery.Result<TData, TVariables, "empty" | "complete" | "streaming" | "partial">;
298
408
  /**
409
+ * @deprecated Avoid manually specifying generics on `useQuery`.
410
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
411
+ *
412
+ *
413
+ * A hook for executing queries in an Apollo application.
414
+ *
415
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
416
+ *
417
+ * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
418
+ *
419
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
420
+ *
421
+ * @example
299
422
  *
423
+ * ```jsx
424
+ * import { gql } from "@apollo/client";
425
+ * import { useQuery } from "@apollo/client/react";
426
+ *
427
+ * const GET_GREETING = gql`
428
+ * query GetGreeting($language: String!) {
429
+ * greeting(language: $language) {
430
+ * message
431
+ * }
432
+ * }
433
+ * `;
434
+ *
435
+ * function Hello() {
436
+ * const { loading, error, data } = useQuery(GET_GREETING, {
437
+ * variables: { language: "english" },
438
+ * });
439
+ * if (loading) return <p>Loading ...</p>;
440
+ * return <h1>Hello {data.greeting.message}!</h1>;
441
+ * }
442
+ * ```
443
+ *
444
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
445
+ * @param options - Options to control how the query is executed.
446
+ * @returns Query result object
300
447
  */
301
448
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: SkipToken): useQuery.Result<TData, TVariables, "empty", Record<string, never>>;
302
449
  /**
450
+ * @deprecated Avoid manually specifying generics on `useQuery`.
451
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
452
+ *
453
+ *
454
+ * A hook for executing queries in an Apollo application.
455
+ *
456
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
457
+ *
458
+ * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
459
+ *
460
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
303
461
  *
462
+ * @example
463
+ *
464
+ * ```jsx
465
+ * import { gql } from "@apollo/client";
466
+ * import { useQuery } from "@apollo/client/react";
467
+ *
468
+ * const GET_GREETING = gql`
469
+ * query GetGreeting($language: String!) {
470
+ * greeting(language: $language) {
471
+ * message
472
+ * }
473
+ * }
474
+ * `;
475
+ *
476
+ * function Hello() {
477
+ * const { loading, error, data } = useQuery(GET_GREETING, {
478
+ * variables: { language: "english" },
479
+ * });
480
+ * if (loading) return <p>Loading ...</p>;
481
+ * return <h1>Hello {data.greeting.message}!</h1>;
482
+ * }
483
+ * ```
484
+ *
485
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
486
+ * @param options - Options to control how the query is executed.
487
+ * @returns Query result object
304
488
  */
305
489
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: SkipToken | (useQuery.Options<NoInfer<TData>, NoInfer<TVariables>> & {
306
490
  returnPartialData: true;
307
491
  })): useQuery.Result<TData, TVariables, "empty" | "complete" | "streaming" | "partial", Partial<TVariables>>;
308
492
  /**
493
+ * @deprecated Avoid manually specifying generics on `useQuery`.
494
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
495
+ *
496
+ *
497
+ * A hook for executing queries in an Apollo application.
498
+ *
499
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
500
+ *
501
+ * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
309
502
  *
503
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
504
+ *
505
+ * @example
506
+ *
507
+ * ```jsx
508
+ * import { gql } from "@apollo/client";
509
+ * import { useQuery } from "@apollo/client/react";
510
+ *
511
+ * const GET_GREETING = gql`
512
+ * query GetGreeting($language: String!) {
513
+ * greeting(language: $language) {
514
+ * message
515
+ * }
516
+ * }
517
+ * `;
518
+ *
519
+ * function Hello() {
520
+ * const { loading, error, data } = useQuery(GET_GREETING, {
521
+ * variables: { language: "english" },
522
+ * });
523
+ * if (loading) return <p>Loading ...</p>;
524
+ * return <h1>Hello {data.greeting.message}!</h1>;
525
+ * }
526
+ * ```
527
+ *
528
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
529
+ * @param options - Options to control how the query is executed.
530
+ * @returns Query result object
310
531
  */
311
532
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useQuery.Options<NoInfer<TData>, NoInfer<TVariables>> & {
312
533
  returnPartialData: boolean;
313
534
  }): useQuery.Result<TData, TVariables, "empty" | "complete" | "streaming" | "partial">;
314
535
  /**
536
+ * @deprecated Avoid manually specifying generics on `useQuery`.
537
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
538
+ *
539
+ *
540
+ * A hook for executing queries in an Apollo application.
541
+ *
542
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
315
543
  *
544
+ * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
545
+ *
546
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
547
+ *
548
+ * @example
549
+ *
550
+ * ```jsx
551
+ * import { gql } from "@apollo/client";
552
+ * import { useQuery } from "@apollo/client/react";
553
+ *
554
+ * const GET_GREETING = gql`
555
+ * query GetGreeting($language: String!) {
556
+ * greeting(language: $language) {
557
+ * message
558
+ * }
559
+ * }
560
+ * `;
561
+ *
562
+ * function Hello() {
563
+ * const { loading, error, data } = useQuery(GET_GREETING, {
564
+ * variables: { language: "english" },
565
+ * });
566
+ * if (loading) return <p>Loading ...</p>;
567
+ * return <h1>Hello {data.greeting.message}!</h1>;
568
+ * }
569
+ * ```
570
+ *
571
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
572
+ * @param options - Options to control how the query is executed.
573
+ * @returns Query result object
316
574
  */
317
575
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: SkipToken | (useQuery.Options<NoInfer<TData>, NoInfer<TVariables>> & {
318
576
  returnPartialData: boolean;
319
577
  })): useQuery.Result<TData, TVariables, "empty" | "complete" | "streaming" | "partial", Partial<TVariables>>;
320
578
  /**
579
+ * @deprecated Avoid manually specifying generics on `useQuery`.
580
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
581
+ *
582
+ *
583
+ * A hook for executing queries in an Apollo application.
584
+ *
585
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
321
586
  *
587
+ * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
588
+ *
589
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
590
+ *
591
+ * @example
592
+ *
593
+ * ```jsx
594
+ * import { gql } from "@apollo/client";
595
+ * import { useQuery } from "@apollo/client/react";
596
+ *
597
+ * const GET_GREETING = gql`
598
+ * query GetGreeting($language: String!) {
599
+ * greeting(language: $language) {
600
+ * message
601
+ * }
602
+ * }
603
+ * `;
604
+ *
605
+ * function Hello() {
606
+ * const { loading, error, data } = useQuery(GET_GREETING, {
607
+ * variables: { language: "english" },
608
+ * });
609
+ * if (loading) return <p>Loading ...</p>;
610
+ * return <h1>Hello {data.greeting.message}!</h1>;
611
+ * }
612
+ * ```
613
+ *
614
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
615
+ * @param options - Options to control how the query is executed.
616
+ * @returns Query result object
322
617
  */
323
618
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, ...[options]: {} extends TVariables ? [
324
619
  options?: useQuery.Options<NoInfer<TData>, NoInfer<TVariables>>
325
620
  ] : [options: useQuery.Options<NoInfer<TData>, NoInfer<TVariables>>]): useQuery.Result<TData, TVariables, "empty" | "complete" | "streaming">;
326
621
  /**
622
+ * @deprecated Avoid manually specifying generics on `useQuery`.
623
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
624
+ *
625
+ *
626
+ * A hook for executing queries in an Apollo application.
327
627
  *
628
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
629
+ *
630
+ * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
631
+ *
632
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
633
+ *
634
+ * @example
635
+ *
636
+ * ```jsx
637
+ * import { gql } from "@apollo/client";
638
+ * import { useQuery } from "@apollo/client/react";
639
+ *
640
+ * const GET_GREETING = gql`
641
+ * query GetGreeting($language: String!) {
642
+ * greeting(language: $language) {
643
+ * message
644
+ * }
645
+ * }
646
+ * `;
647
+ *
648
+ * function Hello() {
649
+ * const { loading, error, data } = useQuery(GET_GREETING, {
650
+ * variables: { language: "english" },
651
+ * });
652
+ * if (loading) return <p>Loading ...</p>;
653
+ * return <h1>Hello {data.greeting.message}!</h1>;
654
+ * }
655
+ * ```
656
+ *
657
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
658
+ * @param options - Options to control how the query is executed.
659
+ * @returns Query result object
328
660
  */
329
661
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, ...[options]: {} extends TVariables ? [
330
662
  options?: SkipToken | useQuery.Options<NoInfer<TData>, NoInfer<TVariables>>
@@ -334,19 +666,151 @@ export declare namespace useQuery {
334
666
  ssrDisabledResult: ObservableQuery.Result<any>;
335
667
  }
336
668
  /**
669
+ * A hook for executing queries in an Apollo application.
670
+ *
671
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
337
672
  *
673
+ * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
674
+ *
675
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
676
+ *
677
+ * @example
678
+ *
679
+ * ```jsx
680
+ * import { gql } from "@apollo/client";
681
+ * import { useQuery } from "@apollo/client/react";
682
+ *
683
+ * const GET_GREETING = gql`
684
+ * query GetGreeting($language: String!) {
685
+ * greeting(language: $language) {
686
+ * message
687
+ * }
688
+ * }
689
+ * `;
690
+ *
691
+ * function Hello() {
692
+ * const { loading, error, data } = useQuery(GET_GREETING, {
693
+ * variables: { language: "english" },
694
+ * });
695
+ * if (loading) return <p>Loading ...</p>;
696
+ * return <h1>Hello {data.greeting.message}!</h1>;
697
+ * }
698
+ * ```
699
+ *
700
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
701
+ * @param options - Options to control how the query is executed.
702
+ * @returns Query result object
338
703
  */
339
704
  interface Modern {
340
705
  /**
706
+ * A hook for executing queries in an Apollo application.
707
+ *
708
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
709
+ *
710
+ * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
341
711
  *
712
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
713
+ *
714
+ * @example
715
+ *
716
+ * ```jsx
717
+ * import { gql } from "@apollo/client";
718
+ * import { useQuery } from "@apollo/client/react";
719
+ *
720
+ * const GET_GREETING = gql`
721
+ * query GetGreeting($language: String!) {
722
+ * greeting(language: $language) {
723
+ * message
724
+ * }
725
+ * }
726
+ * `;
727
+ *
728
+ * function Hello() {
729
+ * const { loading, error, data } = useQuery(GET_GREETING, {
730
+ * variables: { language: "english" },
731
+ * });
732
+ * if (loading) return <p>Loading ...</p>;
733
+ * return <h1>Hello {data.greeting.message}!</h1>;
734
+ * }
735
+ * ```
736
+ *
737
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
738
+ * @param options - Options to control how the query is executed.
739
+ * @returns Query result object
342
740
  */
343
741
  <TData, TVariables extends OperationVariables, Options extends never>(query: {} extends TVariables ? DocumentNode | TypedDocumentNode<TData, TVariables> : never): useQuery.ResultForOptions<TData, TVariables, Record<string, never>>;
344
742
  /**
743
+ * A hook for executing queries in an Apollo application.
744
+ *
745
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
746
+ *
747
+ * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
748
+ *
749
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
750
+ *
751
+ * @example
345
752
  *
753
+ * ```jsx
754
+ * import { gql } from "@apollo/client";
755
+ * import { useQuery } from "@apollo/client/react";
756
+ *
757
+ * const GET_GREETING = gql`
758
+ * query GetGreeting($language: String!) {
759
+ * greeting(language: $language) {
760
+ * message
761
+ * }
762
+ * }
763
+ * `;
764
+ *
765
+ * function Hello() {
766
+ * const { loading, error, data } = useQuery(GET_GREETING, {
767
+ * variables: { language: "english" },
768
+ * });
769
+ * if (loading) return <p>Loading ...</p>;
770
+ * return <h1>Hello {data.greeting.message}!</h1>;
771
+ * }
772
+ * ```
773
+ *
774
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
775
+ * @param options - Options to control how the query is executed.
776
+ * @returns Query result object
346
777
  */
347
778
  <TData, TVariables extends OperationVariables, TOptions extends SkipToken>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: SkipToken): useQuery.Result<TData, TVariables, "empty", Record<string, never>>;
348
779
  /**
780
+ * A hook for executing queries in an Apollo application.
781
+ *
782
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
783
+ *
784
+ * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
785
+ *
786
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
787
+ *
788
+ * @example
789
+ *
790
+ * ```jsx
791
+ * import { gql } from "@apollo/client";
792
+ * import { useQuery } from "@apollo/client/react";
349
793
  *
794
+ * const GET_GREETING = gql`
795
+ * query GetGreeting($language: String!) {
796
+ * greeting(language: $language) {
797
+ * message
798
+ * }
799
+ * }
800
+ * `;
801
+ *
802
+ * function Hello() {
803
+ * const { loading, error, data } = useQuery(GET_GREETING, {
804
+ * variables: { language: "english" },
805
+ * });
806
+ * if (loading) return <p>Loading ...</p>;
807
+ * return <h1>Hello {data.greeting.message}!</h1>;
808
+ * }
809
+ * ```
810
+ *
811
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
812
+ * @param options - Options to control how the query is executed.
813
+ * @returns Query result object
350
814
  */
351
815
  <TData, TVariables extends OperationVariables, TOptions extends useQuery.Options<TData, NoInfer<TVariables>> & VariablesOption<TVariables & {
352
816
  [K in Exclude<keyof TOptions["variables"], keyof TVariables>]?: never;
@@ -356,7 +820,40 @@ export declare namespace useQuery {
356
820
  options: TOptions
357
821
  ]): useQuery.ResultForOptions<TData, TVariables, TOptions>;
358
822
  /**
823
+ * A hook for executing queries in an Apollo application.
824
+ *
825
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
826
+ *
827
+ * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
828
+ *
829
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
830
+ *
831
+ * @example
832
+ *
833
+ * ```jsx
834
+ * import { gql } from "@apollo/client";
835
+ * import { useQuery } from "@apollo/client/react";
836
+ *
837
+ * const GET_GREETING = gql`
838
+ * query GetGreeting($language: String!) {
839
+ * greeting(language: $language) {
840
+ * message
841
+ * }
842
+ * }
843
+ * `;
359
844
  *
845
+ * function Hello() {
846
+ * const { loading, error, data } = useQuery(GET_GREETING, {
847
+ * variables: { language: "english" },
848
+ * });
849
+ * if (loading) return <p>Loading ...</p>;
850
+ * return <h1>Hello {data.greeting.message}!</h1>;
851
+ * }
852
+ * ```
853
+ *
854
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
855
+ * @param options - Options to control how the query is executed.
856
+ * @returns Query result object
360
857
  */
361
858
  <TData, TVariables extends OperationVariables, TOptions extends useQuery.Options<TData, NoInfer<TVariables>> & VariablesOption<TVariables & {
362
859
  [K in Exclude<keyof TOptions["variables"], keyof TVariables>]?: never;
@@ -370,7 +867,40 @@ export declare namespace useQuery {
370
867
  type Evaluated = SignatureStyle extends "classic" ? Classic : Modern;
371
868
  }
372
869
  /**
870
+ * A hook for executing queries in an Apollo application.
871
+ *
872
+ * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
873
+ *
874
+ * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, `dataState`, and `data` properties you can use to render your UI.
875
+ *
876
+ * > Refer to the [Queries](https://www.apollographql.com/docs/react/data/queries) section for a more in-depth overview of `useQuery`.
877
+ *
878
+ * @example
879
+ *
880
+ * ```jsx
881
+ * import { gql } from "@apollo/client";
882
+ * import { useQuery } from "@apollo/client/react";
883
+ *
884
+ * const GET_GREETING = gql`
885
+ * query GetGreeting($language: String!) {
886
+ * greeting(language: $language) {
887
+ * message
888
+ * }
889
+ * }
890
+ * `;
891
+ *
892
+ * function Hello() {
893
+ * const { loading, error, data } = useQuery(GET_GREETING, {
894
+ * variables: { language: "english" },
895
+ * });
896
+ * if (loading) return <p>Loading ...</p>;
897
+ * return <h1>Hello {data.greeting.message}!</h1>;
898
+ * }
899
+ * ```
373
900
  *
901
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
902
+ * @param options - Options to control how the query is executed.
903
+ * @returns Query result object
374
904
  */
375
905
  interface Signature extends Signatures.Evaluated {
376
906
  }