@apollo/client 4.2.0-alpha.2 → 4.2.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +61 -0
- package/__cjs/core/ApolloClient.cjs +9 -9
- package/__cjs/core/ApolloClient.cjs.map +1 -1
- package/__cjs/core/ApolloClient.d.cts +131 -21
- package/__cjs/link/ws/index.cjs +9 -1
- package/__cjs/link/ws/index.cjs.map +1 -1
- package/__cjs/link/ws/index.d.cts +1 -1
- package/__cjs/react/hooks/useBackgroundQuery.cjs.map +1 -1
- package/__cjs/react/hooks/useBackgroundQuery.d.cts +1466 -65
- package/__cjs/react/hooks/useLazyQuery.cjs.map +1 -1
- package/__cjs/react/hooks/useLazyQuery.d.cts +346 -39
- package/__cjs/react/hooks/useLoadableQuery.cjs.map +1 -1
- package/__cjs/react/hooks/useLoadableQuery.d.cts +492 -49
- package/__cjs/react/hooks/useMutation.cjs +5 -48
- package/__cjs/react/hooks/useMutation.cjs.map +1 -1
- package/__cjs/react/hooks/useMutation.d.cts +239 -130
- package/__cjs/react/hooks/useQuery.cjs.map +1 -1
- package/__cjs/react/hooks/useQuery.d.cts +570 -40
- package/__cjs/react/hooks/useSubscription.cjs +1 -1
- package/__cjs/react/hooks/useSubscription.cjs.map +1 -1
- package/__cjs/react/hooks/useSubscription.d.cts +2 -2
- package/__cjs/react/hooks/useSuspenseQuery.cjs.map +1 -1
- package/__cjs/react/hooks/useSuspenseQuery.d.cts +734 -45
- package/__cjs/version.cjs +1 -1
- package/core/ApolloClient.d.ts +131 -21
- package/core/ApolloClient.js +9 -9
- package/core/ApolloClient.js.map +1 -1
- package/link/ws/index.d.ts +1 -1
- package/link/ws/index.js +9 -1
- package/link/ws/index.js.map +1 -1
- package/package.json +3 -7
- package/react/hooks/useBackgroundQuery.d.ts +1466 -65
- package/react/hooks/useBackgroundQuery.js.map +1 -1
- package/react/hooks/useLazyQuery.d.ts +346 -39
- package/react/hooks/useLazyQuery.js.map +1 -1
- package/react/hooks/useLoadableQuery.d.ts +492 -49
- package/react/hooks/useLoadableQuery.js.map +1 -1
- package/react/hooks/useMutation.d.ts +239 -130
- package/react/hooks/useMutation.js +5 -48
- package/react/hooks/useMutation.js.map +1 -1
- package/react/hooks/useQuery.d.ts +570 -40
- package/react/hooks/useQuery.js.map +1 -1
- package/react/hooks/useSubscription.d.ts +2 -2
- package/react/hooks/useSubscription.js +1 -1
- package/react/hooks/useSubscription.js.map +1 -1
- package/react/hooks/useSuspenseQuery.d.ts +734 -45
- package/react/hooks/useSuspenseQuery.js.map +1 -1
- package/react/hooks-compiled/useBackgroundQuery.d.ts +1466 -65
- package/react/hooks-compiled/useBackgroundQuery.js.map +1 -1
- package/react/hooks-compiled/useLazyQuery.d.ts +346 -39
- package/react/hooks-compiled/useLazyQuery.js.map +1 -1
- package/react/hooks-compiled/useLoadableQuery.d.ts +492 -49
- package/react/hooks-compiled/useLoadableQuery.js.map +1 -1
- package/react/hooks-compiled/useMutation.d.ts +239 -130
- package/react/hooks-compiled/useMutation.js +4 -47
- package/react/hooks-compiled/useMutation.js.map +1 -1
- package/react/hooks-compiled/useQuery.d.ts +570 -40
- package/react/hooks-compiled/useQuery.js.map +1 -1
- package/react/hooks-compiled/useSubscription.d.ts +2 -2
- package/react/hooks-compiled/useSubscription.js +1 -1
- package/react/hooks-compiled/useSubscription.js.map +1 -1
- package/react/hooks-compiled/useSuspenseQuery.d.ts +734 -45
- package/react/hooks-compiled/useSuspenseQuery.js.map +1 -1
- package/skills/apollo-client/SKILL.md +168 -0
- package/skills/apollo-client/references/caching.md +560 -0
- package/skills/apollo-client/references/error-handling.md +350 -0
- package/skills/apollo-client/references/fragments.md +804 -0
- package/skills/apollo-client/references/integration-client.md +336 -0
- package/skills/apollo-client/references/integration-nextjs.md +325 -0
- package/skills/apollo-client/references/integration-react-router.md +256 -0
- package/skills/apollo-client/references/integration-tanstack-start.md +378 -0
- package/skills/apollo-client/references/mutations.md +549 -0
- package/skills/apollo-client/references/queries.md +416 -0
- package/skills/apollo-client/references/state-management.md +428 -0
- package/skills/apollo-client/references/suspense-hooks.md +773 -0
- package/skills/apollo-client/references/troubleshooting.md +487 -0
- package/skills/apollo-client/references/typescript-codegen.md +133 -0
- package/version.js +1 -1
|
@@ -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
|
}
|