@tanstack/preact-query 5.102.8 → 5.103.0
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/build/legacy/HydrationBoundary.cjs +1 -1
- package/build/legacy/HydrationBoundary.cjs.map +1 -1
- package/build/legacy/HydrationBoundary.js +1 -1
- package/build/legacy/HydrationBoundary.js.map +1 -1
- package/build/legacy/QueryErrorResetBoundary.cjs +12 -12
- package/build/legacy/QueryErrorResetBoundary.cjs.map +1 -1
- package/build/legacy/QueryErrorResetBoundary.d.cts +12 -12
- package/build/legacy/QueryErrorResetBoundary.d.ts +12 -12
- package/build/legacy/QueryErrorResetBoundary.js +12 -12
- package/build/legacy/QueryErrorResetBoundary.js.map +1 -1
- package/build/legacy/infiniteQueryOptions.cjs.map +1 -1
- package/build/legacy/infiniteQueryOptions.d.cts +41 -55
- package/build/legacy/infiniteQueryOptions.d.cts.map +1 -1
- package/build/legacy/infiniteQueryOptions.d.ts +41 -55
- package/build/legacy/infiniteQueryOptions.d.ts.map +1 -1
- package/build/legacy/infiniteQueryOptions.js.map +1 -1
- package/build/legacy/mutationOptions.cjs.map +1 -1
- package/build/legacy/mutationOptions.d.cts +4 -17
- package/build/legacy/mutationOptions.d.cts.map +1 -1
- package/build/legacy/mutationOptions.d.ts +4 -17
- package/build/legacy/mutationOptions.d.ts.map +1 -1
- package/build/legacy/mutationOptions.js.map +1 -1
- package/build/legacy/queryOptions.cjs.map +1 -1
- package/build/legacy/queryOptions.d.cts +51 -74
- package/build/legacy/queryOptions.d.cts.map +1 -1
- package/build/legacy/queryOptions.d.ts +51 -74
- package/build/legacy/queryOptions.d.ts.map +1 -1
- package/build/legacy/queryOptions.js.map +1 -1
- package/build/legacy/useInfiniteQuery.cjs.map +1 -1
- package/build/legacy/useInfiniteQuery.d.cts +208 -36
- package/build/legacy/useInfiniteQuery.d.cts.map +1 -1
- package/build/legacy/useInfiniteQuery.d.ts +208 -36
- package/build/legacy/useInfiniteQuery.d.ts.map +1 -1
- package/build/legacy/useInfiniteQuery.js.map +1 -1
- package/build/legacy/useIsFetching.cjs +8 -6
- package/build/legacy/useIsFetching.cjs.map +1 -1
- package/build/legacy/useIsFetching.d.cts +8 -6
- package/build/legacy/useIsFetching.d.cts.map +1 -1
- package/build/legacy/useIsFetching.d.ts +8 -6
- package/build/legacy/useIsFetching.d.ts.map +1 -1
- package/build/legacy/useIsFetching.js +8 -6
- package/build/legacy/useIsFetching.js.map +1 -1
- package/build/legacy/useMutation.cjs +13 -11
- package/build/legacy/useMutation.cjs.map +1 -1
- package/build/legacy/useMutation.d.cts +13 -11
- package/build/legacy/useMutation.d.cts.map +1 -1
- package/build/legacy/useMutation.d.ts +13 -11
- package/build/legacy/useMutation.d.ts.map +1 -1
- package/build/legacy/useMutation.js +13 -11
- package/build/legacy/useMutation.js.map +1 -1
- package/build/legacy/useMutationState.cjs +49 -29
- package/build/legacy/useMutationState.cjs.map +1 -1
- package/build/legacy/useMutationState.d.cts +49 -29
- package/build/legacy/useMutationState.d.cts.map +1 -1
- package/build/legacy/useMutationState.d.ts +49 -29
- package/build/legacy/useMutationState.d.ts.map +1 -1
- package/build/legacy/useMutationState.js +49 -29
- package/build/legacy/useMutationState.js.map +1 -1
- package/build/legacy/useQueries.cjs +50 -23
- package/build/legacy/useQueries.cjs.map +1 -1
- package/build/legacy/useQueries.d.cts +50 -23
- package/build/legacy/useQueries.d.cts.map +1 -1
- package/build/legacy/useQueries.d.ts +50 -23
- package/build/legacy/useQueries.d.ts.map +1 -1
- package/build/legacy/useQueries.js +50 -23
- package/build/legacy/useQueries.js.map +1 -1
- package/build/legacy/useQuery.cjs.map +1 -1
- package/build/legacy/useQuery.d.cts +93 -33
- package/build/legacy/useQuery.d.cts.map +1 -1
- package/build/legacy/useQuery.d.ts +93 -33
- package/build/legacy/useQuery.d.ts.map +1 -1
- package/build/legacy/useQuery.js.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.cjs +57 -7
- package/build/legacy/useSuspenseInfiniteQuery.cjs.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.d.cts +57 -7
- package/build/legacy/useSuspenseInfiniteQuery.d.cts.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.d.ts +57 -7
- package/build/legacy/useSuspenseInfiniteQuery.d.ts.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.js +57 -7
- package/build/legacy/useSuspenseInfiniteQuery.js.map +1 -1
- package/build/legacy/useSuspenseQueries.cjs.map +1 -1
- package/build/legacy/useSuspenseQueries.d.cts +244 -20
- package/build/legacy/useSuspenseQueries.d.cts.map +1 -1
- package/build/legacy/useSuspenseQueries.d.ts +244 -20
- package/build/legacy/useSuspenseQueries.d.ts.map +1 -1
- package/build/legacy/useSuspenseQueries.js.map +1 -1
- package/build/legacy/useSuspenseQuery.cjs +48 -8
- package/build/legacy/useSuspenseQuery.cjs.map +1 -1
- package/build/legacy/useSuspenseQuery.d.cts +48 -8
- package/build/legacy/useSuspenseQuery.d.cts.map +1 -1
- package/build/legacy/useSuspenseQuery.d.ts +48 -8
- package/build/legacy/useSuspenseQuery.d.ts.map +1 -1
- package/build/legacy/useSuspenseQuery.js +48 -8
- package/build/legacy/useSuspenseQuery.js.map +1 -1
- package/build/modern/HydrationBoundary.cjs +1 -1
- package/build/modern/HydrationBoundary.cjs.map +1 -1
- package/build/modern/HydrationBoundary.js +1 -1
- package/build/modern/HydrationBoundary.js.map +1 -1
- package/build/modern/QueryErrorResetBoundary.cjs +12 -12
- package/build/modern/QueryErrorResetBoundary.cjs.map +1 -1
- package/build/modern/QueryErrorResetBoundary.d.cts +12 -12
- package/build/modern/QueryErrorResetBoundary.d.ts +12 -12
- package/build/modern/QueryErrorResetBoundary.js +12 -12
- package/build/modern/QueryErrorResetBoundary.js.map +1 -1
- package/build/modern/infiniteQueryOptions.cjs.map +1 -1
- package/build/modern/infiniteQueryOptions.d.cts +41 -55
- package/build/modern/infiniteQueryOptions.d.cts.map +1 -1
- package/build/modern/infiniteQueryOptions.d.ts +41 -55
- package/build/modern/infiniteQueryOptions.d.ts.map +1 -1
- package/build/modern/infiniteQueryOptions.js.map +1 -1
- package/build/modern/mutationOptions.cjs.map +1 -1
- package/build/modern/mutationOptions.d.cts +4 -17
- package/build/modern/mutationOptions.d.cts.map +1 -1
- package/build/modern/mutationOptions.d.ts +4 -17
- package/build/modern/mutationOptions.d.ts.map +1 -1
- package/build/modern/mutationOptions.js.map +1 -1
- package/build/modern/queryOptions.cjs.map +1 -1
- package/build/modern/queryOptions.d.cts +51 -74
- package/build/modern/queryOptions.d.cts.map +1 -1
- package/build/modern/queryOptions.d.ts +51 -74
- package/build/modern/queryOptions.d.ts.map +1 -1
- package/build/modern/queryOptions.js.map +1 -1
- package/build/modern/useInfiniteQuery.cjs.map +1 -1
- package/build/modern/useInfiniteQuery.d.cts +208 -36
- package/build/modern/useInfiniteQuery.d.cts.map +1 -1
- package/build/modern/useInfiniteQuery.d.ts +208 -36
- package/build/modern/useInfiniteQuery.d.ts.map +1 -1
- package/build/modern/useInfiniteQuery.js.map +1 -1
- package/build/modern/useIsFetching.cjs +8 -6
- package/build/modern/useIsFetching.cjs.map +1 -1
- package/build/modern/useIsFetching.d.cts +8 -6
- package/build/modern/useIsFetching.d.cts.map +1 -1
- package/build/modern/useIsFetching.d.ts +8 -6
- package/build/modern/useIsFetching.d.ts.map +1 -1
- package/build/modern/useIsFetching.js +8 -6
- package/build/modern/useIsFetching.js.map +1 -1
- package/build/modern/useMutation.cjs +13 -11
- package/build/modern/useMutation.cjs.map +1 -1
- package/build/modern/useMutation.d.cts +13 -11
- package/build/modern/useMutation.d.cts.map +1 -1
- package/build/modern/useMutation.d.ts +13 -11
- package/build/modern/useMutation.d.ts.map +1 -1
- package/build/modern/useMutation.js +13 -11
- package/build/modern/useMutation.js.map +1 -1
- package/build/modern/useMutationState.cjs +49 -29
- package/build/modern/useMutationState.cjs.map +1 -1
- package/build/modern/useMutationState.d.cts +49 -29
- package/build/modern/useMutationState.d.cts.map +1 -1
- package/build/modern/useMutationState.d.ts +49 -29
- package/build/modern/useMutationState.d.ts.map +1 -1
- package/build/modern/useMutationState.js +49 -29
- package/build/modern/useMutationState.js.map +1 -1
- package/build/modern/useQueries.cjs +50 -23
- package/build/modern/useQueries.cjs.map +1 -1
- package/build/modern/useQueries.d.cts +50 -23
- package/build/modern/useQueries.d.cts.map +1 -1
- package/build/modern/useQueries.d.ts +50 -23
- package/build/modern/useQueries.d.ts.map +1 -1
- package/build/modern/useQueries.js +50 -23
- package/build/modern/useQueries.js.map +1 -1
- package/build/modern/useQuery.cjs.map +1 -1
- package/build/modern/useQuery.d.cts +93 -33
- package/build/modern/useQuery.d.cts.map +1 -1
- package/build/modern/useQuery.d.ts +93 -33
- package/build/modern/useQuery.d.ts.map +1 -1
- package/build/modern/useQuery.js.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.cjs +57 -7
- package/build/modern/useSuspenseInfiniteQuery.cjs.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.d.cts +57 -7
- package/build/modern/useSuspenseInfiniteQuery.d.cts.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.d.ts +57 -7
- package/build/modern/useSuspenseInfiniteQuery.d.ts.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.js +57 -7
- package/build/modern/useSuspenseInfiniteQuery.js.map +1 -1
- package/build/modern/useSuspenseQueries.cjs.map +1 -1
- package/build/modern/useSuspenseQueries.d.cts +244 -20
- package/build/modern/useSuspenseQueries.d.cts.map +1 -1
- package/build/modern/useSuspenseQueries.d.ts +244 -20
- package/build/modern/useSuspenseQueries.d.ts.map +1 -1
- package/build/modern/useSuspenseQueries.js.map +1 -1
- package/build/modern/useSuspenseQuery.cjs +48 -8
- package/build/modern/useSuspenseQuery.cjs.map +1 -1
- package/build/modern/useSuspenseQuery.d.cts +48 -8
- package/build/modern/useSuspenseQuery.d.cts.map +1 -1
- package/build/modern/useSuspenseQuery.d.ts +48 -8
- package/build/modern/useSuspenseQuery.d.ts.map +1 -1
- package/build/modern/useSuspenseQuery.js +48 -8
- package/build/modern/useSuspenseQuery.js.map +1 -1
- package/build/query-codemods/eslint.config.js +7 -0
- package/build/query-codemods/root.eslint.config.js +45 -0
- package/package.json +11 -11
- package/src/HydrationBoundary.tsx +0 -1
- package/src/QueryErrorResetBoundary.tsx +12 -12
- package/src/infiniteQueryOptions.ts +41 -55
- package/src/mutationOptions.ts +4 -17
- package/src/queryOptions.ts +50 -73
- package/src/useInfiniteQuery.ts +208 -36
- package/src/useIsFetching.ts +8 -6
- package/src/useMutation.ts +13 -11
- package/src/useMutationState.ts +49 -29
- package/src/useQueries.ts +50 -23
- package/src/useQuery.ts +93 -33
- package/src/useSuspenseInfiniteQuery.ts +57 -7
- package/src/useSuspenseQueries.ts +244 -20
- package/src/useSuspenseQuery.ts +48 -8
|
@@ -66,8 +66,8 @@ type SuspenseQueriesOptions<T extends Array<any>, TResults extends Array<any> =
|
|
|
66
66
|
*/
|
|
67
67
|
type SuspenseQueriesResults<T extends Array<any>, TResults extends Array<any> = [], TDepth extends ReadonlyArray<number> = []> = TDepth['length'] extends MAXIMUM_DEPTH ? Array<UseSuspenseQueryResult> : T extends [] ? [] : T extends [infer Head] ? [...TResults, GetUseSuspenseQueryResult<Head>] : T extends [infer Head, ...infer Tails] ? SuspenseQueriesResults<[...Tails], [...TResults, GetUseSuspenseQueryResult<Head>], [...TDepth, 1]> : { [K in keyof T]: GetUseSuspenseQueryResult<T[K]>; };
|
|
68
68
|
/**
|
|
69
|
-
* The options for `useSuspenseQueries` are the same as for `useQueries`, except that
|
|
70
|
-
* `throwOnError`, `enabled`, or `placeholderData`.
|
|
69
|
+
* The options for `useSuspenseQueries` are the same as for `useQueries`, except that the top-level `subscribed`
|
|
70
|
+
* option isn't supported, and each `query` can't have `throwOnError`, `enabled`, or `placeholderData`.
|
|
71
71
|
*
|
|
72
72
|
* @param options - The `queries` array to run in Suspense, and an optional `combine` function.
|
|
73
73
|
* @param queryClient - Use this to provide a custom `QueryClient`. Otherwise, the one from the nearest context
|
|
@@ -81,9 +81,17 @@ type SuspenseQueriesResults<T extends Array<any>, TResults extends Array<any> =
|
|
|
81
81
|
* this, make sure to set a high enough `staleTime`. Cancellation does not work.
|
|
82
82
|
*
|
|
83
83
|
* @example
|
|
84
|
+
* The query error is thrown if a fetch fails and no cached data exists yet, so an error boundary is
|
|
85
|
+
* required around `<Suspense>`. A failed background refetch instead continues to render the cached data.
|
|
86
|
+
* Use {@link QueryErrorResetBoundary} to let the user retry after such an error:
|
|
84
87
|
* ```tsx
|
|
85
88
|
* import { Suspense } from 'preact/compat'
|
|
86
|
-
* import {
|
|
89
|
+
* import { useErrorBoundary } from 'preact/hooks'
|
|
90
|
+
* import {
|
|
91
|
+
* QueryErrorResetBoundary,
|
|
92
|
+
* useSuspenseQueries,
|
|
93
|
+
* } from '@tanstack/preact-query'
|
|
94
|
+
* import type { ComponentChildren } from 'preact'
|
|
87
95
|
*
|
|
88
96
|
* function Posts({ ids }: { ids: Array<number> }) {
|
|
89
97
|
* // Every result is guaranteed to be defined — no per-query `isPending` check needed.
|
|
@@ -105,11 +113,44 @@ type SuspenseQueriesResults<T extends Array<any>, TResults extends Array<any> =
|
|
|
105
113
|
*
|
|
106
114
|
* function App() {
|
|
107
115
|
* return (
|
|
108
|
-
* <
|
|
109
|
-
*
|
|
110
|
-
*
|
|
116
|
+
* <QueryErrorResetBoundary>
|
|
117
|
+
* {({ reset }) => (
|
|
118
|
+
* <ErrorBoundary
|
|
119
|
+
* onReset={reset}
|
|
120
|
+
* fallbackRender={({ resetErrorBoundary }) => (
|
|
121
|
+
* <div>
|
|
122
|
+
* There was an error!
|
|
123
|
+
* <button onClick={() => resetErrorBoundary()}>Try again</button>
|
|
124
|
+
* </div>
|
|
125
|
+
* )}
|
|
126
|
+
* >
|
|
127
|
+
* <Suspense fallback={<h1>Loading posts...</h1>}>
|
|
128
|
+
* <Posts ids={[1, 2, 3]} />
|
|
129
|
+
* </Suspense>
|
|
130
|
+
* </ErrorBoundary>
|
|
131
|
+
* )}
|
|
132
|
+
* </QueryErrorResetBoundary>
|
|
111
133
|
* )
|
|
112
134
|
* }
|
|
135
|
+
*
|
|
136
|
+
* function ErrorBoundary({
|
|
137
|
+
* children,
|
|
138
|
+
* onReset,
|
|
139
|
+
* fallbackRender,
|
|
140
|
+
* }: {
|
|
141
|
+
* children: ComponentChildren
|
|
142
|
+
* onReset: () => void
|
|
143
|
+
* fallbackRender: (props: {
|
|
144
|
+
* error: Error
|
|
145
|
+
* resetErrorBoundary: () => void
|
|
146
|
+
* }) => ComponentChildren
|
|
147
|
+
* }) {
|
|
148
|
+
* const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())
|
|
149
|
+
*
|
|
150
|
+
* if (error) return fallbackRender({ error, resetErrorBoundary })
|
|
151
|
+
*
|
|
152
|
+
* return children
|
|
153
|
+
* }
|
|
113
154
|
* ```
|
|
114
155
|
*
|
|
115
156
|
* @example
|
|
@@ -117,7 +158,12 @@ type SuspenseQueriesResults<T extends Array<any>, TResults extends Array<any> =
|
|
|
117
158
|
* they fetch in parallel rather than suspending one after another:
|
|
118
159
|
* ```tsx
|
|
119
160
|
* import { Suspense } from 'preact/compat'
|
|
120
|
-
* import {
|
|
161
|
+
* import { useErrorBoundary } from 'preact/hooks'
|
|
162
|
+
* import {
|
|
163
|
+
* QueryErrorResetBoundary,
|
|
164
|
+
* useSuspenseQueries,
|
|
165
|
+
* } from '@tanstack/preact-query'
|
|
166
|
+
* import type { ComponentChildren } from 'preact'
|
|
121
167
|
*
|
|
122
168
|
* function Dashboard() {
|
|
123
169
|
* const [usersQuery, teamsQuery, projectsQuery] = useSuspenseQueries({
|
|
@@ -139,11 +185,110 @@ type SuspenseQueriesResults<T extends Array<any>, TResults extends Array<any> =
|
|
|
139
185
|
*
|
|
140
186
|
* function App() {
|
|
141
187
|
* return (
|
|
142
|
-
* <
|
|
143
|
-
*
|
|
144
|
-
*
|
|
188
|
+
* <QueryErrorResetBoundary>
|
|
189
|
+
* {({ reset }) => (
|
|
190
|
+
* <ErrorBoundary
|
|
191
|
+
* onReset={reset}
|
|
192
|
+
* fallbackRender={({ resetErrorBoundary }) => (
|
|
193
|
+
* <div>
|
|
194
|
+
* There was an error!
|
|
195
|
+
* <button onClick={() => resetErrorBoundary()}>Try again</button>
|
|
196
|
+
* </div>
|
|
197
|
+
* )}
|
|
198
|
+
* >
|
|
199
|
+
* <Suspense fallback={<h1>Loading dashboard...</h1>}>
|
|
200
|
+
* <Dashboard />
|
|
201
|
+
* </Suspense>
|
|
202
|
+
* </ErrorBoundary>
|
|
203
|
+
* )}
|
|
204
|
+
* </QueryErrorResetBoundary>
|
|
205
|
+
* )
|
|
206
|
+
* }
|
|
207
|
+
*
|
|
208
|
+
* function ErrorBoundary({
|
|
209
|
+
* children,
|
|
210
|
+
* onReset,
|
|
211
|
+
* fallbackRender,
|
|
212
|
+
* }: {
|
|
213
|
+
* children: ComponentChildren
|
|
214
|
+
* onReset: () => void
|
|
215
|
+
* fallbackRender: (props: {
|
|
216
|
+
* error: Error
|
|
217
|
+
* resetErrorBoundary: () => void
|
|
218
|
+
* }) => ComponentChildren
|
|
219
|
+
* }) {
|
|
220
|
+
* const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())
|
|
221
|
+
*
|
|
222
|
+
* if (error) return fallbackRender({ error, resetErrorBoundary })
|
|
223
|
+
*
|
|
224
|
+
* return children
|
|
225
|
+
* }
|
|
226
|
+
* ```
|
|
227
|
+
*
|
|
228
|
+
* @example
|
|
229
|
+
* `combine`s the results into a single boolean, so `Refresh` only re-renders when that boolean changes,
|
|
230
|
+
* not on every individual query update. This overload is the only one that accepts `combine`:
|
|
231
|
+
* ```tsx
|
|
232
|
+
* import { Suspense } from 'preact/compat'
|
|
233
|
+
* import { useErrorBoundary } from 'preact/hooks'
|
|
234
|
+
* import {
|
|
235
|
+
* QueryErrorResetBoundary,
|
|
236
|
+
* useSuspenseQueries,
|
|
237
|
+
* } from '@tanstack/preact-query'
|
|
238
|
+
* import type { ComponentChildren } from 'preact'
|
|
239
|
+
*
|
|
240
|
+
* function Refresh() {
|
|
241
|
+
* const anyFetching = useSuspenseQueries({
|
|
242
|
+
* queries: [
|
|
243
|
+
* { queryKey: ['users'], queryFn: fetchUsers },
|
|
244
|
+
* { queryKey: ['teams'], queryFn: fetchTeams },
|
|
245
|
+
* ],
|
|
246
|
+
* combine: (results) => results.some((result) => result.isFetching),
|
|
247
|
+
* })
|
|
248
|
+
*
|
|
249
|
+
* return anyFetching ? <span>Refreshing…</span> : null
|
|
250
|
+
* }
|
|
251
|
+
*
|
|
252
|
+
* function App() {
|
|
253
|
+
* return (
|
|
254
|
+
* <QueryErrorResetBoundary>
|
|
255
|
+
* {({ reset }) => (
|
|
256
|
+
* <ErrorBoundary
|
|
257
|
+
* onReset={reset}
|
|
258
|
+
* fallbackRender={({ resetErrorBoundary }) => (
|
|
259
|
+
* <div>
|
|
260
|
+
* There was an error!
|
|
261
|
+
* <button onClick={() => resetErrorBoundary()}>Try again</button>
|
|
262
|
+
* </div>
|
|
263
|
+
* )}
|
|
264
|
+
* >
|
|
265
|
+
* <Suspense fallback={<h1>Loading dashboard...</h1>}>
|
|
266
|
+
* <Refresh />
|
|
267
|
+
* </Suspense>
|
|
268
|
+
* </ErrorBoundary>
|
|
269
|
+
* )}
|
|
270
|
+
* </QueryErrorResetBoundary>
|
|
145
271
|
* )
|
|
146
272
|
* }
|
|
273
|
+
*
|
|
274
|
+
* function ErrorBoundary({
|
|
275
|
+
* children,
|
|
276
|
+
* onReset,
|
|
277
|
+
* fallbackRender,
|
|
278
|
+
* }: {
|
|
279
|
+
* children: ComponentChildren
|
|
280
|
+
* onReset: () => void
|
|
281
|
+
* fallbackRender: (props: {
|
|
282
|
+
* error: Error
|
|
283
|
+
* resetErrorBoundary: () => void
|
|
284
|
+
* }) => ComponentChildren
|
|
285
|
+
* }) {
|
|
286
|
+
* const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())
|
|
287
|
+
*
|
|
288
|
+
* if (error) return fallbackRender({ error, resetErrorBoundary })
|
|
289
|
+
*
|
|
290
|
+
* return children
|
|
291
|
+
* }
|
|
147
292
|
* ```
|
|
148
293
|
*/
|
|
149
294
|
declare function useSuspenseQueries<T extends Array<any>, TCombinedResult = SuspenseQueriesResults<T>>(options: {
|
|
@@ -158,8 +303,8 @@ declare function useSuspenseQueries<T extends Array<any>, TCombinedResult = Susp
|
|
|
158
303
|
combine?: (result: SuspenseQueriesResults<T>) => TCombinedResult;
|
|
159
304
|
}, queryClient?: QueryClient): TCombinedResult;
|
|
160
305
|
/**
|
|
161
|
-
* The options for `useSuspenseQueries` are the same as for `useQueries`, except that
|
|
162
|
-
* `throwOnError`, `enabled`, or `placeholderData`.
|
|
306
|
+
* The options for `useSuspenseQueries` are the same as for `useQueries`, except that the top-level `subscribed`
|
|
307
|
+
* option isn't supported, and each `query` can't have `throwOnError`, `enabled`, or `placeholderData`.
|
|
163
308
|
*
|
|
164
309
|
* @param options - The `queries` array to run in Suspense, and an optional `combine` function.
|
|
165
310
|
* @param queryClient - Use this to provide a custom `QueryClient`. Otherwise, the one from the nearest context
|
|
@@ -173,9 +318,17 @@ declare function useSuspenseQueries<T extends Array<any>, TCombinedResult = Susp
|
|
|
173
318
|
* this, make sure to set a high enough `staleTime`. Cancellation does not work.
|
|
174
319
|
*
|
|
175
320
|
* @example
|
|
321
|
+
* The query error is thrown if a fetch fails and no cached data exists yet, so an error boundary is
|
|
322
|
+
* required around `<Suspense>`. A failed background refetch instead continues to render the cached data.
|
|
323
|
+
* Use {@link QueryErrorResetBoundary} to let the user retry after such an error:
|
|
176
324
|
* ```tsx
|
|
177
325
|
* import { Suspense } from 'preact/compat'
|
|
178
|
-
* import {
|
|
326
|
+
* import { useErrorBoundary } from 'preact/hooks'
|
|
327
|
+
* import {
|
|
328
|
+
* QueryErrorResetBoundary,
|
|
329
|
+
* useSuspenseQueries,
|
|
330
|
+
* } from '@tanstack/preact-query'
|
|
331
|
+
* import type { ComponentChildren } from 'preact'
|
|
179
332
|
*
|
|
180
333
|
* function Posts({ ids }: { ids: Array<number> }) {
|
|
181
334
|
* // Every result is guaranteed to be defined — no per-query `isPending` check needed.
|
|
@@ -197,11 +350,44 @@ declare function useSuspenseQueries<T extends Array<any>, TCombinedResult = Susp
|
|
|
197
350
|
*
|
|
198
351
|
* function App() {
|
|
199
352
|
* return (
|
|
200
|
-
* <
|
|
201
|
-
*
|
|
202
|
-
*
|
|
353
|
+
* <QueryErrorResetBoundary>
|
|
354
|
+
* {({ reset }) => (
|
|
355
|
+
* <ErrorBoundary
|
|
356
|
+
* onReset={reset}
|
|
357
|
+
* fallbackRender={({ resetErrorBoundary }) => (
|
|
358
|
+
* <div>
|
|
359
|
+
* There was an error!
|
|
360
|
+
* <button onClick={() => resetErrorBoundary()}>Try again</button>
|
|
361
|
+
* </div>
|
|
362
|
+
* )}
|
|
363
|
+
* >
|
|
364
|
+
* <Suspense fallback={<h1>Loading posts...</h1>}>
|
|
365
|
+
* <Posts ids={[1, 2, 3]} />
|
|
366
|
+
* </Suspense>
|
|
367
|
+
* </ErrorBoundary>
|
|
368
|
+
* )}
|
|
369
|
+
* </QueryErrorResetBoundary>
|
|
203
370
|
* )
|
|
204
371
|
* }
|
|
372
|
+
*
|
|
373
|
+
* function ErrorBoundary({
|
|
374
|
+
* children,
|
|
375
|
+
* onReset,
|
|
376
|
+
* fallbackRender,
|
|
377
|
+
* }: {
|
|
378
|
+
* children: ComponentChildren
|
|
379
|
+
* onReset: () => void
|
|
380
|
+
* fallbackRender: (props: {
|
|
381
|
+
* error: Error
|
|
382
|
+
* resetErrorBoundary: () => void
|
|
383
|
+
* }) => ComponentChildren
|
|
384
|
+
* }) {
|
|
385
|
+
* const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())
|
|
386
|
+
*
|
|
387
|
+
* if (error) return fallbackRender({ error, resetErrorBoundary })
|
|
388
|
+
*
|
|
389
|
+
* return children
|
|
390
|
+
* }
|
|
205
391
|
* ```
|
|
206
392
|
*
|
|
207
393
|
* @example
|
|
@@ -209,7 +395,12 @@ declare function useSuspenseQueries<T extends Array<any>, TCombinedResult = Susp
|
|
|
209
395
|
* they fetch in parallel rather than suspending one after another:
|
|
210
396
|
* ```tsx
|
|
211
397
|
* import { Suspense } from 'preact/compat'
|
|
212
|
-
* import {
|
|
398
|
+
* import { useErrorBoundary } from 'preact/hooks'
|
|
399
|
+
* import {
|
|
400
|
+
* QueryErrorResetBoundary,
|
|
401
|
+
* useSuspenseQueries,
|
|
402
|
+
* } from '@tanstack/preact-query'
|
|
403
|
+
* import type { ComponentChildren } from 'preact'
|
|
213
404
|
*
|
|
214
405
|
* function Dashboard() {
|
|
215
406
|
* const [usersQuery, teamsQuery, projectsQuery] = useSuspenseQueries({
|
|
@@ -231,11 +422,44 @@ declare function useSuspenseQueries<T extends Array<any>, TCombinedResult = Susp
|
|
|
231
422
|
*
|
|
232
423
|
* function App() {
|
|
233
424
|
* return (
|
|
234
|
-
* <
|
|
235
|
-
*
|
|
236
|
-
*
|
|
425
|
+
* <QueryErrorResetBoundary>
|
|
426
|
+
* {({ reset }) => (
|
|
427
|
+
* <ErrorBoundary
|
|
428
|
+
* onReset={reset}
|
|
429
|
+
* fallbackRender={({ resetErrorBoundary }) => (
|
|
430
|
+
* <div>
|
|
431
|
+
* There was an error!
|
|
432
|
+
* <button onClick={() => resetErrorBoundary()}>Try again</button>
|
|
433
|
+
* </div>
|
|
434
|
+
* )}
|
|
435
|
+
* >
|
|
436
|
+
* <Suspense fallback={<h1>Loading dashboard...</h1>}>
|
|
437
|
+
* <Dashboard />
|
|
438
|
+
* </Suspense>
|
|
439
|
+
* </ErrorBoundary>
|
|
440
|
+
* )}
|
|
441
|
+
* </QueryErrorResetBoundary>
|
|
237
442
|
* )
|
|
238
443
|
* }
|
|
444
|
+
*
|
|
445
|
+
* function ErrorBoundary({
|
|
446
|
+
* children,
|
|
447
|
+
* onReset,
|
|
448
|
+
* fallbackRender,
|
|
449
|
+
* }: {
|
|
450
|
+
* children: ComponentChildren
|
|
451
|
+
* onReset: () => void
|
|
452
|
+
* fallbackRender: (props: {
|
|
453
|
+
* error: Error
|
|
454
|
+
* resetErrorBoundary: () => void
|
|
455
|
+
* }) => ComponentChildren
|
|
456
|
+
* }) {
|
|
457
|
+
* const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())
|
|
458
|
+
*
|
|
459
|
+
* if (error) return fallbackRender({ error, resetErrorBoundary })
|
|
460
|
+
*
|
|
461
|
+
* return children
|
|
462
|
+
* }
|
|
239
463
|
* ```
|
|
240
464
|
*/
|
|
241
465
|
declare function useSuspenseQueries<T extends Array<any>, TCombinedResult = SuspenseQueriesResults<T>>(options: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSuspenseQueries.d.cts","names":[],"sources":["../../src/useSuspenseQueries.ts"],"mappings":";;;KAaK;KAGA;KAEA,2BAA2B,KAE9B;EACE,mBAAmB;EACnB,cAAc;EACd,YAAY;IAEV,wBAAwB,cAAc,QAAQ,SAC9C;EAAY,mBAAmB;EAAc,cAAc;IACzD,wBAAwB,cAAc,UACtC;EAAY,YAAY;EAAO,cAAc;IAC3C,iCAAiC,QAAQ,SAEzC,iBAAiB,oBAAoB,cAAc,SACjD,wBAAwB,cAAc,QAAQ,SAC9C,iBAAiB,oBAAoB,UACnC,wBAAwB,cAAc,UACtC,iBAAiB,gBACf,wBAAwB,gBAExB;EACI,UACI,oBAAoB,oBAAoB,aACxC;EACJ,UAAU,oBAAoB;EAC9B,eAAe,wBAAwB;IAEzC,wBACE,cACA,QACA,OACA,aAEF;EACI,UACI,oBAAoB,oBAAoB,aACxC;EACJ,eAAe,wBAAwB;IAEzC,wBACE,cACA,QACA,cACA,aAGF;KAEf,0BAA0B,KAE7B;EAAY;EAAkB,cAAc;EAAQ,YAAY;IAC5D,uBAAuB,OAAO,UAC9B;EAAY,mBAAmB;EAAc,cAAc;IACzD,uBAAuB,cAAc,UACrC;EAAY,YAAY;EAAO,cAAc;IAC3C,uBAAuB,OAAO,UAE9B,sBAAsB,cAAc,SAClC,uBAAuB,OAAO,UAC9B,iBAAiB,oBAAoB,UACnC,uBAAuB,cAAc,UACrC,iBAAiB,gBACf,uBAAuB,gBAEvB;EACI,UACI,oBAAoB,qBACpB;EACJ,UAAU,oBAAoB;EAC9B,eAAe,wBAAwB;IAEzC,uCACkB,QAAQ,eAAe,uBACvB,SAAS,eAAe,UAE1C;EACI,UACI,oBAAoB,qBACpB;EACJ,eAAe,wBAAwB;IAEzC,uBACE,8BACgB,SAAS,eAAe,UAG1C;;;;;;;;;;;;;KAcR,uBACV,UAAU,YACV,iBAAiB,iBACjB,eAAe,8BACb,yBAAyB,gBACzB,MAAM,2BACN,oBAEE,iBAAiB,YACX,UAAU,2BAA2B,SACzC,iBAAiB,eAAe,SAC9B,2BACM,YACA,UAAU,2BAA2B,YACrC,cAEN,uBAAuB,IACrB,IAGA,UAAU,MACN,8BACQ,oBACA,cACA,aACA,cAGV,MACE,wBAAwB,cAAc,QAAQ,OAAO,cAGvD,MAAM;;;;;;;;;;;;;KAcR,uBACV,UAAU,YACV,iBAAiB,iBACjB,eAAe,8BACb,yBAAyB,gBACzB,MAAM,0BACN,oBAEE,iBAAiB,YACX,UAAU,0BAA0B,SACxC,iBAAiB,eAAe,SAC9B,2BACM,YACA,UAAU,0BAA0B,YACpC,iBAEH,WAAW,IAAI,0BAA0B,EAAE
|
|
1
|
+
{"version":3,"file":"useSuspenseQueries.d.cts","names":[],"sources":["../../src/useSuspenseQueries.ts"],"mappings":"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"}
|