@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
@@ -152,78 +152,139 @@ export declare namespace useBackgroundQuery {
152
152
  result: useBackgroundQuery.Result<TData, TVariables>
153
153
  ];
154
154
  namespace DocumentationTypes {
155
- /**
156
- * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
157
- *
158
- * @returns A tuple containing:
159
- *
160
- * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
161
- * 2. An object containing helper functions for the query:
162
- * - `refetch`: A function to re-execute the query
163
- * - `fetchMore`: A function to fetch more results for pagination
164
- * - `subscribeToMore`: A function to subscribe to updates
165
- *
166
- * @example
167
- *
168
- * ```jsx
169
- * import { Suspense } from "react";
170
- * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
171
- * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
172
- *
173
- * const query = gql`
174
- * foo {
175
- * bar
176
- * }
177
- * `;
178
- *
179
- * const client = new ApolloClient({
180
- * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
181
- * cache: new InMemoryCache(),
182
- * });
183
- *
184
- * function SuspenseFallback() {
185
- * return <div>Loading...</div>;
186
- * }
187
- *
188
- * function Child({ queryRef }) {
189
- * const { data } = useReadQuery(queryRef);
190
- *
191
- * return <div>{data.foo.bar}</div>;
192
- * }
193
- *
194
- * function Parent() {
195
- * const [queryRef] = useBackgroundQuery(query);
196
- *
197
- * return (
198
- * <Suspense fallback={<SuspenseFallback />}>
199
- * <Child queryRef={queryRef} />
200
- * </Suspense>
201
- * );
202
- * }
203
- *
204
- * function App() {
205
- * return (
206
- * <ApolloProvider client={client}>
207
- * <Parent />
208
- * </ApolloProvider>
209
- * );
210
- * }
211
- * ```
212
- *
213
- * @param query - A GraphQL query document parsed into an AST by `gql`.
214
- * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
215
- */
216
155
  interface useBackgroundQuery {
156
+ /**
157
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
158
+ *
159
+ * @returns A tuple containing:
160
+ *
161
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
162
+ * 2. An object containing helper functions for the query:
163
+ * - `refetch`: A function to re-execute the query
164
+ * - `fetchMore`: A function to fetch more results for pagination
165
+ * - `subscribeToMore`: A function to subscribe to updates
166
+ *
167
+ * @example
168
+ *
169
+ * ```jsx
170
+ * import { Suspense } from "react";
171
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
172
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
173
+ *
174
+ * const query = gql`
175
+ * foo {
176
+ * bar
177
+ * }
178
+ * `;
179
+ *
180
+ * const client = new ApolloClient({
181
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
182
+ * cache: new InMemoryCache(),
183
+ * });
184
+ *
185
+ * function SuspenseFallback() {
186
+ * return <div>Loading...</div>;
187
+ * }
188
+ *
189
+ * function Child({ queryRef }) {
190
+ * const { data } = useReadQuery(queryRef);
191
+ *
192
+ * return <div>{data.foo.bar}</div>;
193
+ * }
194
+ *
195
+ * function Parent() {
196
+ * const [queryRef] = useBackgroundQuery(query);
197
+ *
198
+ * return (
199
+ * <Suspense fallback={<SuspenseFallback />}>
200
+ * <Child queryRef={queryRef} />
201
+ * </Suspense>
202
+ * );
203
+ * }
204
+ *
205
+ * function App() {
206
+ * return (
207
+ * <ApolloProvider client={client}>
208
+ * <Parent />
209
+ * </ApolloProvider>
210
+ * );
211
+ * }
212
+ * ```
213
+ *
214
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
215
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
216
+ */
217
217
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: SkipToken | useBackgroundQuery.Options<TVariables>): [
218
218
  QueryRef<TData, TVariables> | undefined,
219
219
  useBackgroundQuery.Result<TData, TVariables>
220
220
  ];
221
221
  }
