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