@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, DataState, DefaultContext, DocumentNode, ErrorPolicy, OperationVariables, RefetchWritePolicy, TypedDocumentNode, WatchQueryFetchPolicy } from "@apollo/client";
|
|
1
|
+
import type { ApolloClient, DataState, 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";
|
|
@@ -109,113 +109,575 @@ export declare namespace useLoadableQuery {
|
|
|
109
109
|
* @docGroup 3. Caching options
|
|
110
110
|
*/
|
|
111
111
|
returnPartialData?: boolean;
|
|
112
|
+
/**
|
|
113
|
+
* Determines whether events trigger refetches for the query. Provide an
|
|
114
|
+
* object mapping each refetch event to `true` (enable), `false` (disable)
|
|
115
|
+
* or a callback function that returns `true`/`false` to control individual
|
|
116
|
+
* events. Provide `false` to disable all automatic refetch events for this
|
|
117
|
+
* query. Provide `true` to enable all automatic refetch events for this query.
|
|
118
|
+
* Provide a callback function to perform additional logic to determine
|
|
119
|
+
* whether to enable or disable a refetch for a query.
|
|
120
|
+
*
|
|
121
|
+
* `@remarks`
|
|
122
|
+
* `refetchOn` inherits from `defaultOptions.watchQuery.refetchOn`. If
|
|
123
|
+
* `defaultOptions.watchQuery.refetchOn` is not set, all refetch events are
|
|
124
|
+
* enabled by default.
|
|
125
|
+
*
|
|
126
|
+
* This option only has an effect when the client is configured with a
|
|
127
|
+
* `refetchEventManager`.
|
|
128
|
+
* @docGroup 1. Operation options
|
|
129
|
+
*/
|
|
130
|
+
refetchOn?: RefetchOn.Option;
|
|
112
131
|
}
|
|
113
132
|
interface DefaultOptions extends ApolloClient.DefaultOptions.WatchQuery.Calculated {
|
|
114
133
|
}
|
|
115
134
|
type ResultForOptions<TData, TVariables extends OperationVariables, TOptions extends Record<string, never> | Options> = Result<TData, TVariables, "complete" | "streaming" | (OptionWithFallback<TOptions, DefaultOptions, "errorPolicy"> extends ("none") ? never : "empty") | (OptionWithFallback<TOptions, DefaultOptions, "returnPartialData"> extends false ? never : "partial")>;
|
|
116
135
|
namespace DocumentationTypes {
|
|
117
|
-
/**
|
|
118
|
-
* A hook for imperatively loading a query, such as responding to a user
|
|
119
|
-
* interaction.
|
|
120
|
-
*
|
|
121
|
-
* > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`.
|
|
122
|
-
*
|
|
123
|
-
* @example
|
|
124
|
-
*
|
|
125
|
-
* ```jsx
|
|
126
|
-
* import { gql, useLoadableQuery } from "@apollo/client";
|
|
127
|
-
*
|
|
128
|
-
* const GET_GREETING = gql`
|
|
129
|
-
* query GetGreeting($language: String!) {
|
|
130
|
-
* greeting(language: $language) {
|
|
131
|
-
* message
|
|
132
|
-
* }
|
|
133
|
-
* }
|
|
134
|
-
* `;
|
|
135
|
-
*
|
|
136
|
-
* function App() {
|
|
137
|
-
* const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);
|
|
138
|
-
*
|
|
139
|
-
* return (
|
|
140
|
-
* <>
|
|
141
|
-
* <button onClick={() => loadGreeting({ language: "english" })}>
|
|
142
|
-
* Load greeting
|
|
143
|
-
* </button>
|
|
144
|
-
* <Suspense fallback={<div>Loading...</div>}>
|
|
145
|
-
* {queryRef && <Hello queryRef={queryRef} />}
|
|
146
|
-
* </Suspense>
|
|
147
|
-
* </>
|
|
148
|
-
* );
|
|
149
|
-
* }
|
|
150
|
-
*
|
|
151
|
-
* function Hello({ queryRef }) {
|
|
152
|
-
* const { data } = useReadQuery(queryRef);
|
|
153
|
-
*
|
|
154
|
-
* return <div>{data.greeting.message}</div>;
|
|
155
|
-
* }
|
|
156
|
-
* ```
|
|
157
|
-
*
|
|
158
|
-
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
159
|
-
* @param options - Options to control how the query is executed.
|
|
160
|
-
* @returns A tuple in the form of `[loadQuery, queryRef, handlers]`
|
|
161
|
-
*/
|
|
162
136
|
interface useLoadableQuery {
|
|
137
|
+
/**
|
|
138
|
+
* A hook for imperatively loading a query, such as responding to a user
|
|
139
|
+
* interaction.
|
|
140
|
+
*
|
|
141
|
+
* > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`.
|
|
142
|
+
*
|
|
143
|
+
* @example
|
|
144
|
+
*
|
|
145
|
+
* ```jsx
|
|
146
|
+
* import { gql, useLoadableQuery } from "@apollo/client";
|
|
147
|
+
*
|
|
148
|
+
* const GET_GREETING = gql`
|
|
149
|
+
* query GetGreeting($language: String!) {
|
|
150
|
+
* greeting(language: $language) {
|
|
151
|
+
* message
|
|
152
|
+
* }
|
|
153
|
+
* }
|
|
154
|
+
* `;
|
|
155
|
+
*
|
|
156
|
+
* function App() {
|
|
157
|
+
* const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);
|
|
158
|
+
*
|
|
159
|
+
* return (
|
|
160
|
+
* <>
|
|
161
|
+
* <button onClick={() => loadGreeting({ language: "english" })}>
|
|
162
|
+
* Load greeting
|
|
163
|
+
* </button>
|
|
164
|
+
* <Suspense fallback={<div>Loading...</div>}>
|
|
165
|
+
* {queryRef && <Hello queryRef={queryRef} />}
|
|
166
|
+
* </Suspense>
|
|
167
|
+
* </>
|
|
168
|
+
* );
|
|
169
|
+
* }
|
|
170
|
+
*
|
|
171
|
+
* function Hello({ queryRef }) {
|
|
172
|
+
* const { data } = useReadQuery(queryRef);
|
|
173
|
+
*
|
|
174
|
+
* return <div>{data.greeting.message}</div>;
|
|
175
|
+
* }
|
|
176
|
+
* ```
|
|
177
|
+
*
|
|
178
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
179
|
+
* @param options - Options to control how the query is executed.
|
|
180
|
+
* @returns A tuple in the form of `[loadQuery, queryRef, handlers]`
|
|
181
|
+
*/
|
|
163
182
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useLoadableQuery.Options): useLoadableQuery.Result<TData, TVariables>;
|
|
164
183
|
}
|
|
165
|
-
/**
|
|
166
|
-
* @deprecated Avoid manually specifying generics on `useLoadableQuery`.
|
|
167
|
-
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
168
|
-
*/
|
|
169
184
|
interface useLoadableQuery_Deprecated {
|
|
185
|
+
/**
|
|
186
|
+
* @deprecated Avoid manually specifying generics on `useLoadableQuery`.
|
|
187
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
188
|
+
*
|
|
189
|
+
*
|
|
190
|
+
* A hook for imperatively loading a query, such as responding to a user
|
|
191
|
+
* interaction.
|
|
192
|
+
*
|
|
193
|
+
* > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`.
|
|
194
|
+
*
|
|
195
|
+
* @example
|
|
196
|
+
*
|
|
197
|
+
* ```jsx
|
|
198
|
+
* import { gql, useLoadableQuery } from "@apollo/client";
|
|
199
|
+
*
|
|
200
|
+
* const GET_GREETING = gql`
|
|
201
|
+
* query GetGreeting($language: String!) {
|
|
202
|
+
* greeting(language: $language) {
|
|
203
|
+
* message
|
|
204
|
+
* }
|
|
205
|
+
* }
|
|
206
|
+
* `;
|
|
207
|
+
*
|
|
208
|
+
* function App() {
|
|
209
|
+
* const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);
|
|
210
|
+
*
|
|
211
|
+
* return (
|
|
212
|
+
* <>
|
|
213
|
+
* <button onClick={() => loadGreeting({ language: "english" })}>
|
|
214
|
+
* Load greeting
|
|
215
|
+
* </button>
|
|
216
|
+
* <Suspense fallback={<div>Loading...</div>}>
|
|
217
|
+
* {queryRef && <Hello queryRef={queryRef} />}
|
|
218
|
+
* </Suspense>
|
|
219
|
+
* </>
|
|
220
|
+
* );
|
|
221
|
+
* }
|
|
222
|
+
*
|
|
223
|
+
* function Hello({ queryRef }) {
|
|
224
|
+
* const { data } = useReadQuery(queryRef);
|
|
225
|
+
*
|
|
226
|
+
* return <div>{data.greeting.message}</div>;
|
|
227
|
+
* }
|
|
228
|
+
* ```
|
|
229
|
+
*
|
|
230
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
231
|
+
* @param options - Options to control how the query is executed.
|
|
232
|
+
* @returns A tuple in the form of `[loadQuery, queryRef, handlers]`
|
|
233
|
+
*/
|
|
170
234
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useLoadableQuery.Options): useLoadableQuery.Result<TData, TVariables>;
|
|
171
235
|
}
|
|
172
236
|
}
|
|
173
237
|
namespace Signatures {
|
|
174
238
|
/**
|
|
239
|
+
* @deprecated Avoid manually specifying generics on `useLoadableQuery`.
|
|
240
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
241
|
+
*
|
|
242
|
+
*
|
|
243
|
+
* A hook for imperatively loading a query, such as responding to a user
|
|
244
|
+
* interaction.
|
|
175
245
|
*
|
|
246
|
+
* > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`.
|
|
247
|
+
*
|
|
248
|
+
* @example
|
|
249
|
+
*
|
|
250
|
+
* ```jsx
|
|
251
|
+
* import { gql, useLoadableQuery } from "@apollo/client";
|
|
252
|
+
*
|
|
253
|
+
* const GET_GREETING = gql`
|
|
254
|
+
* query GetGreeting($language: String!) {
|
|
255
|
+
* greeting(language: $language) {
|
|
256
|
+
* message
|
|
257
|
+
* }
|
|
258
|
+
* }
|
|
259
|
+
* `;
|
|
260
|
+
*
|
|
261
|
+
* function App() {
|
|
262
|
+
* const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);
|
|
263
|
+
*
|
|
264
|
+
* return (
|
|
265
|
+
* <>
|
|
266
|
+
* <button onClick={() => loadGreeting({ language: "english" })}>
|
|
267
|
+
* Load greeting
|
|
268
|
+
* </button>
|
|
269
|
+
* <Suspense fallback={<div>Loading...</div>}>
|
|
270
|
+
* {queryRef && <Hello queryRef={queryRef} />}
|
|
271
|
+
* </Suspense>
|
|
272
|
+
* </>
|
|
273
|
+
* );
|
|
274
|
+
* }
|
|
275
|
+
*
|
|
276
|
+
* function Hello({ queryRef }) {
|
|
277
|
+
* const { data } = useReadQuery(queryRef);
|
|
278
|
+
*
|
|
279
|
+
* return <div>{data.greeting.message}</div>;
|
|
280
|
+
* }
|
|
281
|
+
* ```
|
|
282
|
+
*
|
|
283
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
284
|
+
* @param options - Options to control how the query is executed.
|
|
285
|
+
* @returns A tuple in the form of `[loadQuery, queryRef, handlers]`
|
|
176
286
|
*/
|
|
177
287
|
interface Classic {
|
|
178
288
|
/**
|
|
289
|
+
* @deprecated Avoid manually specifying generics on `useLoadableQuery`.
|
|
290
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
291
|
+
*
|
|
292
|
+
*
|
|
293
|
+
* A hook for imperatively loading a query, such as responding to a user
|
|
294
|
+
* interaction.
|
|
295
|
+
*
|
|
296
|
+
* > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`.
|
|
297
|
+
*
|
|
298
|
+
* @example
|
|
299
|
+
*
|
|
300
|
+
* ```jsx
|
|
301
|
+
* import { gql, useLoadableQuery } from "@apollo/client";
|
|
302
|
+
*
|
|
303
|
+
* const GET_GREETING = gql`
|
|
304
|
+
* query GetGreeting($language: String!) {
|
|
305
|
+
* greeting(language: $language) {
|
|
306
|
+
* message
|
|
307
|
+
* }
|
|
308
|
+
* }
|
|
309
|
+
* `;
|
|
179
310
|
*
|
|
311
|
+
* function App() {
|
|
312
|
+
* const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);
|
|
313
|
+
*
|
|
314
|
+
* return (
|
|
315
|
+
* <>
|
|
316
|
+
* <button onClick={() => loadGreeting({ language: "english" })}>
|
|
317
|
+
* Load greeting
|
|
318
|
+
* </button>
|
|
319
|
+
* <Suspense fallback={<div>Loading...</div>}>
|
|
320
|
+
* {queryRef && <Hello queryRef={queryRef} />}
|
|
321
|
+
* </Suspense>
|
|
322
|
+
* </>
|
|
323
|
+
* );
|
|
324
|
+
* }
|
|
325
|
+
*
|
|
326
|
+
* function Hello({ queryRef }) {
|
|
327
|
+
* const { data } = useReadQuery(queryRef);
|
|
328
|
+
*
|
|
329
|
+
* return <div>{data.greeting.message}</div>;
|
|
330
|
+
* }
|
|
331
|
+
* ```
|
|
332
|
+
*
|
|
333
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
334
|
+
* @param options - Options to control how the query is executed.
|
|
335
|
+
* @returns A tuple in the form of `[loadQuery, queryRef, handlers]`
|
|
180
336
|
*/
|
|
181
337
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useLoadableQuery.Options & {
|
|
182
338
|
returnPartialData: true;
|
|
183
339
|
errorPolicy: "ignore" | "all";
|
|
184
340
|
}): useLoadableQuery.Result<TData, TVariables, "complete" | "streaming" | "partial" | "empty">;
|
|
185
341
|
/**
|
|
342
|
+
* @deprecated Avoid manually specifying generics on `useLoadableQuery`.
|
|
343
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
344
|
+
*
|
|
345
|
+
*
|
|
346
|
+
* A hook for imperatively loading a query, such as responding to a user
|
|
347
|
+
* interaction.
|
|
348
|
+
*
|
|
349
|
+
* > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`.
|
|
350
|
+
*
|
|
351
|
+
* @example
|
|
352
|
+
*
|
|
353
|
+
* ```jsx
|
|
354
|
+
* import { gql, useLoadableQuery } from "@apollo/client";
|
|
355
|
+
*
|
|
356
|
+
* const GET_GREETING = gql`
|
|
357
|
+
* query GetGreeting($language: String!) {
|
|
358
|
+
* greeting(language: $language) {
|
|
359
|
+
* message
|
|
360
|
+
* }
|
|
361
|
+
* }
|
|
362
|
+
* `;
|
|
363
|
+
*
|
|
364
|
+
* function App() {
|
|
365
|
+
* const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);
|
|
366
|
+
*
|
|
367
|
+
* return (
|
|
368
|
+
* <>
|
|
369
|
+
* <button onClick={() => loadGreeting({ language: "english" })}>
|
|
370
|
+
* Load greeting
|
|
371
|
+
* </button>
|
|
372
|
+
* <Suspense fallback={<div>Loading...</div>}>
|
|
373
|
+
* {queryRef && <Hello queryRef={queryRef} />}
|
|
374
|
+
* </Suspense>
|
|
375
|
+
* </>
|
|
376
|
+
* );
|
|
377
|
+
* }
|
|
378
|
+
*
|
|
379
|
+
* function Hello({ queryRef }) {
|
|
380
|
+
* const { data } = useReadQuery(queryRef);
|
|
186
381
|
*
|
|
382
|
+
* return <div>{data.greeting.message}</div>;
|
|
383
|
+
* }
|
|
384
|
+
* ```
|
|
385
|
+
*
|
|
386
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
387
|
+
* @param options - Options to control how the query is executed.
|
|
388
|
+
* @returns A tuple in the form of `[loadQuery, queryRef, handlers]`
|
|
187
389
|
*/
|
|
188
390
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useLoadableQuery.Options & {
|
|
189
391
|
errorPolicy: "ignore" | "all";
|
|
190
392
|
}): useLoadableQuery.Result<TData, TVariables, "complete" | "streaming" | "empty">;
|
|
191
393
|
/**
|
|
394
|
+
* @deprecated Avoid manually specifying generics on `useLoadableQuery`.
|
|
395
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
396
|
+
*
|
|
397
|
+
*
|
|
398
|
+
* A hook for imperatively loading a query, such as responding to a user
|
|
399
|
+
* interaction.
|
|
400
|
+
*
|
|
401
|
+
* > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`.
|
|
402
|
+
*
|
|
403
|
+
* @example
|
|
404
|
+
*
|
|
405
|
+
* ```jsx
|
|
406
|
+
* import { gql, useLoadableQuery } from "@apollo/client";
|
|
407
|
+
*
|
|
408
|
+
* const GET_GREETING = gql`
|
|
409
|
+
* query GetGreeting($language: String!) {
|
|
410
|
+
* greeting(language: $language) {
|
|
411
|
+
* message
|
|
412
|
+
* }
|
|
413
|
+
* }
|
|
414
|
+
* `;
|
|
192
415
|
*
|
|
416
|
+
* function App() {
|
|
417
|
+
* const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);
|
|
418
|
+
*
|
|
419
|
+
* return (
|
|
420
|
+
* <>
|
|
421
|
+
* <button onClick={() => loadGreeting({ language: "english" })}>
|
|
422
|
+
* Load greeting
|
|
423
|
+
* </button>
|
|
424
|
+
* <Suspense fallback={<div>Loading...</div>}>
|
|
425
|
+
* {queryRef && <Hello queryRef={queryRef} />}
|
|
426
|
+
* </Suspense>
|
|
427
|
+
* </>
|
|
428
|
+
* );
|
|
429
|
+
* }
|
|
430
|
+
*
|
|
431
|
+
* function Hello({ queryRef }) {
|
|
432
|
+
* const { data } = useReadQuery(queryRef);
|
|
433
|
+
*
|
|
434
|
+
* return <div>{data.greeting.message}</div>;
|
|
435
|
+
* }
|
|
436
|
+
* ```
|
|
437
|
+
*
|
|
438
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
439
|
+
* @param options - Options to control how the query is executed.
|
|
440
|
+
* @returns A tuple in the form of `[loadQuery, queryRef, handlers]`
|
|
193
441
|
*/
|
|
194
442
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: useLoadableQuery.Options & {
|
|
195
443
|
returnPartialData: true;
|
|
196
444
|
}): useLoadableQuery.Result<TData, TVariables, "complete" | "streaming" | "partial">;
|
|
197
445
|
/**
|
|
446
|
+
* @deprecated Avoid manually specifying generics on `useLoadableQuery`.
|
|
447
|
+
* Instead, rely on TypeScript's type inference along with a correctly typed `TypedDocumentNode` to get accurate types for your query results.
|
|
448
|
+
*
|
|
449
|
+
*
|
|
450
|
+
* A hook for imperatively loading a query, such as responding to a user
|
|
451
|
+
* interaction.
|
|
452
|
+
*
|
|
453
|
+
* > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`.
|
|
198
454
|
*
|
|
455
|
+
* @example
|
|
456
|
+
*
|
|
457
|
+
* ```jsx
|
|
458
|
+
* import { gql, useLoadableQuery } from "@apollo/client";
|
|
459
|
+
*
|
|
460
|
+
* const GET_GREETING = gql`
|
|
461
|
+
* query GetGreeting($language: String!) {
|
|
462
|
+
* greeting(language: $language) {
|
|
463
|
+
* message
|
|
464
|
+
* }
|
|
465
|
+
* }
|
|
466
|
+
* `;
|
|
467
|
+
*
|
|
468
|
+
* function App() {
|
|
469
|
+
* const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);
|
|
470
|
+
*
|
|
471
|
+
* return (
|
|
472
|
+
* <>
|
|
473
|
+
* <button onClick={() => loadGreeting({ language: "english" })}>
|
|
474
|
+
* Load greeting
|
|
475
|
+
* </button>
|
|
476
|
+
* <Suspense fallback={<div>Loading...</div>}>
|
|
477
|
+
* {queryRef && <Hello queryRef={queryRef} />}
|
|
478
|
+
* </Suspense>
|
|
479
|
+
* </>
|
|
480
|
+
* );
|
|
481
|
+
* }
|
|
482
|
+
*
|
|
483
|
+
* function Hello({ queryRef }) {
|
|
484
|
+
* const { data } = useReadQuery(queryRef);
|
|
485
|
+
*
|
|
486
|
+
* return <div>{data.greeting.message}</div>;
|
|
487
|
+
* }
|
|
488
|
+
* ```
|
|
489
|
+
*
|
|
490
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
491
|
+
* @param options - Options to control how the query is executed.
|
|
492
|
+
* @returns A tuple in the form of `[loadQuery, queryRef, handlers]`
|
|
199
493
|
*/
|
|
200
494
|
<TData = unknown, TVariables extends OperationVariables = OperationVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: useLoadableQuery.Options): useLoadableQuery.Result<TData, TVariables, "complete" | "streaming">;
|
|
201
495
|
}
|
|
202
496
|
/**
|
|
497
|
+
* A hook for imperatively loading a query, such as responding to a user
|
|
498
|
+
* interaction.
|
|
499
|
+
*
|
|
500
|
+
* > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`.
|
|
501
|
+
*
|
|
502
|
+
* @example
|
|
503
|
+
*
|
|
504
|
+
* ```jsx
|
|
505
|
+
* import { gql, useLoadableQuery } from "@apollo/client";
|
|
506
|
+
*
|
|
507
|
+
* const GET_GREETING = gql`
|
|
508
|
+
* query GetGreeting($language: String!) {
|
|
509
|
+
* greeting(language: $language) {
|
|
510
|
+
* message
|
|
511
|
+
* }
|
|
512
|
+
* }
|
|
513
|
+
* `;
|
|
514
|
+
*
|
|
515
|
+
* function App() {
|
|
516
|
+
* const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);
|
|
517
|
+
*
|
|
518
|
+
* return (
|
|
519
|
+
* <>
|
|
520
|
+
* <button onClick={() => loadGreeting({ language: "english" })}>
|
|
521
|
+
* Load greeting
|
|
522
|
+
* </button>
|
|
523
|
+
* <Suspense fallback={<div>Loading...</div>}>
|
|
524
|
+
* {queryRef && <Hello queryRef={queryRef} />}
|
|
525
|
+
* </Suspense>
|
|
526
|
+
* </>
|
|
527
|
+
* );
|
|
528
|
+
* }
|
|
203
529
|
*
|
|
530
|
+
* function Hello({ queryRef }) {
|
|
531
|
+
* const { data } = useReadQuery(queryRef);
|
|
532
|
+
*
|
|
533
|
+
* return <div>{data.greeting.message}</div>;
|
|
534
|
+
* }
|
|
535
|
+
* ```
|
|
536
|
+
*
|
|
537
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
538
|
+
* @param options - Options to control how the query is executed.
|
|
539
|
+
* @returns A tuple in the form of `[loadQuery, queryRef, handlers]`
|
|
204
540
|
*/
|
|
205
541
|
interface Modern {
|
|
206
542
|
/**
|
|
543
|
+
* A hook for imperatively loading a query, such as responding to a user
|
|
544
|
+
* interaction.
|
|
545
|
+
*
|
|
546
|
+
* > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`.
|
|
547
|
+
*
|
|
548
|
+
* @example
|
|
549
|
+
*
|
|
550
|
+
* ```jsx
|
|
551
|
+
* import { gql, useLoadableQuery } from "@apollo/client";
|
|
552
|
+
*
|
|
553
|
+
* const GET_GREETING = gql`
|
|
554
|
+
* query GetGreeting($language: String!) {
|
|
555
|
+
* greeting(language: $language) {
|
|
556
|
+
* message
|
|
557
|
+
* }
|
|
558
|
+
* }
|
|
559
|
+
* `;
|
|
560
|
+
*
|
|
561
|
+
* function App() {
|
|
562
|
+
* const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);
|
|
207
563
|
*
|
|
564
|
+
* return (
|
|
565
|
+
* <>
|
|
566
|
+
* <button onClick={() => loadGreeting({ language: "english" })}>
|
|
567
|
+
* Load greeting
|
|
568
|
+
* </button>
|
|
569
|
+
* <Suspense fallback={<div>Loading...</div>}>
|
|
570
|
+
* {queryRef && <Hello queryRef={queryRef} />}
|
|
571
|
+
* </Suspense>
|
|
572
|
+
* </>
|
|
573
|
+
* );
|
|
574
|
+
* }
|
|
575
|
+
*
|
|
576
|
+
* function Hello({ queryRef }) {
|
|
577
|
+
* const { data } = useReadQuery(queryRef);
|
|
578
|
+
*
|
|
579
|
+
* return <div>{data.greeting.message}</div>;
|
|
580
|
+
* }
|
|
581
|
+
* ```
|
|
582
|
+
*
|
|
583
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
584
|
+
* @param options - Options to control how the query is executed.
|
|
585
|
+
* @returns A tuple in the form of `[loadQuery, queryRef, handlers]`
|
|
208
586
|
*/
|
|
209
587
|
<TData, TVariables extends OperationVariables, TOptions extends never>(query: DocumentNode | TypedDocumentNode<TData, TVariables>): useLoadableQuery.ResultForOptions<TData, TVariables, Record<string, never>>;
|
|
210
588
|
/**
|
|
589
|
+
* A hook for imperatively loading a query, such as responding to a user
|
|
590
|
+
* interaction.
|
|
591
|
+
*
|
|
592
|
+
* > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`.
|
|
593
|
+
*
|
|
594
|
+
* @example
|
|
595
|
+
*
|
|
596
|
+
* ```jsx
|
|
597
|
+
* import { gql, useLoadableQuery } from "@apollo/client";
|
|
211
598
|
*
|
|
599
|
+
* const GET_GREETING = gql`
|
|
600
|
+
* query GetGreeting($language: String!) {
|
|
601
|
+
* greeting(language: $language) {
|
|
602
|
+
* message
|
|
603
|
+
* }
|
|
604
|
+
* }
|
|
605
|
+
* `;
|
|
606
|
+
*
|
|
607
|
+
* function App() {
|
|
608
|
+
* const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);
|
|
609
|
+
*
|
|
610
|
+
* return (
|
|
611
|
+
* <>
|
|
612
|
+
* <button onClick={() => loadGreeting({ language: "english" })}>
|
|
613
|
+
* Load greeting
|
|
614
|
+
* </button>
|
|
615
|
+
* <Suspense fallback={<div>Loading...</div>}>
|
|
616
|
+
* {queryRef && <Hello queryRef={queryRef} />}
|
|
617
|
+
* </Suspense>
|
|
618
|
+
* </>
|
|
619
|
+
* );
|
|
620
|
+
* }
|
|
621
|
+
*
|
|
622
|
+
* function Hello({ queryRef }) {
|
|
623
|
+
* const { data } = useReadQuery(queryRef);
|
|
624
|
+
*
|
|
625
|
+
* return <div>{data.greeting.message}</div>;
|
|
626
|
+
* }
|
|
627
|
+
* ```
|
|
628
|
+
*
|
|
629
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
630
|
+
* @param options - Options to control how the query is executed.
|
|
631
|
+
* @returns A tuple in the form of `[loadQuery, queryRef, handlers]`
|
|
212
632
|
*/
|
|
213
633
|
<TData, TVariables extends OperationVariables, TOptions extends useLoadableQuery.Options>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options: TOptions): useLoadableQuery.ResultForOptions<TData, TVariables, TOptions>;
|
|
214
634
|
}
|
|
215
635
|
type Evaluated = SignatureStyle extends "classic" ? Classic : Modern;
|
|
216
636
|
}
|
|
217
637
|
/**
|
|
638
|
+
* A hook for imperatively loading a query, such as responding to a user
|
|
639
|
+
* interaction.
|
|
640
|
+
*
|
|
641
|
+
* > Refer to the [Suspense - Fetching in response to user interaction](https://www.apollographql.com/docs/react/data/suspense#fetching-in-response-to-user-interaction) section for a more in-depth overview of `useLoadableQuery`.
|
|
642
|
+
*
|
|
643
|
+
* @example
|
|
644
|
+
*
|
|
645
|
+
* ```jsx
|
|
646
|
+
* import { gql, useLoadableQuery } from "@apollo/client";
|
|
647
|
+
*
|
|
648
|
+
* const GET_GREETING = gql`
|
|
649
|
+
* query GetGreeting($language: String!) {
|
|
650
|
+
* greeting(language: $language) {
|
|
651
|
+
* message
|
|
652
|
+
* }
|
|
653
|
+
* }
|
|
654
|
+
* `;
|
|
655
|
+
*
|
|
656
|
+
* function App() {
|
|
657
|
+
* const [loadGreeting, queryRef] = useLoadableQuery(GET_GREETING);
|
|
658
|
+
*
|
|
659
|
+
* return (
|
|
660
|
+
* <>
|
|
661
|
+
* <button onClick={() => loadGreeting({ language: "english" })}>
|
|
662
|
+
* Load greeting
|
|
663
|
+
* </button>
|
|
664
|
+
* <Suspense fallback={<div>Loading...</div>}>
|
|
665
|
+
* {queryRef && <Hello queryRef={queryRef} />}
|
|
666
|
+
* </Suspense>
|
|
667
|
+
* </>
|
|
668
|
+
* );
|
|
669
|
+
* }
|
|
670
|
+
*
|
|
671
|
+
* function Hello({ queryRef }) {
|
|
672
|
+
* const { data } = useReadQuery(queryRef);
|
|
673
|
+
*
|
|
674
|
+
* return <div>{data.greeting.message}</div>;
|
|
675
|
+
* }
|
|
676
|
+
* ```
|
|
218
677
|
*
|
|
678
|
+
* @param query - A GraphQL query document parsed into an AST by `gql`.
|
|
679
|
+
* @param options - Options to control how the query is executed.
|
|
680
|
+
* @returns A tuple in the form of `[loadQuery, queryRef, handlers]`
|
|
219
681
|
*/
|
|
220
682
|
interface Signature extends Signatures.Evaluated {
|
|
221
683
|
}
|