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