222
- /**
223
- * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
224
- * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
225
- */
226
222
  interface useBackgroundQuery_Deprecated {
223
+ /**
224
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
225
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
226
+ *
227
+ *
228
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
229
+ *
230
+ * @returns A tuple containing:
231
+ *
232
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
233
+ * 2. An object containing helper functions for the query:
234
+ * - `refetch`: A function to re-execute the query
235
+ * - `fetchMore`: A function to fetch more results for pagination
236
+ * - `subscribeToMore`: A function to subscribe to updates
237
+ *
238
+ * @example
239
+ *
240
+ * ```jsx
241
+ * import { Suspense } from "react";
242
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
243
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
244
+ *
245
+ * const query = gql`
246
+ * foo {
247
+ * bar
248
+ * }
249
+ * `;
250
+ *
251
+ * const client = new ApolloClient({
252
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
253
+ * cache: new InMemoryCache(),
254
+ * });
255
+ *
256
+ * function SuspenseFallback() {
257
+ * return <div>Loading...</div>;
258
+ * }
259
+ *
260
+ * function Child({ queryRef }) {
261
+ * const { data } = useReadQuery(queryRef);
262
+ *
263
+ * return <div>{data.foo.bar}</div>;
264
+ * }
265
+ *
266
+ * function Parent() {
267
+ * const [queryRef] = useBackgroundQuery(query);
268
+ *
269
+ * return (
270
+ * <Suspense fallback={<SuspenseFallback />}>
271
+ * <Child queryRef={queryRef} />
272
+ * </Suspense>
273
+ * );
274
+ * }
275
+ *
276
+ * function App() {
277
+ * return (
278
+ * <ApolloProvider client={client}>
279
+ * <Parent />
280
+ * </ApolloProvider>
281
+ * );
282
+ * }
283
+ * ```
284
+ *
285
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
286
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
287
+ */
227
288
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: SkipToken | useBackgroundQuery.Options<TVariables>): [
228
289
  QueryRef<TData, TVariables> | undefined,
229
290
  useBackgroundQuery.Result<TData, TVariables>
@@ -232,11 +293,135 @@ export declare namespace useBackgroundQuery {
232
293
  }
233
294
  namespace Signatures {
234
295
  /**
296
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
297
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
298
+ *
299
+ *
300
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
301
+ *
302
+ * @returns A tuple containing:
303
+ *
304
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
305
+ * 2. An object containing helper functions for the query:
306
+ * - `refetch`: A function to re-execute the query
307
+ * - `fetchMore`: A function to fetch more results for pagination
308
+ * - `subscribeToMore`: A function to subscribe to updates
309
+ *
310
+ * @example
311
+ *
312
+ * ```jsx
313
+ * import { Suspense } from "react";
314
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
315
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
316
+ *
317
+ * const query = gql`
318
+ * foo {
319
+ * bar
320
+ * }
321
+ * `;
235
322
  *
323
+ * const client = new ApolloClient({
324
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
325
+ * cache: new InMemoryCache(),
326
+ * });
327
+ *
328
+ * function SuspenseFallback() {
329
+ * return <div>Loading...</div>;
330
+ * }
331
+ *
332
+ * function Child({ queryRef }) {
333
+ * const { data } = useReadQuery(queryRef);
334
+ *
335
+ * return <div>{data.foo.bar}</div>;
336
+ * }
337
+ *
338
+ * function Parent() {
339
+ * const [queryRef] = useBackgroundQuery(query);
340
+ *
341
+ * return (
342
+ * <Suspense fallback={<SuspenseFallback />}>
343
+ * <Child queryRef={queryRef} />
344
+ * </Suspense>
345
+ * );
346
+ * }
347
+ *
348
+ * function App() {
349
+ * return (
350
+ * <ApolloProvider client={client}>
351
+ * <Parent />
352
+ * </ApolloProvider>
353
+ * );
354
+ * }
355
+ * ```
356
+ *
357
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
358
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
236
359
  */
237
360
  interface Classic {
238
361
  /**
362
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
363
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
364
+ *
365
+ *
366
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
367
+ *
368
+ * @returns A tuple containing:
239
369
  *
370
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
371
+ * 2. An object containing helper functions for the query:
372
+ * - `refetch`: A function to re-execute the query
373
+ * - `fetchMore`: A function to fetch more results for pagination
374
+ * - `subscribeToMore`: A function to subscribe to updates
375
+ *
376
+ * @example
377
+ *
378
+ * ```jsx
379
+ * import { Suspense } from "react";
380
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
381
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
382
+ *
383
+ * const query = gql`
384
+ * foo {
385
+ * bar
386
+ * }
387
+ * `;
388
+ *
389
+ * const client = new ApolloClient({
390
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
391
+ * cache: new InMemoryCache(),
392
+ * });
393
+ *
394
+ * function SuspenseFallback() {
395
+ * return <div>Loading...</div>;
396
+ * }
397
+ *
398
+ * function Child({ queryRef }) {
399
+ * const { data } = useReadQuery(queryRef);
400
+ *
401
+ * return <div>{data.foo.bar}</div>;
402
+ * }
403
+ *
404
+ * function Parent() {
405
+ * const [queryRef] = useBackgroundQuery(query);
406
+ *
407
+ * return (
408
+ * <Suspense fallback={<SuspenseFallback />}>
409
+ * <Child queryRef={queryRef} />
410
+ * </Suspense>
411
+ * );
412
+ * }
413
+ *
414
+ * function App() {
415
+ * return (
416
+ * <ApolloProvider client={client}>
417
+ * <Parent />
418
+ * </ApolloProvider>
419
+ * );
420
+ * }
421
+ * ```
422
+ *
423
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
424
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
240
425
  */
241
426
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useBackgroundQuery.Options<NoInfer<TVariables>> & {
242
427
  /** @deprecated `returnPartialData` has no effect on `no-cache` queries */
@@ -247,7 +432,69 @@ export declare namespace useBackgroundQuery {
247
432
  useBackgroundQuery.Result<TData, TVariables>
248
433
  ];
249
434
  /**
435
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
436
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
437
+ *
438
+ *
439
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
440
+ *
441
+ * @returns A tuple containing:
442
+ *
443
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
444
+ * 2. An object containing helper functions for the query:
445
+ * - `refetch`: A function to re-execute the query
446
+ * - `fetchMore`: A function to fetch more results for pagination
447
+ * - `subscribeToMore`: A function to subscribe to updates
448
+ *
449
+ * @example
450
+ *
451
+ * ```jsx
452
+ * import { Suspense } from "react";
453
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
454
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
455
+ *
456
+ * const query = gql`
457
+ * foo {
458
+ * bar
459
+ * }
460
+ * `;
461
+ *
462
+ * const client = new ApolloClient({
463
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
464
+ * cache: new InMemoryCache(),
465
+ * });
466
+ *
467
+ * function SuspenseFallback() {
468
+ * return <div>Loading...</div>;
469
+ * }
470
+ *
471
+ * function Child({ queryRef }) {
472
+ * const { data } = useReadQuery(queryRef);
250
473
  *
474
+ * return <div>{data.foo.bar}</div>;
475
+ * }
476
+ *
477
+ * function Parent() {
478
+ * const [queryRef] = useBackgroundQuery(query);
479
+ *
480
+ * return (
481
+ * <Suspense fallback={<SuspenseFallback />}>
482
+ * <Child queryRef={queryRef} />
483
+ * </Suspense>
484
+ * );
485
+ * }
486
+ *
487
+ * function App() {
488
+ * return (
489
+ * <ApolloProvider client={client}>
490
+ * <Parent />
491
+ * </ApolloProvider>
492
+ * );
493
+ * }
494
+ * ```
495
+ *
496
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
497
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
251
498
  */
252
499
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useBackgroundQuery.Options<NoInfer<TVariables>> & {
253
500
  returnPartialData: false;
@@ -257,7 +504,69 @@ export declare namespace useBackgroundQuery {
257
504
  useBackgroundQuery.Result<TData, TVariables>
258
505
  ];
259
506
  /**
507
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
508
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
509
+ *
510
+ *
511
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
512
+ *
513
+ * @returns A tuple containing:
514
+ *
515
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
516
+ * 2. An object containing helper functions for the query:
517
+ * - `refetch`: A function to re-execute the query
518
+ * - `fetchMore`: A function to fetch more results for pagination
519
+ * - `subscribeToMore`: A function to subscribe to updates
520
+ *
521
+ * @example
522
+ *
523
+ * ```jsx
524
+ * import { Suspense } from "react";
525
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
526
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
260
527
  *
528
+ * const query = gql`
529
+ * foo {
530
+ * bar
531
+ * }
532
+ * `;
533
+ *
534
+ * const client = new ApolloClient({
535
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
536
+ * cache: new InMemoryCache(),
537
+ * });
538
+ *
539
+ * function SuspenseFallback() {
540
+ * return <div>Loading...</div>;
541
+ * }
542
+ *
543
+ * function Child({ queryRef }) {
544
+ * const { data } = useReadQuery(queryRef);
545
+ *
546
+ * return <div>{data.foo.bar}</div>;
547
+ * }
548
+ *
549
+ * function Parent() {
550
+ * const [queryRef] = useBackgroundQuery(query);
551
+ *
552
+ * return (
553
+ * <Suspense fallback={<SuspenseFallback />}>
554
+ * <Child queryRef={queryRef} />
555
+ * </Suspense>
556
+ * );
557
+ * }
558
+ *
559
+ * function App() {
560
+ * return (
561
+ * <ApolloProvider client={client}>
562
+ * <Parent />
563
+ * </ApolloProvider>
564
+ * );
565
+ * }
566
+ * ```
567
+ *
568
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
569
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
261
570
  */
262
571
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useBackgroundQuery.Options<NoInfer<TVariables>> & {
263
572
  returnPartialData: boolean;
@@ -267,7 +576,69 @@ export declare namespace useBackgroundQuery {
267
576
  useBackgroundQuery.Result<TData, TVariables>
268
577
  ];
269
578
  /**
579
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
580
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
581
+ *
270
582
  *
583
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
584
+ *
585
+ * @returns A tuple containing:
586
+ *
587
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
588
+ * 2. An object containing helper functions for the query:
589
+ * - `refetch`: A function to re-execute the query
590
+ * - `fetchMore`: A function to fetch more results for pagination
591
+ * - `subscribeToMore`: A function to subscribe to updates
592
+ *
593
+ * @example
594
+ *
595
+ * ```jsx
596
+ * import { Suspense } from "react";
597
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
598
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
599
+ *
600
+ * const query = gql`
601
+ * foo {
602
+ * bar
603
+ * }
604
+ * `;
605
+ *
606
+ * const client = new ApolloClient({
607
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
608
+ * cache: new InMemoryCache(),
609
+ * });
610
+ *
611
+ * function SuspenseFallback() {
612
+ * return <div>Loading...</div>;
613
+ * }
614
+ *
615
+ * function Child({ queryRef }) {
616
+ * const { data } = useReadQuery(queryRef);
617
+ *
618
+ * return <div>{data.foo.bar}</div>;
619
+ * }
620
+ *
621
+ * function Parent() {
622
+ * const [queryRef] = useBackgroundQuery(query);
623
+ *
624
+ * return (
625
+ * <Suspense fallback={<SuspenseFallback />}>
626
+ * <Child queryRef={queryRef} />
627
+ * </Suspense>
628
+ * );
629
+ * }
630
+ *
631
+ * function App() {
632
+ * return (
633
+ * <ApolloProvider client={client}>
634
+ * <Parent />
635
+ * </ApolloProvider>
636
+ * );
637
+ * }
638
+ * ```
639
+ *
640
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
641
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
271
642
  */
272
643
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useBackgroundQuery.Options<NoInfer<TVariables>> & {
273
644
  errorPolicy: "ignore" | "all";
@@ -276,7 +647,69 @@ export declare namespace useBackgroundQuery {
276
647
  useBackgroundQuery.Result<TData, TVariables>
277
648
  ];
278
649
  /**
650
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
651
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
652
+ *
653
+ *
654
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
655
+ *
656
+ * @returns A tuple containing:
657
+ *
658
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
659
+ * 2. An object containing helper functions for the query:
660
+ * - `refetch`: A function to re-execute the query
661
+ * - `fetchMore`: A function to fetch more results for pagination
662
+ * - `subscribeToMore`: A function to subscribe to updates
663
+ *
664
+ * @example
665
+ *
666
+ * ```jsx
667
+ * import { Suspense } from "react";
668
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
669
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
670
+ *
671
+ * const query = gql`
672
+ * foo {
673
+ * bar
674
+ * }
675
+ * `;
676
+ *
677
+ * const client = new ApolloClient({
678
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
679
+ * cache: new InMemoryCache(),
680
+ * });
279
681
  *
682
+ * function SuspenseFallback() {
683
+ * return <div>Loading...</div>;
684
+ * }
685
+ *
686
+ * function Child({ queryRef }) {
687
+ * const { data } = useReadQuery(queryRef);
688
+ *
689
+ * return <div>{data.foo.bar}</div>;
690
+ * }
691
+ *
692
+ * function Parent() {
693
+ * const [queryRef] = useBackgroundQuery(query);
694
+ *
695
+ * return (
696
+ * <Suspense fallback={<SuspenseFallback />}>
697
+ * <Child queryRef={queryRef} />
698
+ * </Suspense>
699
+ * );
700
+ * }
701
+ *
702
+ * function App() {
703
+ * return (
704
+ * <ApolloProvider client={client}>
705
+ * <Parent />
706
+ * </ApolloProvider>
707
+ * );
708
+ * }
709
+ * ```
710
+ *
711
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
712
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
280
713
  */
281
714
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useBackgroundQuery.Options<NoInfer<TVariables>> & {
282
715
  skip: boolean;
@@ -286,7 +719,69 @@ export declare namespace useBackgroundQuery {
286
719
  useBackgroundQuery.Result<TData, TVariables>
287
720
  ];
288
721
  /**
722
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
723
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
724
+ *
725
+ *
726
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
727
+ *
728
+ * @returns A tuple containing:
729
+ *
730
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
731
+ * 2. An object containing helper functions for the query:
732
+ * - `refetch`: A function to re-execute the query
733
+ * - `fetchMore`: A function to fetch more results for pagination
734
+ * - `subscribeToMore`: A function to subscribe to updates
289
735
  *
736
+ * @example
737
+ *
738
+ * ```jsx
739
+ * import { Suspense } from "react";
740
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
741
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
742
+ *
743
+ * const query = gql`
744
+ * foo {
745
+ * bar
746
+ * }
747
+ * `;
748
+ *
749
+ * const client = new ApolloClient({
750
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
751
+ * cache: new InMemoryCache(),
752
+ * });
753
+ *
754
+ * function SuspenseFallback() {
755
+ * return <div>Loading...</div>;
756
+ * }
757
+ *
758
+ * function Child({ queryRef }) {
759
+ * const { data } = useReadQuery(queryRef);
760
+ *
761
+ * return <div>{data.foo.bar}</div>;
762
+ * }
763
+ *
764
+ * function Parent() {
765
+ * const [queryRef] = useBackgroundQuery(query);
766
+ *
767
+ * return (
768
+ * <Suspense fallback={<SuspenseFallback />}>
769
+ * <Child queryRef={queryRef} />
770
+ * </Suspense>
771
+ * );
772
+ * }
773
+ *
774
+ * function App() {
775
+ * return (
776
+ * <ApolloProvider client={client}>
777
+ * <Parent />
778
+ * </ApolloProvider>
779
+ * );
780
+ * }
781
+ * ```
782
+ *
783
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
784
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
290
785
  */
291
786
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useBackgroundQuery.Options<NoInfer<TVariables>> & {
292
787
  skip: boolean;
@@ -296,7 +791,69 @@ export declare namespace useBackgroundQuery {
296
791
  useBackgroundQuery.Result<TData, TVariables>
297
792
  ];
298
793
  /**
794
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
795
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
796
+ *
797
+ *
798
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
799
+ *
800
+ * @returns A tuple containing:
801
+ *
802
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
803
+ * 2. An object containing helper functions for the query:
804
+ * - `refetch`: A function to re-execute the query
805
+ * - `fetchMore`: A function to fetch more results for pagination
806
+ * - `subscribeToMore`: A function to subscribe to updates
807
+ *
808
+ * @example
809
+ *
810
+ * ```jsx
811
+ * import { Suspense } from "react";
812
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
813
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
814
+ *
815
+ * const query = gql`
816
+ * foo {
817
+ * bar
818
+ * }
819
+ * `;
820
+ *
821
+ * const client = new ApolloClient({
822
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
823
+ * cache: new InMemoryCache(),
824
+ * });
825
+ *
826
+ * function SuspenseFallback() {
827
+ * return <div>Loading...</div>;
828
+ * }
829
+ *
830
+ * function Child({ queryRef }) {
831
+ * const { data } = useReadQuery(queryRef);
299
832
  *
833
+ * return <div>{data.foo.bar}</div>;
834
+ * }
835
+ *
836
+ * function Parent() {
837
+ * const [queryRef] = useBackgroundQuery(query);
838
+ *
839
+ * return (
840
+ * <Suspense fallback={<SuspenseFallback />}>
841
+ * <Child queryRef={queryRef} />
842
+ * </Suspense>
843
+ * );
844
+ * }
845
+ *
846
+ * function App() {
847
+ * return (
848
+ * <ApolloProvider client={client}>
849
+ * <Parent />
850
+ * </ApolloProvider>
851
+ * );
852
+ * }
853
+ * ```
854
+ *
855
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
856
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
300
857
  */
301
858
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useBackgroundQuery.Options<NoInfer<TVariables>> & {
302
859
  returnPartialData: false;
@@ -305,7 +862,69 @@ export declare namespace useBackgroundQuery {
305
862
  useBackgroundQuery.Result<TData, TVariables>
306
863
  ];
307
864
  /**
865
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
866
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
867
+ *
868
+ *
869
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
870
+ *
871
+ * @returns A tuple containing:
872
+ *
873
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
874
+ * 2. An object containing helper functions for the query:
875
+ * - `refetch`: A function to re-execute the query
876
+ * - `fetchMore`: A function to fetch more results for pagination
877
+ * - `subscribeToMore`: A function to subscribe to updates
878
+ *
879
+ * @example
308
880
  *
881
+ * ```jsx
882
+ * import { Suspense } from "react";
883
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
884
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
885
+ *
886
+ * const query = gql`
887
+ * foo {
888
+ * bar
889
+ * }
890
+ * `;
891
+ *
892
+ * const client = new ApolloClient({
893
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
894
+ * cache: new InMemoryCache(),
895
+ * });
896
+ *
897
+ * function SuspenseFallback() {
898
+ * return <div>Loading...</div>;
899
+ * }
900
+ *
901
+ * function Child({ queryRef }) {
902
+ * const { data } = useReadQuery(queryRef);
903
+ *
904
+ * return <div>{data.foo.bar}</div>;
905
+ * }
906
+ *
907
+ * function Parent() {
908
+ * const [queryRef] = useBackgroundQuery(query);
909
+ *
910
+ * return (
911
+ * <Suspense fallback={<SuspenseFallback />}>
912
+ * <Child queryRef={queryRef} />
913
+ * </Suspense>
914
+ * );
915
+ * }
916
+ *
917
+ * function App() {
918
+ * return (
919
+ * <ApolloProvider client={client}>
920
+ * <Parent />
921
+ * </ApolloProvider>
922
+ * );
923
+ * }
924
+ * ```
925
+ *
926
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
927
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
309
928
  */
310
929
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useBackgroundQuery.Options<NoInfer<TVariables>> & {
311
930
  returnPartialData: boolean;
@@ -314,7 +933,69 @@ export declare namespace useBackgroundQuery {
314
933
  useBackgroundQuery.Result<TData, TVariables>
315
934
  ];
316
935
  /**
936
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
937
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
938
+ *
939
+ *
940
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
941
+ *
942
+ * @returns A tuple containing:
943
+ *
944
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
945
+ * 2. An object containing helper functions for the query:
946
+ * - `refetch`: A function to re-execute the query
947
+ * - `fetchMore`: A function to fetch more results for pagination
948
+ * - `subscribeToMore`: A function to subscribe to updates
949
+ *
950
+ * @example
951
+ *
952
+ * ```jsx
953
+ * import { Suspense } from "react";
954
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
955
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
956
+ *
957
+ * const query = gql`
958
+ * foo {
959
+ * bar
960
+ * }
961
+ * `;
962
+ *
963
+ * const client = new ApolloClient({
964
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
965
+ * cache: new InMemoryCache(),
966
+ * });
967
+ *
968
+ * function SuspenseFallback() {
969
+ * return <div>Loading...</div>;
970
+ * }
971
+ *
972
+ * function Child({ queryRef }) {
973
+ * const { data } = useReadQuery(queryRef);
974
+ *
975
+ * return <div>{data.foo.bar}</div>;
976
+ * }
317
977
  *
978
+ * function Parent() {
979
+ * const [queryRef] = useBackgroundQuery(query);
980
+ *
981
+ * return (
982
+ * <Suspense fallback={<SuspenseFallback />}>
983
+ * <Child queryRef={queryRef} />
984
+ * </Suspense>
985
+ * );
986
+ * }
987
+ *
988
+ * function App() {
989
+ * return (
990
+ * <ApolloProvider client={client}>
991
+ * <Parent />
992
+ * </ApolloProvider>
993
+ * );
994
+ * }
995
+ * ```
996
+ *
997
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
998
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
318
999
  */
319
1000
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useBackgroundQuery.Options<NoInfer<TVariables>> & {
320
1001
  skip: boolean;
@@ -323,11 +1004,135 @@ export declare namespace useBackgroundQuery {
323
1004
  useBackgroundQuery.Result<TData, TVariables>
324
1005
  ];
325
1006
  /**
1007
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
1008
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
1009
+ *
1010
+ *
1011
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
1012
+ *
1013
+ * @returns A tuple containing:
1014
+ *
1015
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
1016
+ * 2. An object containing helper functions for the query:
1017
+ * - `refetch`: A function to re-execute the query
1018
+ * - `fetchMore`: A function to fetch more results for pagination
1019
+ * - `subscribeToMore`: A function to subscribe to updates
1020
+ *
1021
+ * @example
1022
+ *
1023
+ * ```jsx
1024
+ * import { Suspense } from "react";
1025
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
1026
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
1027
+ *
1028
+ * const query = gql`
1029
+ * foo {
1030
+ * bar
1031
+ * }
1032
+ * `;
326
1033
  *
1034
+ * const client = new ApolloClient({
1035
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
1036
+ * cache: new InMemoryCache(),
1037
+ * });
1038
+ *
1039
+ * function SuspenseFallback() {
1040
+ * return <div>Loading...</div>;
1041
+ * }
1042
+ *
1043
+ * function Child({ queryRef }) {
1044
+ * const { data } = useReadQuery(queryRef);
1045
+ *
1046
+ * return <div>{data.foo.bar}</div>;
1047
+ * }
1048
+ *
1049
+ * function Parent() {
1050
+ * const [queryRef] = useBackgroundQuery(query);
1051
+ *
1052
+ * return (
1053
+ * <Suspense fallback={<SuspenseFallback />}>
1054
+ * <Child queryRef={queryRef} />
1055
+ * </Suspense>
1056
+ * );
1057
+ * }
1058
+ *
1059
+ * function App() {
1060
+ * return (
1061
+ * <ApolloProvider client={client}>
1062
+ * <Parent />
1063
+ * </ApolloProvider>
1064
+ * );
1065
+ * }
1066
+ * ```
1067
+ *
1068
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
1069
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
327
1070
  */
328
1071
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: SkipToken): [undefined, useBackgroundQuery.Result<TData, TVariables>];
329
1072
  /**
1073
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
1074
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
1075
+ *
1076
+ *
1077
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
1078
+ *
1079
+ * @returns A tuple containing:
330
1080
  *
1081
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
1082
+ * 2. An object containing helper functions for the query:
1083
+ * - `refetch`: A function to re-execute the query
1084
+ * - `fetchMore`: A function to fetch more results for pagination
1085
+ * - `subscribeToMore`: A function to subscribe to updates
1086
+ *
1087
+ * @example
1088
+ *
1089
+ * ```jsx
1090
+ * import { Suspense } from "react";
1091
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
1092
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
1093
+ *
1094
+ * const query = gql`
1095
+ * foo {
1096
+ * bar
1097
+ * }
1098
+ * `;
1099
+ *
1100
+ * const client = new ApolloClient({
1101
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
1102
+ * cache: new InMemoryCache(),
1103
+ * });
1104
+ *
1105
+ * function SuspenseFallback() {
1106
+ * return <div>Loading...</div>;
1107
+ * }
1108
+ *
1109
+ * function Child({ queryRef }) {
1110
+ * const { data } = useReadQuery(queryRef);
1111
+ *
1112
+ * return <div>{data.foo.bar}</div>;
1113
+ * }
1114
+ *
1115
+ * function Parent() {
1116
+ * const [queryRef] = useBackgroundQuery(query);
1117
+ *
1118
+ * return (
1119
+ * <Suspense fallback={<SuspenseFallback />}>
1120
+ * <Child queryRef={queryRef} />
1121
+ * </Suspense>
1122
+ * );
1123
+ * }
1124
+ *
1125
+ * function App() {
1126
+ * return (
1127
+ * <ApolloProvider client={client}>
1128
+ * <Parent />
1129
+ * </ApolloProvider>
1130
+ * );
1131
+ * }
1132
+ * ```
1133
+ *
1134
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
1135
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
331
1136
  */
332
1137
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: SkipToken | (useBackgroundQuery.Options<NoInfer<TVariables>> & {
333
1138
  returnPartialData: false;
@@ -336,7 +1141,69 @@ export declare namespace useBackgroundQuery {
336
1141
  useBackgroundQuery.Result<TData, TVariables>
337
1142
  ];
338
1143
  /**
1144
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
1145
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
1146
+ *
1147
+ *
1148
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
1149
+ *
1150
+ * @returns A tuple containing:
1151
+ *
1152
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
1153
+ * 2. An object containing helper functions for the query:
1154
+ * - `refetch`: A function to re-execute the query
1155
+ * - `fetchMore`: A function to fetch more results for pagination
1156
+ * - `subscribeToMore`: A function to subscribe to updates
1157
+ *
1158
+ * @example
1159
+ *
1160
+ * ```jsx
1161
+ * import { Suspense } from "react";
1162
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
1163
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
1164
+ *
1165
+ * const query = gql`
1166
+ * foo {
1167
+ * bar
1168
+ * }
1169
+ * `;
1170
+ *
1171
+ * const client = new ApolloClient({
1172
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
1173
+ * cache: new InMemoryCache(),
1174
+ * });
1175
+ *
1176
+ * function SuspenseFallback() {
1177
+ * return <div>Loading...</div>;
1178
+ * }
339
1179
  *
1180
+ * function Child({ queryRef }) {
1181
+ * const { data } = useReadQuery(queryRef);
1182
+ *
1183
+ * return <div>{data.foo.bar}</div>;
1184
+ * }
1185
+ *
1186
+ * function Parent() {
1187
+ * const [queryRef] = useBackgroundQuery(query);
1188
+ *
1189
+ * return (
1190
+ * <Suspense fallback={<SuspenseFallback />}>
1191
+ * <Child queryRef={queryRef} />
1192
+ * </Suspense>
1193
+ * );
1194
+ * }
1195
+ *
1196
+ * function App() {
1197
+ * return (
1198
+ * <ApolloProvider client={client}>
1199
+ * <Parent />
1200
+ * </ApolloProvider>
1201
+ * );
1202
+ * }
1203
+ * ```
1204
+ *
1205
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
1206
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
340
1207
  */
341
1208
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: SkipToken | (useBackgroundQuery.Options<NoInfer<TVariables>> & {
342
1209
  returnPartialData: boolean;
@@ -345,7 +1212,69 @@ export declare namespace useBackgroundQuery {
345
1212
  useBackgroundQuery.Result<TData, TVariables>
346
1213
  ];
347
1214
  /**
1215
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
1216
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
1217
+ *
1218
+ *
1219
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
1220
+ *
1221
+ * @returns A tuple containing:
1222
+ *
1223
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
1224
+ * 2. An object containing helper functions for the query:
1225
+ * - `refetch`: A function to re-execute the query
1226
+ * - `fetchMore`: A function to fetch more results for pagination
1227
+ * - `subscribeToMore`: A function to subscribe to updates
1228
+ *
1229
+ * @example
1230
+ *
1231
+ * ```jsx
1232
+ * import { Suspense } from "react";
1233
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
1234
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
1235
+ *
1236
+ * const query = gql`
1237
+ * foo {
1238
+ * bar
1239
+ * }
1240
+ * `;
1241
+ *
1242
+ * const client = new ApolloClient({
1243
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
1244
+ * cache: new InMemoryCache(),
1245
+ * });
1246
+ *
1247
+ * function SuspenseFallback() {
1248
+ * return <div>Loading...</div>;
1249
+ * }
1250
+ *
1251
+ * function Child({ queryRef }) {
1252
+ * const { data } = useReadQuery(queryRef);
1253
+ *
1254
+ * return <div>{data.foo.bar}</div>;
1255
+ * }
1256
+ *
1257
+ * function Parent() {
1258
+ * const [queryRef] = useBackgroundQuery(query);
1259
+ *
1260
+ * return (
1261
+ * <Suspense fallback={<SuspenseFallback />}>
1262
+ * <Child queryRef={queryRef} />
1263
+ * </Suspense>
1264
+ * );
1265
+ * }
1266
+ *
1267
+ * function App() {
1268
+ * return (
1269
+ * <ApolloProvider client={client}>
1270
+ * <Parent />
1271
+ * </ApolloProvider>
1272
+ * );
1273
+ * }
1274
+ * ```
348
1275
  *
1276
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
1277
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
349
1278
  */
350
1279
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, ...[options]: {} extends TVariables ? [
351
1280
  options?: useBackgroundQuery.Options<NoInfer<TVariables>>
@@ -354,7 +1283,69 @@ export declare namespace useBackgroundQuery {
354
1283
  useBackgroundQuery.Result<TData, TVariables>
355
1284
  ];
356
1285
  /**
1286
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
1287
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
357
1288
  *
1289
+ *
1290
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
1291
+ *
1292
+ * @returns A tuple containing:
1293
+ *
1294
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
1295
+ * 2. An object containing helper functions for the query:
1296
+ * - `refetch`: A function to re-execute the query
1297
+ * - `fetchMore`: A function to fetch more results for pagination
1298
+ * - `subscribeToMore`: A function to subscribe to updates
1299
+ *
1300
+ * @example
1301
+ *
1302
+ * ```jsx
1303
+ * import { Suspense } from "react";
1304
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
1305
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
1306
+ *
1307
+ * const query = gql`
1308
+ * foo {
1309
+ * bar
1310
+ * }
1311
+ * `;
1312
+ *
1313
+ * const client = new ApolloClient({
1314
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
1315
+ * cache: new InMemoryCache(),
1316
+ * });
1317
+ *
1318
+ * function SuspenseFallback() {
1319
+ * return <div>Loading...</div>;
1320
+ * }
1321
+ *
1322
+ * function Child({ queryRef }) {
1323
+ * const { data } = useReadQuery(queryRef);
1324
+ *
1325
+ * return <div>{data.foo.bar}</div>;
1326
+ * }
1327
+ *
1328
+ * function Parent() {
1329
+ * const [queryRef] = useBackgroundQuery(query);
1330
+ *
1331
+ * return (
1332
+ * <Suspense fallback={<SuspenseFallback />}>
1333
+ * <Child queryRef={queryRef} />
1334
+ * </Suspense>
1335
+ * );
1336
+ * }
1337
+ *
1338
+ * function App() {
1339
+ * return (
1340
+ * <ApolloProvider client={client}>
1341
+ * <Parent />
1342
+ * </ApolloProvider>
1343
+ * );
1344
+ * }
1345
+ * ```
1346
+ *
1347
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
1348
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
358
1349
  */
359
1350
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, ...[options]: {} extends TVariables ? [
360
1351
  options?: SkipToken | useBackgroundQuery.Options<NoInfer<TVariables>>
@@ -363,7 +1354,69 @@ export declare namespace useBackgroundQuery {
363
1354
  useBackgroundQuery.Result<TData, TVariables>
364
1355
  ];
365
1356
  /**
1357
+ * @deprecated Avoid manually specifying generics on `useBackgroundQuery`.
1358
+ * Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
1359
+ *
1360
+ *
1361
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
1362
+ *
1363
+ * @returns A tuple containing:
1364
+ *
1365
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
1366
+ * 2. An object containing helper functions for the query:
1367
+ * - `refetch`: A function to re-execute the query
1368
+ * - `fetchMore`: A function to fetch more results for pagination
1369
+ * - `subscribeToMore`: A function to subscribe to updates
1370
+ *
1371
+ * @example
1372
+ *
1373
+ * ```jsx
1374
+ * import { Suspense } from "react";
1375
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
1376
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
366
1377
  *
1378
+ * const query = gql`
1379
+ * foo {
1380
+ * bar
1381
+ * }
1382
+ * `;
1383
+ *
1384
+ * const client = new ApolloClient({
1385
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
1386
+ * cache: new InMemoryCache(),
1387
+ * });
1388
+ *
1389
+ * function SuspenseFallback() {
1390
+ * return <div>Loading...</div>;
1391
+ * }
1392
+ *
1393
+ * function Child({ queryRef }) {
1394
+ * const { data } = useReadQuery(queryRef);
1395
+ *
1396
+ * return <div>{data.foo.bar}</div>;
1397
+ * }
1398
+ *
1399
+ * function Parent() {
1400
+ * const [queryRef] = useBackgroundQuery(query);
1401
+ *
1402
+ * return (
1403
+ * <Suspense fallback={<SuspenseFallback />}>
1404
+ * <Child queryRef={queryRef} />
1405
+ * </Suspense>
1406
+ * );
1407
+ * }
1408
+ *
1409
+ * function App() {
1410
+ * return (
1411
+ * <ApolloProvider client={client}>
1412
+ * <Parent />
1413
+ * </ApolloProvider>
1414
+ * );
1415
+ * }
1416
+ * ```
1417
+ *
1418
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
1419
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
367
1420
  */
368
1421
  <TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: SkipToken | useBackgroundQuery.Options<NoInfer<TVariables>>): [
369
1422
  QueryRef<TData, TVariables, "complete" | "streaming"> | undefined,
@@ -371,25 +1424,315 @@ export declare namespace useBackgroundQuery {
371
1424
  ];
372
1425
  }
373
1426
  /**
1427
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
1428
+ *
1429
+ * @returns A tuple containing:
1430
+ *
1431
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
1432
+ * 2. An object containing helper functions for the query:
1433
+ * - `refetch`: A function to re-execute the query
1434
+ * - `fetchMore`: A function to fetch more results for pagination
1435
+ * - `subscribeToMore`: A function to subscribe to updates
374
1436
  *
1437
+ * @example
1438
+ *
1439
+ * ```jsx
1440
+ * import { Suspense } from "react";
1441
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
1442
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
1443
+ *
1444
+ * const query = gql`
1445
+ * foo {
1446
+ * bar
1447
+ * }
1448
+ * `;
1449
+ *
1450
+ * const client = new ApolloClient({
1451
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
1452
+ * cache: new InMemoryCache(),
1453
+ * });
1454
+ *
1455
+ * function SuspenseFallback() {
1456
+ * return <div>Loading...</div>;
1457
+ * }
1458
+ *
1459
+ * function Child({ queryRef }) {
1460
+ * const { data } = useReadQuery(queryRef);
1461
+ *
1462
+ * return <div>{data.foo.bar}</div>;
1463
+ * }
1464
+ *
1465
+ * function Parent() {
1466
+ * const [queryRef] = useBackgroundQuery(query);
1467
+ *
1468
+ * return (
1469
+ * <Suspense fallback={<SuspenseFallback />}>
1470
+ * <Child queryRef={queryRef} />
1471
+ * </Suspense>
1472
+ * );
1473
+ * }
1474
+ *
1475
+ * function App() {
1476
+ * return (
1477
+ * <ApolloProvider client={client}>
1478
+ * <Parent />
1479
+ * </ApolloProvider>
1480
+ * );
1481
+ * }
1482
+ * ```
1483
+ *
1484
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
1485
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
375
1486
  */
376
1487
  interface Modern {
377
1488
  /**
1489
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
1490
+ *
1491
+ * @returns A tuple containing:
378
1492
  *
1493
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
1494
+ * 2. An object containing helper functions for the query:
1495
+ * - `refetch`: A function to re-execute the query
1496
+ * - `fetchMore`: A function to fetch more results for pagination
1497
+ * - `subscribeToMore`: A function to subscribe to updates
1498
+ *
1499
+ * @example
1500
+ *
1501
+ * ```jsx
1502
+ * import { Suspense } from "react";
1503
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
1504
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
1505
+ *
1506
+ * const query = gql`
1507
+ * foo {
1508
+ * bar
1509
+ * }
1510
+ * `;
1511
+ *
1512
+ * const client = new ApolloClient({
1513
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
1514
+ * cache: new InMemoryCache(),
1515
+ * });
1516
+ *
1517
+ * function SuspenseFallback() {
1518
+ * return <div>Loading...</div>;
1519
+ * }
1520
+ *
1521
+ * function Child({ queryRef }) {
1522
+ * const { data } = useReadQuery(queryRef);
1523
+ *
1524
+ * return <div>{data.foo.bar}</div>;
1525
+ * }
1526
+ *
1527
+ * function Parent() {
1528
+ * const [queryRef] = useBackgroundQuery(query);
1529
+ *
1530
+ * return (
1531
+ * <Suspense fallback={<SuspenseFallback />}>
1532
+ * <Child queryRef={queryRef} />
1533
+ * </Suspense>
1534
+ * );
1535
+ * }
1536
+ *
1537
+ * function App() {
1538
+ * return (
1539
+ * <ApolloProvider client={client}>
1540
+ * <Parent />
1541
+ * </ApolloProvider>
1542
+ * );
1543
+ * }
1544
+ * ```
1545
+ *
1546
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
1547
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
379
1548
  */
380
1549
  <TData, TVariables extends OperationVariables, TOptions extends never>(query: {} extends TVariables ? DocumentNode | TypedDocumentNode<TData, TVariables> : never): useBackgroundQuery.ResultForOptions<TData, TVariables, Record<string, never>>;
381
1550
  /**
1551
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
1552
+ *
1553
+ * @returns A tuple containing:
1554
+ *
1555
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
1556
+ * 2. An object containing helper functions for the query:
1557
+ * - `refetch`: A function to re-execute the query
1558
+ * - `fetchMore`: A function to fetch more results for pagination
1559
+ * - `subscribeToMore`: A function to subscribe to updates
1560
+ *
1561
+ * @example
1562
+ *
1563
+ * ```jsx
1564
+ * import { Suspense } from "react";
1565
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
1566
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
1567
+ *
1568
+ * const query = gql`
1569
+ * foo {
1570
+ * bar
1571
+ * }
1572
+ * `;
1573
+ *
1574
+ * const client = new ApolloClient({
1575
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
1576
+ * cache: new InMemoryCache(),
1577
+ * });
1578
+ *
1579
+ * function SuspenseFallback() {
1580
+ * return <div>Loading...</div>;
1581
+ * }
1582
+ *
1583
+ * function Child({ queryRef }) {
1584
+ * const { data } = useReadQuery(queryRef);
1585
+ *
1586
+ * return <div>{data.foo.bar}</div>;
1587
+ * }
382
1588
  *
1589
+ * function Parent() {
1590
+ * const [queryRef] = useBackgroundQuery(query);
1591
+ *
1592
+ * return (
1593
+ * <Suspense fallback={<SuspenseFallback />}>
1594
+ * <Child queryRef={queryRef} />
1595
+ * </Suspense>
1596
+ * );
1597
+ * }
1598
+ *
1599
+ * function App() {
1600
+ * return (
1601
+ * <ApolloProvider client={client}>
1602
+ * <Parent />
1603
+ * </ApolloProvider>
1604
+ * );
1605
+ * }
1606
+ * ```
1607
+ *
1608
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
1609
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
383
1610
  */
384
1611
  <TData, TVariables extends OperationVariables, TOptions extends never>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, skipToken: SkipToken): useBackgroundQuery.ResultForOptions<TData, TVariables, SkipToken>;
385
1612
  /**
1613
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
1614
+ *
1615
+ * @returns A tuple containing:
1616
+ *
1617
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
1618
+ * 2. An object containing helper functions for the query:
1619
+ * - `refetch`: A function to re-execute the query
1620
+ * - `fetchMore`: A function to fetch more results for pagination
1621
+ * - `subscribeToMore`: A function to subscribe to updates
1622
+ *
1623
+ * @example
1624
+ *
1625
+ * ```jsx
1626
+ * import { Suspense } from "react";
1627
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
1628
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
1629
+ *
1630
+ * const query = gql`
1631
+ * foo {
1632
+ * bar
1633
+ * }
1634
+ * `;
1635
+ *
1636
+ * const client = new ApolloClient({
1637
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
1638
+ * cache: new InMemoryCache(),
1639
+ * });
1640
+ *
1641
+ * function SuspenseFallback() {
1642
+ * return <div>Loading...</div>;
1643
+ * }
386
1644
  *
1645
+ * function Child({ queryRef }) {
1646
+ * const { data } = useReadQuery(queryRef);
1647
+ *
1648
+ * return <div>{data.foo.bar}</div>;
1649
+ * }
1650
+ *
1651
+ * function Parent() {
1652
+ * const [queryRef] = useBackgroundQuery(query);
1653
+ *
1654
+ * return (
1655
+ * <Suspense fallback={<SuspenseFallback />}>
1656
+ * <Child queryRef={queryRef} />
1657
+ * </Suspense>
1658
+ * );
1659
+ * }
1660
+ *
1661
+ * function App() {
1662
+ * return (
1663
+ * <ApolloProvider client={client}>
1664
+ * <Parent />
1665
+ * </ApolloProvider>
1666
+ * );
1667
+ * }
1668
+ * ```
1669
+ *
1670
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
1671
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
387
1672
  */
388
1673
  <TData, TVariables extends OperationVariables, TOptions extends useBackgroundQuery.Options<NoInfer<TVariables>> & VariablesOption<TVariables & {
389
1674
  [K in Exclude<keyof TOptions["variables"], keyof TVariables>]?: never;
390
1675
  }>>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, ...[options]: {} extends TVariables ? [options?: TOptions] : [options: TOptions]): useBackgroundQuery.ResultForOptions<TData, TVariables, TOptions>;
391
1676
  /**
1677
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
1678
+ *
1679
+ * @returns A tuple containing:
1680
+ *
1681
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
1682
+ * 2. An object containing helper functions for the query:
1683
+ * - `refetch`: A function to re-execute the query
1684
+ * - `fetchMore`: A function to fetch more results for pagination
1685
+ * - `subscribeToMore`: A function to subscribe to updates
1686
+ *
1687
+ * @example
1688
+ *
1689
+ * ```jsx
1690
+ * import { Suspense } from "react";
1691
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
1692
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
392
1693
  *
1694
+ * const query = gql`
1695
+ * foo {
1696
+ * bar
1697
+ * }
1698
+ * `;
1699
+ *
1700
+ * const client = new ApolloClient({
1701
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
1702
+ * cache: new InMemoryCache(),
1703
+ * });
1704
+ *
1705
+ * function SuspenseFallback() {
1706
+ * return <div>Loading...</div>;
1707
+ * }
1708
+ *
1709
+ * function Child({ queryRef }) {
1710
+ * const { data } = useReadQuery(queryRef);
1711
+ *
1712
+ * return <div>{data.foo.bar}</div>;
1713
+ * }
1714
+ *
1715
+ * function Parent() {
1716
+ * const [queryRef] = useBackgroundQuery(query);
1717
+ *
1718
+ * return (
1719
+ * <Suspense fallback={<SuspenseFallback />}>
1720
+ * <Child queryRef={queryRef} />
1721
+ * </Suspense>
1722
+ * );
1723
+ * }
1724
+ *
1725
+ * function App() {
1726
+ * return (
1727
+ * <ApolloProvider client={client}>
1728
+ * <Parent />
1729
+ * </ApolloProvider>
1730
+ * );
1731
+ * }
1732
+ * ```
1733
+ *
1734
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
1735
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
393
1736
  */
394
1737
  <TData, TVariables extends OperationVariables, TOptions extends useBackgroundQuery.Options<NoInfer<TVariables>> & VariablesOption<TVariables & {
395
1738
  [K in Exclude<keyof TOptions["variables"], keyof TVariables>]?: never;
@@ -398,7 +1741,65 @@ export declare namespace useBackgroundQuery {
398
1741
  type Evaluated = SignatureStyle extends "classic" ? Classic : Modern;
399
1742
  }
400
1743
  /**
1744
+ * For a detailed explanation of useBackgroundQuery, see the [fetching with Suspense reference](https://www.apollographql.com/docs/react/data/suspense).
1745
+ *
1746
+ * @returns A tuple containing:
1747
+ *
1748
+ * 1. A `QueryRef` that can be passed to `useReadQuery` to read the query result. The `queryRef` is `undefined` if the query is skipped.
1749
+ * 2. An object containing helper functions for the query:
1750
+ * - `refetch`: A function to re-execute the query
1751
+ * - `fetchMore`: A function to fetch more results for pagination
1752
+ * - `subscribeToMore`: A function to subscribe to updates
1753
+ *
1754
+ * @example
1755
+ *
1756
+ * ```jsx
1757
+ * import { Suspense } from "react";
1758
+ * import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
1759
+ * import { useBackgroundQuery, useReadQuery } from "@apollo/client/react";
1760
+ *
1761
+ * const query = gql`
1762
+ * foo {
1763
+ * bar
1764
+ * }
1765
+ * `;
1766
+ *
1767
+ * const client = new ApolloClient({
1768
+ * link: new HttpLink({ uri: "http://localhost:4000/graphql" }),
1769
+ * cache: new InMemoryCache(),
1770
+ * });
1771
+ *
1772
+ * function SuspenseFallback() {
1773
+ * return <div>Loading...</div>;
1774
+ * }
1775
+ *
1776
+ * function Child({ queryRef }) {
1777
+ * const { data } = useReadQuery(queryRef);
1778
+ *
1779
+ * return <div>{data.foo.bar}</div>;
1780
+ * }
1781
+ *
1782
+ * function Parent() {
1783
+ * const [queryRef] = useBackgroundQuery(query);
1784
+ *
1785
+ * return (
1786
+ * <Suspense fallback={<SuspenseFallback />}>
1787
+ * <Child queryRef={queryRef} />
1788
+ * </Suspense>
1789
+ * );
1790
+ * }
1791
+ *
1792
+ * function App() {
1793
+ * return (
1794
+ * <ApolloProvider client={client}>
1795
+ * <Parent />
1796
+ * </ApolloProvider>
1797
+ * );
1798
+ * }
1799
+ * ```
401
1800
  *
1801
+ * @param query - A GraphQL query document parsed into an AST by `gql`.
1802
+ * @param options - An optional object containing options for the query. Instead of passing a `useBackgroundQuery.Options` object into the hook, you can also pass a [`skipToken`](#skiptoken) to prevent the `useBackgroundQuery` hook from executing the query or suspending.
402
1803
  */
403
1804
  interface Signature extends Signatures.Evaluated {
404
1805
  }