@tanstack/preact-query 5.102.8 → 5.103.1

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.
Files changed (205) hide show
  1. package/build/legacy/HydrationBoundary.cjs +1 -1
  2. package/build/legacy/HydrationBoundary.cjs.map +1 -1
  3. package/build/legacy/HydrationBoundary.js +1 -1
  4. package/build/legacy/HydrationBoundary.js.map +1 -1
  5. package/build/legacy/QueryErrorResetBoundary.cjs +12 -12
  6. package/build/legacy/QueryErrorResetBoundary.cjs.map +1 -1
  7. package/build/legacy/QueryErrorResetBoundary.d.cts +12 -12
  8. package/build/legacy/QueryErrorResetBoundary.d.ts +12 -12
  9. package/build/legacy/QueryErrorResetBoundary.js +12 -12
  10. package/build/legacy/QueryErrorResetBoundary.js.map +1 -1
  11. package/build/legacy/infiniteQueryOptions.cjs.map +1 -1
  12. package/build/legacy/infiniteQueryOptions.d.cts +41 -55
  13. package/build/legacy/infiniteQueryOptions.d.cts.map +1 -1
  14. package/build/legacy/infiniteQueryOptions.d.ts +41 -55
  15. package/build/legacy/infiniteQueryOptions.d.ts.map +1 -1
  16. package/build/legacy/infiniteQueryOptions.js.map +1 -1
  17. package/build/legacy/mutationOptions.cjs.map +1 -1
  18. package/build/legacy/mutationOptions.d.cts +4 -17
  19. package/build/legacy/mutationOptions.d.cts.map +1 -1
  20. package/build/legacy/mutationOptions.d.ts +4 -17
  21. package/build/legacy/mutationOptions.d.ts.map +1 -1
  22. package/build/legacy/mutationOptions.js.map +1 -1
  23. package/build/legacy/queryOptions.cjs.map +1 -1
  24. package/build/legacy/queryOptions.d.cts +51 -74
  25. package/build/legacy/queryOptions.d.cts.map +1 -1
  26. package/build/legacy/queryOptions.d.ts +51 -74
  27. package/build/legacy/queryOptions.d.ts.map +1 -1
  28. package/build/legacy/queryOptions.js.map +1 -1
  29. package/build/legacy/useInfiniteQuery.cjs.map +1 -1
  30. package/build/legacy/useInfiniteQuery.d.cts +208 -36
  31. package/build/legacy/useInfiniteQuery.d.cts.map +1 -1
  32. package/build/legacy/useInfiniteQuery.d.ts +208 -36
  33. package/build/legacy/useInfiniteQuery.d.ts.map +1 -1
  34. package/build/legacy/useInfiniteQuery.js.map +1 -1
  35. package/build/legacy/useIsFetching.cjs +8 -6
  36. package/build/legacy/useIsFetching.cjs.map +1 -1
  37. package/build/legacy/useIsFetching.d.cts +8 -6
  38. package/build/legacy/useIsFetching.d.cts.map +1 -1
  39. package/build/legacy/useIsFetching.d.ts +8 -6
  40. package/build/legacy/useIsFetching.d.ts.map +1 -1
  41. package/build/legacy/useIsFetching.js +8 -6
  42. package/build/legacy/useIsFetching.js.map +1 -1
  43. package/build/legacy/useMutation.cjs +13 -11
  44. package/build/legacy/useMutation.cjs.map +1 -1
  45. package/build/legacy/useMutation.d.cts +13 -11
  46. package/build/legacy/useMutation.d.cts.map +1 -1
  47. package/build/legacy/useMutation.d.ts +13 -11
  48. package/build/legacy/useMutation.d.ts.map +1 -1
  49. package/build/legacy/useMutation.js +13 -11
  50. package/build/legacy/useMutation.js.map +1 -1
  51. package/build/legacy/useMutationState.cjs +49 -29
  52. package/build/legacy/useMutationState.cjs.map +1 -1
  53. package/build/legacy/useMutationState.d.cts +49 -29
  54. package/build/legacy/useMutationState.d.cts.map +1 -1
  55. package/build/legacy/useMutationState.d.ts +49 -29
  56. package/build/legacy/useMutationState.d.ts.map +1 -1
  57. package/build/legacy/useMutationState.js +49 -29
  58. package/build/legacy/useMutationState.js.map +1 -1
  59. package/build/legacy/useQueries.cjs +50 -23
  60. package/build/legacy/useQueries.cjs.map +1 -1
  61. package/build/legacy/useQueries.d.cts +50 -23
  62. package/build/legacy/useQueries.d.cts.map +1 -1
  63. package/build/legacy/useQueries.d.ts +50 -23
  64. package/build/legacy/useQueries.d.ts.map +1 -1
  65. package/build/legacy/useQueries.js +50 -23
  66. package/build/legacy/useQueries.js.map +1 -1
  67. package/build/legacy/useQuery.cjs.map +1 -1
  68. package/build/legacy/useQuery.d.cts +93 -33
  69. package/build/legacy/useQuery.d.cts.map +1 -1
  70. package/build/legacy/useQuery.d.ts +93 -33
  71. package/build/legacy/useQuery.d.ts.map +1 -1
  72. package/build/legacy/useQuery.js.map +1 -1
  73. package/build/legacy/useSuspenseInfiniteQuery.cjs +57 -7
  74. package/build/legacy/useSuspenseInfiniteQuery.cjs.map +1 -1
  75. package/build/legacy/useSuspenseInfiniteQuery.d.cts +57 -7
  76. package/build/legacy/useSuspenseInfiniteQuery.d.cts.map +1 -1
  77. package/build/legacy/useSuspenseInfiniteQuery.d.ts +57 -7
  78. package/build/legacy/useSuspenseInfiniteQuery.d.ts.map +1 -1
  79. package/build/legacy/useSuspenseInfiniteQuery.js +57 -7
  80. package/build/legacy/useSuspenseInfiniteQuery.js.map +1 -1
  81. package/build/legacy/useSuspenseQueries.cjs.map +1 -1
  82. package/build/legacy/useSuspenseQueries.d.cts +244 -20
  83. package/build/legacy/useSuspenseQueries.d.cts.map +1 -1
  84. package/build/legacy/useSuspenseQueries.d.ts +244 -20
  85. package/build/legacy/useSuspenseQueries.d.ts.map +1 -1
  86. package/build/legacy/useSuspenseQueries.js.map +1 -1
  87. package/build/legacy/useSuspenseQuery.cjs +48 -8
  88. package/build/legacy/useSuspenseQuery.cjs.map +1 -1
  89. package/build/legacy/useSuspenseQuery.d.cts +48 -8
  90. package/build/legacy/useSuspenseQuery.d.cts.map +1 -1
  91. package/build/legacy/useSuspenseQuery.d.ts +48 -8
  92. package/build/legacy/useSuspenseQuery.d.ts.map +1 -1
  93. package/build/legacy/useSuspenseQuery.js +48 -8
  94. package/build/legacy/useSuspenseQuery.js.map +1 -1
  95. package/build/modern/HydrationBoundary.cjs +1 -1
  96. package/build/modern/HydrationBoundary.cjs.map +1 -1
  97. package/build/modern/HydrationBoundary.js +1 -1
  98. package/build/modern/HydrationBoundary.js.map +1 -1
  99. package/build/modern/QueryErrorResetBoundary.cjs +12 -12
  100. package/build/modern/QueryErrorResetBoundary.cjs.map +1 -1
  101. package/build/modern/QueryErrorResetBoundary.d.cts +12 -12
  102. package/build/modern/QueryErrorResetBoundary.d.ts +12 -12
  103. package/build/modern/QueryErrorResetBoundary.js +12 -12
  104. package/build/modern/QueryErrorResetBoundary.js.map +1 -1
  105. package/build/modern/infiniteQueryOptions.cjs.map +1 -1
  106. package/build/modern/infiniteQueryOptions.d.cts +41 -55
  107. package/build/modern/infiniteQueryOptions.d.cts.map +1 -1
  108. package/build/modern/infiniteQueryOptions.d.ts +41 -55
  109. package/build/modern/infiniteQueryOptions.d.ts.map +1 -1
  110. package/build/modern/infiniteQueryOptions.js.map +1 -1
  111. package/build/modern/mutationOptions.cjs.map +1 -1
  112. package/build/modern/mutationOptions.d.cts +4 -17
  113. package/build/modern/mutationOptions.d.cts.map +1 -1
  114. package/build/modern/mutationOptions.d.ts +4 -17
  115. package/build/modern/mutationOptions.d.ts.map +1 -1
  116. package/build/modern/mutationOptions.js.map +1 -1
  117. package/build/modern/queryOptions.cjs.map +1 -1
  118. package/build/modern/queryOptions.d.cts +51 -74
  119. package/build/modern/queryOptions.d.cts.map +1 -1
  120. package/build/modern/queryOptions.d.ts +51 -74
  121. package/build/modern/queryOptions.d.ts.map +1 -1
  122. package/build/modern/queryOptions.js.map +1 -1
  123. package/build/modern/useInfiniteQuery.cjs.map +1 -1
  124. package/build/modern/useInfiniteQuery.d.cts +208 -36
  125. package/build/modern/useInfiniteQuery.d.cts.map +1 -1
  126. package/build/modern/useInfiniteQuery.d.ts +208 -36
  127. package/build/modern/useInfiniteQuery.d.ts.map +1 -1
  128. package/build/modern/useInfiniteQuery.js.map +1 -1
  129. package/build/modern/useIsFetching.cjs +8 -6
  130. package/build/modern/useIsFetching.cjs.map +1 -1
  131. package/build/modern/useIsFetching.d.cts +8 -6
  132. package/build/modern/useIsFetching.d.cts.map +1 -1
  133. package/build/modern/useIsFetching.d.ts +8 -6
  134. package/build/modern/useIsFetching.d.ts.map +1 -1
  135. package/build/modern/useIsFetching.js +8 -6
  136. package/build/modern/useIsFetching.js.map +1 -1
  137. package/build/modern/useMutation.cjs +13 -11
  138. package/build/modern/useMutation.cjs.map +1 -1
  139. package/build/modern/useMutation.d.cts +13 -11
  140. package/build/modern/useMutation.d.cts.map +1 -1
  141. package/build/modern/useMutation.d.ts +13 -11
  142. package/build/modern/useMutation.d.ts.map +1 -1
  143. package/build/modern/useMutation.js +13 -11
  144. package/build/modern/useMutation.js.map +1 -1
  145. package/build/modern/useMutationState.cjs +49 -29
  146. package/build/modern/useMutationState.cjs.map +1 -1
  147. package/build/modern/useMutationState.d.cts +49 -29
  148. package/build/modern/useMutationState.d.cts.map +1 -1
  149. package/build/modern/useMutationState.d.ts +49 -29
  150. package/build/modern/useMutationState.d.ts.map +1 -1
  151. package/build/modern/useMutationState.js +49 -29
  152. package/build/modern/useMutationState.js.map +1 -1
  153. package/build/modern/useQueries.cjs +50 -23
  154. package/build/modern/useQueries.cjs.map +1 -1
  155. package/build/modern/useQueries.d.cts +50 -23
  156. package/build/modern/useQueries.d.cts.map +1 -1
  157. package/build/modern/useQueries.d.ts +50 -23
  158. package/build/modern/useQueries.d.ts.map +1 -1
  159. package/build/modern/useQueries.js +50 -23
  160. package/build/modern/useQueries.js.map +1 -1
  161. package/build/modern/useQuery.cjs.map +1 -1
  162. package/build/modern/useQuery.d.cts +93 -33
  163. package/build/modern/useQuery.d.cts.map +1 -1
  164. package/build/modern/useQuery.d.ts +93 -33
  165. package/build/modern/useQuery.d.ts.map +1 -1
  166. package/build/modern/useQuery.js.map +1 -1
  167. package/build/modern/useSuspenseInfiniteQuery.cjs +57 -7
  168. package/build/modern/useSuspenseInfiniteQuery.cjs.map +1 -1
  169. package/build/modern/useSuspenseInfiniteQuery.d.cts +57 -7
  170. package/build/modern/useSuspenseInfiniteQuery.d.cts.map +1 -1
  171. package/build/modern/useSuspenseInfiniteQuery.d.ts +57 -7
  172. package/build/modern/useSuspenseInfiniteQuery.d.ts.map +1 -1
  173. package/build/modern/useSuspenseInfiniteQuery.js +57 -7
  174. package/build/modern/useSuspenseInfiniteQuery.js.map +1 -1
  175. package/build/modern/useSuspenseQueries.cjs.map +1 -1
  176. package/build/modern/useSuspenseQueries.d.cts +244 -20
  177. package/build/modern/useSuspenseQueries.d.cts.map +1 -1
  178. package/build/modern/useSuspenseQueries.d.ts +244 -20
  179. package/build/modern/useSuspenseQueries.d.ts.map +1 -1
  180. package/build/modern/useSuspenseQueries.js.map +1 -1
  181. package/build/modern/useSuspenseQuery.cjs +48 -8
  182. package/build/modern/useSuspenseQuery.cjs.map +1 -1
  183. package/build/modern/useSuspenseQuery.d.cts +48 -8
  184. package/build/modern/useSuspenseQuery.d.cts.map +1 -1
  185. package/build/modern/useSuspenseQuery.d.ts +48 -8
  186. package/build/modern/useSuspenseQuery.d.ts.map +1 -1
  187. package/build/modern/useSuspenseQuery.js +48 -8
  188. package/build/modern/useSuspenseQuery.js.map +1 -1
  189. package/build/query-codemods/eslint.config.js +7 -0
  190. package/build/query-codemods/root.eslint.config.js +45 -0
  191. package/package.json +11 -11
  192. package/src/HydrationBoundary.tsx +0 -1
  193. package/src/QueryErrorResetBoundary.tsx +12 -12
  194. package/src/infiniteQueryOptions.ts +41 -55
  195. package/src/mutationOptions.ts +4 -17
  196. package/src/queryOptions.ts +50 -73
  197. package/src/useInfiniteQuery.ts +208 -36
  198. package/src/useIsFetching.ts +8 -6
  199. package/src/useMutation.ts +13 -11
  200. package/src/useMutationState.ts +49 -29
  201. package/src/useQueries.ts +50 -23
  202. package/src/useQuery.ts +93 -33
  203. package/src/useSuspenseInfiniteQuery.ts +57 -7
  204. package/src/useSuspenseQueries.ts +244 -20
  205. package/src/useSuspenseQuery.ts +48 -8
package/build/legacy/useSuspenseQueries.d.ts CHANGED
@@ -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 each `query` can't have
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 { useSuspenseQueries } from '@tanstack/preact-query'
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
- * <Suspense fallback={<h1>Loading posts...</h1>}>
109
- * <Posts ids={[1, 2, 3]} />
110
- * </Suspense>
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 { useSuspenseQueries } from '@tanstack/preact-query'
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
- * <Suspense fallback={<h1>Loading dashboard...</h1>}>
143
- * <Dashboard />
144
- * </Suspense>
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 each `query` can't have
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 { useSuspenseQueries } from '@tanstack/preact-query'
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
- * <Suspense fallback={<h1>Loading posts...</h1>}>
201
- * <Posts ids={[1, 2, 3]} />
202
- * </Suspense>
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 { useSuspenseQueries } from '@tanstack/preact-query'
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
- * <Suspense fallback={<h1>Loading dashboard...</h1>}>
235
- * <Dashboard />
236
- * </Suspense>
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: {
package/build/legacy/useSuspenseQueries.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useSuspenseQueries.d.ts","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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAmFxC,mBACd,UAAU,YACV,kBAAkB,uBAAuB,IAEzC;;;;EAIE,sBACiB,uBAAuB,sBACpB,WAAW,IAAI,2BAA2B,EAAE;;;;;EAKhE,WAAW,QAAQ,uBAAuB,OAAO;GAEnD,cAAc,cACb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAmFa,mBACd,UAAU,YACV,kBAAkB,uBAAuB,IAEzC;;;;EAIE,sBAAsB,uBAAuB;;;;;EAK7C,WAAW,QAAQ,uBAAuB,OAAO;GAEnD,cAAc,cACb"}
1
+ {"version":3,"file":"useSuspenseQueries.d.ts","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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAoOxC,mBACd,UAAU,YACV,kBAAkB,uBAAuB,IAEzC;;;;EAIE,sBACiB,uBAAuB,sBACpB,WAAW,IAAI,2BAA2B,EAAE;;;;;EAKhE,WAAW,QAAQ,uBAAuB,OAAO;GAEnD,cAAc,cACb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkKa,mBACd,UAAU,YACV,kBAAkB,uBAAuB,IAEzC;;;;EAIE,sBAAsB,uBAAuB;;;;;EAK7C,WAAW,QAAQ,uBAAuB,OAAO;GAEnD,cAAc,cACb"}
package/build/legacy/useSuspenseQueries.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useSuspenseQueries.js","names":[],"sources":["../../src/useSuspenseQueries.ts"],"sourcesContent":["import { skipToken } from '@tanstack/query-core'\nimport type {\n DefaultError,\n QueryClient,\n QueryFunction,\n ThrowOnError,\n} from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'\nimport { useQueries } from './useQueries'\n\n// Avoid TS depth-limit error in case of large array literal\ntype MAXIMUM_DEPTH = 20\n\n// Widen the type of the symbol to enable type inference even if skipToken is not immutable.\ntype SkipTokenForUseQueries = symbol\n\ntype GetUseSuspenseQueryOptions<T> =\n // Part 1: responsible for applying explicit type parameter to function arguments, if object { queryFnData: TQueryFnData, error: TError, data: TData }\n T extends {\n queryFnData: infer TQueryFnData\n error?: infer TError\n data: infer TData\n }\n ? UseSuspenseQueryOptions<TQueryFnData, TError, TData>\n : T extends { queryFnData: infer TQueryFnData; error?: infer TError }\n ? UseSuspenseQueryOptions<TQueryFnData, TError>\n : T extends { data: infer TData; error?: infer TError }\n ? UseSuspenseQueryOptions<unknown, TError, TData>\n : // Part 2: responsible for applying explicit type parameter to function arguments, if tuple [TQueryFnData, TError, TData]\n T extends [infer TQueryFnData, infer TError, infer TData]\n ? UseSuspenseQueryOptions<TQueryFnData, TError, TData>\n : T extends [infer TQueryFnData, infer TError]\n ? UseSuspenseQueryOptions<TQueryFnData, TError>\n : T extends [infer TQueryFnData]\n ? UseSuspenseQueryOptions<TQueryFnData>\n : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided\n T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, infer TQueryKey>\n | SkipTokenForUseQueries\n select?: (data: any) => infer TData\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey\n >\n : T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, infer TQueryKey>\n | SkipTokenForUseQueries\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryOptions<\n TQueryFnData,\n TError,\n TQueryFnData,\n TQueryKey\n >\n : // Fallback\n UseSuspenseQueryOptions\n\ntype GetUseSuspenseQueryResult<T> =\n // Part 1: responsible for mapping explicit type parameter to function result, if object\n T extends { queryFnData: any; error?: infer TError; data: infer TData }\n ? UseSuspenseQueryResult<TData, TError>\n : T extends { queryFnData: infer TQueryFnData; error?: infer TError }\n ? UseSuspenseQueryResult<TQueryFnData, TError>\n : T extends { data: infer TData; error?: infer TError }\n ? UseSuspenseQueryResult<TData, TError>\n : // Part 2: responsible for mapping explicit type parameter to function result, if tuple\n T extends [any, infer TError, infer TData]\n ? UseSuspenseQueryResult<TData, TError>\n : T extends [infer TQueryFnData, infer TError]\n ? UseSuspenseQueryResult<TQueryFnData, TError>\n : T extends [infer TQueryFnData]\n ? UseSuspenseQueryResult<TQueryFnData>\n : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided\n T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, any>\n | SkipTokenForUseQueries\n select?: (data: any) => infer TData\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryResult<\n unknown extends TData ? TQueryFnData : TData,\n unknown extends TError ? DefaultError : TError\n >\n : T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, any>\n | SkipTokenForUseQueries\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryResult<\n TQueryFnData,\n unknown extends TError ? DefaultError : TError\n >\n : // Fallback\n UseSuspenseQueryResult\n\n/**\n * The `queries` array accepted by `useSuspenseQueries`. Recursively unwraps each tuple element so every\n * entry's `queryFn`/`select` are inferred individually, up to 20 elements. An opaque array (e.g. `unknown[]`)\n * is returned as-is; a non-tuple array of a known element type, or a tuple past 20 elements, falls back to a\n * single homogeneous {@link UseSuspenseQueryOptions} type.\n *\n * @template T - The type of the `queries` array as written at the call site.\n * @template TResults - The internal accumulator that this type builds during recursion. It is not meant\n * to be set explicitly.\n * @template TDepth - The internal recursion-depth counter, checked against the 20-element limit. It is not\n * meant to be set explicitly.\n */\nexport type SuspenseQueriesOptions<\n T extends Array<any>,\n TResults extends Array<any> = [],\n TDepth extends ReadonlyArray<number> = [],\n> = TDepth['length'] extends MAXIMUM_DEPTH\n ? Array<UseSuspenseQueryOptions>\n : T extends []\n ? []\n : T extends [infer Head]\n ? [...TResults, GetUseSuspenseQueryOptions<Head>]\n : T extends [infer Head, ...infer Tails]\n ? SuspenseQueriesOptions<\n [...Tails],\n [...TResults, GetUseSuspenseQueryOptions<Head>],\n [...TDepth, 1]\n >\n : Array<unknown> extends T\n ? T\n : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogeneous type!\n // use this to infer the param types in the case of Array.map() argument\n T extends Array<\n UseSuspenseQueryOptions<\n infer TQueryFnData,\n infer TError,\n infer TData,\n infer TQueryKey\n >\n >\n ? Array<\n UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>\n >\n : // Fallback\n Array<UseSuspenseQueryOptions>\n\n/**\n * The result type returned by `useSuspenseQueries`, when no `combine` is provided. Mirrors\n * {@link SuspenseQueriesOptions}: each tuple element's result type is inferred individually, up to 20 elements.\n * A non-tuple array is mapped per-element instead, still inferring each entry individually; only past 20\n * elements does this fall back to a single homogeneous {@link UseSuspenseQueryResult} type.\n *\n * @template T - The type of the `queries` array, as inferred by {@link SuspenseQueriesOptions}.\n * @template TResults - The internal accumulator that this type builds during recursion. It is not meant\n * to be set explicitly.\n * @template TDepth - The internal recursion-depth counter, checked against the 20-element limit. It is not\n * meant to be set explicitly.\n */\nexport type SuspenseQueriesResults<\n T extends Array<any>,\n TResults extends Array<any> = [],\n TDepth extends ReadonlyArray<number> = [],\n> = TDepth['length'] extends MAXIMUM_DEPTH\n ? Array<UseSuspenseQueryResult>\n : T extends []\n ? []\n : T extends [infer Head]\n ? [...TResults, GetUseSuspenseQueryResult<Head>]\n : T extends [infer Head, ...infer Tails]\n ? SuspenseQueriesResults<\n [...Tails],\n [...TResults, GetUseSuspenseQueryResult<Head>],\n [...TDepth, 1]\n >\n : { [K in keyof T]: GetUseSuspenseQueryResult<T[K]> }\n\n/**\n * The options for `useSuspenseQueries` are the same as for `useQueries`, except that each `query` can't have\n * `throwOnError`, `enabled`, or `placeholderData`.\n *\n * @param options - The `queries` array to run in Suspense, and an optional `combine` function.\n * @param queryClient - Use this to provide a custom `QueryClient`. Otherwise, the one from the nearest context\n * will be used.\n * @returns The same structure as `useQueries`, except that for each `query`, `data` is guaranteed to be\n * defined, `isPlaceholderData` is missing, and `status` is either `success` or `error` (with the derived\n * flags set accordingly).\n *\n * Caveat: the component will only re-mount after all queries have finished loading. Hence, if a query has gone\n * stale in the time it took for all the queries to complete, it will be fetched again at re-mount. To avoid\n * this, make sure to set a high enough `staleTime`. Cancellation does not work.\n *\n * @example\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQueries } from '@tanstack/preact-query'\n *\n * function Posts({ ids }: { ids: Array<number> }) {\n * // Every result is guaranteed to be defined — no per-query `isPending` check needed.\n * const postQueries = useSuspenseQueries({\n * queries: ids.map((id) => ({\n * queryKey: ['post', id],\n * queryFn: () => fetchPost(id),\n * })),\n * })\n *\n * return (\n * <ul>\n * {postQueries.map((query) => (\n * <li key={query.data.id}>{query.data.title}</li>\n * ))}\n * </ul>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading posts...</h1>}>\n * <Posts ids={[1, 2, 3]} />\n * </Suspense>\n * )\n * }\n * ```\n *\n * @example\n * Several different queries — use `useSuspenseQueries` instead of multiple `useSuspenseQuery` calls, so\n * they fetch in parallel rather than suspending one after another:\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQueries } from '@tanstack/preact-query'\n *\n * function Dashboard() {\n * const [usersQuery, teamsQuery, projectsQuery] = useSuspenseQueries({\n * queries: [\n * { queryKey: ['users'], queryFn: fetchUsers },\n * { queryKey: ['teams'], queryFn: fetchTeams },\n * { queryKey: ['projects'], queryFn: fetchProjects },\n * ],\n * })\n *\n * return (\n * <div>\n * <UserList users={usersQuery.data} />\n * <TeamList teams={teamsQuery.data} />\n * <ProjectList projects={projectsQuery.data} />\n * </div>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading dashboard...</h1>}>\n * <Dashboard />\n * </Suspense>\n * )\n * }\n * ```\n */\nexport function useSuspenseQueries<\n T extends Array<any>,\n TCombinedResult = SuspenseQueriesResults<T>,\n>(\n options: {\n /**\n * An array with query option objects identical to `useSuspenseQuery`.\n */\n queries:\n | readonly [...SuspenseQueriesOptions<T>]\n | readonly [...{ [K in keyof T]: GetUseSuspenseQueryOptions<T[K]> }]\n /**\n * Use this to combine the results of the queries into a single value. The result will be structurally\n * shared to be as referentially stable as possible.\n */\n combine?: (result: SuspenseQueriesResults<T>) => TCombinedResult\n },\n queryClient?: QueryClient,\n): TCombinedResult\n\n/**\n * The options for `useSuspenseQueries` are the same as for `useQueries`, except that each `query` can't have\n * `throwOnError`, `enabled`, or `placeholderData`.\n *\n * @param options - The `queries` array to run in Suspense, and an optional `combine` function.\n * @param queryClient - Use this to provide a custom `QueryClient`. Otherwise, the one from the nearest context\n * will be used.\n * @returns The same structure as `useQueries`, except that for each `query`, `data` is guaranteed to be\n * defined, `isPlaceholderData` is missing, and `status` is either `success` or `error` (with the derived\n * flags set accordingly).\n *\n * Caveat: the component will only re-mount after all queries have finished loading. Hence, if a query has gone\n * stale in the time it took for all the queries to complete, it will be fetched again at re-mount. To avoid\n * this, make sure to set a high enough `staleTime`. Cancellation does not work.\n *\n * @example\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQueries } from '@tanstack/preact-query'\n *\n * function Posts({ ids }: { ids: Array<number> }) {\n * // Every result is guaranteed to be defined — no per-query `isPending` check needed.\n * const postQueries = useSuspenseQueries({\n * queries: ids.map((id) => ({\n * queryKey: ['post', id],\n * queryFn: () => fetchPost(id),\n * })),\n * })\n *\n * return (\n * <ul>\n * {postQueries.map((query) => (\n * <li key={query.data.id}>{query.data.title}</li>\n * ))}\n * </ul>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading posts...</h1>}>\n * <Posts ids={[1, 2, 3]} />\n * </Suspense>\n * )\n * }\n * ```\n *\n * @example\n * Several different queries — use `useSuspenseQueries` instead of multiple `useSuspenseQuery` calls, so\n * they fetch in parallel rather than suspending one after another:\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQueries } from '@tanstack/preact-query'\n *\n * function Dashboard() {\n * const [usersQuery, teamsQuery, projectsQuery] = useSuspenseQueries({\n * queries: [\n * { queryKey: ['users'], queryFn: fetchUsers },\n * { queryKey: ['teams'], queryFn: fetchTeams },\n * { queryKey: ['projects'], queryFn: fetchProjects },\n * ],\n * })\n *\n * return (\n * <div>\n * <UserList users={usersQuery.data} />\n * <TeamList teams={teamsQuery.data} />\n * <ProjectList projects={projectsQuery.data} />\n * </div>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading dashboard...</h1>}>\n * <Dashboard />\n * </Suspense>\n * )\n * }\n * ```\n */\nexport function useSuspenseQueries<\n T extends Array<any>,\n TCombinedResult = SuspenseQueriesResults<T>,\n>(\n options: {\n /**\n * An array with query option objects identical to `useSuspenseQuery`.\n */\n queries: readonly [...SuspenseQueriesOptions<T>]\n /**\n * Use this to combine the results of the queries into a single value. The result will be structurally\n * shared to be as referentially stable as possible.\n */\n combine?: (result: SuspenseQueriesResults<T>) => TCombinedResult\n },\n queryClient?: QueryClient,\n): TCombinedResult\n\nexport function useSuspenseQueries(options: any, queryClient?: QueryClient) {\n return useQueries(\n {\n ...options,\n queries: options.queries.map((query: any) => {\n if (process.env.NODE_ENV !== 'production') {\n if (query.queryFn === skipToken) {\n console.error('skipToken is not allowed for useSuspenseQueries')\n }\n }\n\n return {\n ...query,\n suspense: true,\n throwOnError: defaultThrowOnError,\n enabled: true,\n placeholderData: undefined,\n }\n }),\n },\n queryClient,\n )\n}\n"],"mappings":";;;;AA8XA,SAAgB,mBAAmB,SAAc,aAA2B;CAC1E,OAAO,WACL;EACE,GAAG;EACH,SAAS,QAAQ,QAAQ,KAAK,UAAe;GAC3C,IAAI,QAAQ,IAAI,aAAa,cACvB;QAAA,MAAM,YAAY,WACpB,QAAQ,MAAM,iDAAiD;GAAA;GAInE,OAAO;IACL,GAAG;IACH,UAAU;IACV,cAAc;IACd,SAAS;IACT,iBAAiB,KAAA;GACnB;EACF,CAAC;CACH,GACA,WACF;AACF"}
1
+ {"version":3,"file":"useSuspenseQueries.js","names":[],"sources":["../../src/useSuspenseQueries.ts"],"sourcesContent":["import { skipToken } from '@tanstack/query-core'\nimport type {\n DefaultError,\n QueryClient,\n QueryFunction,\n ThrowOnError,\n} from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'\nimport { useQueries } from './useQueries'\n\n// Avoid TS depth-limit error in case of large array literal\ntype MAXIMUM_DEPTH = 20\n\n// Widen the type of the symbol to enable type inference even if skipToken is not immutable.\ntype SkipTokenForUseQueries = symbol\n\ntype GetUseSuspenseQueryOptions<T> =\n // Part 1: responsible for applying explicit type parameter to function arguments, if object { queryFnData: TQueryFnData, error: TError, data: TData }\n T extends {\n queryFnData: infer TQueryFnData\n error?: infer TError\n data: infer TData\n }\n ? UseSuspenseQueryOptions<TQueryFnData, TError, TData>\n : T extends { queryFnData: infer TQueryFnData; error?: infer TError }\n ? UseSuspenseQueryOptions<TQueryFnData, TError>\n : T extends { data: infer TData; error?: infer TError }\n ? UseSuspenseQueryOptions<unknown, TError, TData>\n : // Part 2: responsible for applying explicit type parameter to function arguments, if tuple [TQueryFnData, TError, TData]\n T extends [infer TQueryFnData, infer TError, infer TData]\n ? UseSuspenseQueryOptions<TQueryFnData, TError, TData>\n : T extends [infer TQueryFnData, infer TError]\n ? UseSuspenseQueryOptions<TQueryFnData, TError>\n : T extends [infer TQueryFnData]\n ? UseSuspenseQueryOptions<TQueryFnData>\n : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided\n T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, infer TQueryKey>\n | SkipTokenForUseQueries\n select?: (data: any) => infer TData\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey\n >\n : T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, infer TQueryKey>\n | SkipTokenForUseQueries\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryOptions<\n TQueryFnData,\n TError,\n TQueryFnData,\n TQueryKey\n >\n : // Fallback\n UseSuspenseQueryOptions\n\ntype GetUseSuspenseQueryResult<T> =\n // Part 1: responsible for mapping explicit type parameter to function result, if object\n T extends { queryFnData: any; error?: infer TError; data: infer TData }\n ? UseSuspenseQueryResult<TData, TError>\n : T extends { queryFnData: infer TQueryFnData; error?: infer TError }\n ? UseSuspenseQueryResult<TQueryFnData, TError>\n : T extends { data: infer TData; error?: infer TError }\n ? UseSuspenseQueryResult<TData, TError>\n : // Part 2: responsible for mapping explicit type parameter to function result, if tuple\n T extends [any, infer TError, infer TData]\n ? UseSuspenseQueryResult<TData, TError>\n : T extends [infer TQueryFnData, infer TError]\n ? UseSuspenseQueryResult<TQueryFnData, TError>\n : T extends [infer TQueryFnData]\n ? UseSuspenseQueryResult<TQueryFnData>\n : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided\n T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, any>\n | SkipTokenForUseQueries\n select?: (data: any) => infer TData\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryResult<\n unknown extends TData ? TQueryFnData : TData,\n unknown extends TError ? DefaultError : TError\n >\n : T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, any>\n | SkipTokenForUseQueries\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryResult<\n TQueryFnData,\n unknown extends TError ? DefaultError : TError\n >\n : // Fallback\n UseSuspenseQueryResult\n\n/**\n * The `queries` array accepted by `useSuspenseQueries`. Recursively unwraps each tuple element so every\n * entry's `queryFn`/`select` are inferred individually, up to 20 elements. An opaque array (e.g. `unknown[]`)\n * is returned as-is; a non-tuple array of a known element type, or a tuple past 20 elements, falls back to a\n * single homogeneous {@link UseSuspenseQueryOptions} type.\n *\n * @template T - The type of the `queries` array as written at the call site.\n * @template TResults - The internal accumulator that this type builds during recursion. It is not meant\n * to be set explicitly.\n * @template TDepth - The internal recursion-depth counter, checked against the 20-element limit. It is not\n * meant to be set explicitly.\n */\nexport type SuspenseQueriesOptions<\n T extends Array<any>,\n TResults extends Array<any> = [],\n TDepth extends ReadonlyArray<number> = [],\n> = TDepth['length'] extends MAXIMUM_DEPTH\n ? Array<UseSuspenseQueryOptions>\n : T extends []\n ? []\n : T extends [infer Head]\n ? [...TResults, GetUseSuspenseQueryOptions<Head>]\n : T extends [infer Head, ...infer Tails]\n ? SuspenseQueriesOptions<\n [...Tails],\n [...TResults, GetUseSuspenseQueryOptions<Head>],\n [...TDepth, 1]\n >\n : Array<unknown> extends T\n ? T\n : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogeneous type!\n // use this to infer the param types in the case of Array.map() argument\n T extends Array<\n UseSuspenseQueryOptions<\n infer TQueryFnData,\n infer TError,\n infer TData,\n infer TQueryKey\n >\n >\n ? Array<\n UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>\n >\n : // Fallback\n Array<UseSuspenseQueryOptions>\n\n/**\n * The result type returned by `useSuspenseQueries`, when no `combine` is provided. Mirrors\n * {@link SuspenseQueriesOptions}: each tuple element's result type is inferred individually, up to 20 elements.\n * A non-tuple array is mapped per-element instead, still inferring each entry individually; only past 20\n * elements does this fall back to a single homogeneous {@link UseSuspenseQueryResult} type.\n *\n * @template T - The type of the `queries` array, as inferred by {@link SuspenseQueriesOptions}.\n * @template TResults - The internal accumulator that this type builds during recursion. It is not meant\n * to be set explicitly.\n * @template TDepth - The internal recursion-depth counter, checked against the 20-element limit. It is not\n * meant to be set explicitly.\n */\nexport type SuspenseQueriesResults<\n T extends Array<any>,\n TResults extends Array<any> = [],\n TDepth extends ReadonlyArray<number> = [],\n> = TDepth['length'] extends MAXIMUM_DEPTH\n ? Array<UseSuspenseQueryResult>\n : T extends []\n ? []\n : T extends [infer Head]\n ? [...TResults, GetUseSuspenseQueryResult<Head>]\n : T extends [infer Head, ...infer Tails]\n ? SuspenseQueriesResults<\n [...Tails],\n [...TResults, GetUseSuspenseQueryResult<Head>],\n [...TDepth, 1]\n >\n : { [K in keyof T]: GetUseSuspenseQueryResult<T[K]> }\n\n/**\n * The options for `useSuspenseQueries` are the same as for `useQueries`, except that the top-level `subscribed`\n * option isn't supported, and each `query` can't have `throwOnError`, `enabled`, or `placeholderData`.\n *\n * @param options - The `queries` array to run in Suspense, and an optional `combine` function.\n * @param queryClient - Use this to provide a custom `QueryClient`. Otherwise, the one from the nearest context\n * will be used.\n * @returns The same structure as `useQueries`, except that for each `query`, `data` is guaranteed to be\n * defined, `isPlaceholderData` is missing, and `status` is either `success` or `error` (with the derived\n * flags set accordingly).\n *\n * Caveat: the component will only re-mount after all queries have finished loading. Hence, if a query has gone\n * stale in the time it took for all the queries to complete, it will be fetched again at re-mount. To avoid\n * this, make sure to set a high enough `staleTime`. Cancellation does not work.\n *\n * @example\n * The query error is thrown if a fetch fails and no cached data exists yet, so an error boundary is\n * required around `<Suspense>`. A failed background refetch instead continues to render the cached data.\n * Use {@link QueryErrorResetBoundary} to let the user retry after such an error:\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useErrorBoundary } from 'preact/hooks'\n * import {\n * QueryErrorResetBoundary,\n * useSuspenseQueries,\n * } from '@tanstack/preact-query'\n * import type { ComponentChildren } from 'preact'\n *\n * function Posts({ ids }: { ids: Array<number> }) {\n * // Every result is guaranteed to be defined — no per-query `isPending` check needed.\n * const postQueries = useSuspenseQueries({\n * queries: ids.map((id) => ({\n * queryKey: ['post', id],\n * queryFn: () => fetchPost(id),\n * })),\n * })\n *\n * return (\n * <ul>\n * {postQueries.map((query) => (\n * <li key={query.data.id}>{query.data.title}</li>\n * ))}\n * </ul>\n * )\n * }\n *\n * function App() {\n * return (\n * <QueryErrorResetBoundary>\n * {({ reset }) => (\n * <ErrorBoundary\n * onReset={reset}\n * fallbackRender={({ resetErrorBoundary }) => (\n * <div>\n * There was an error!\n * <button onClick={() => resetErrorBoundary()}>Try again</button>\n * </div>\n * )}\n * >\n * <Suspense fallback={<h1>Loading posts...</h1>}>\n * <Posts ids={[1, 2, 3]} />\n * </Suspense>\n * </ErrorBoundary>\n * )}\n * </QueryErrorResetBoundary>\n * )\n * }\n *\n * function ErrorBoundary({\n * children,\n * onReset,\n * fallbackRender,\n * }: {\n * children: ComponentChildren\n * onReset: () => void\n * fallbackRender: (props: {\n * error: Error\n * resetErrorBoundary: () => void\n * }) => ComponentChildren\n * }) {\n * const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())\n *\n * if (error) return fallbackRender({ error, resetErrorBoundary })\n *\n * return children\n * }\n * ```\n *\n * @example\n * Several different queries — use `useSuspenseQueries` instead of multiple `useSuspenseQuery` calls, so\n * they fetch in parallel rather than suspending one after another:\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useErrorBoundary } from 'preact/hooks'\n * import {\n * QueryErrorResetBoundary,\n * useSuspenseQueries,\n * } from '@tanstack/preact-query'\n * import type { ComponentChildren } from 'preact'\n *\n * function Dashboard() {\n * const [usersQuery, teamsQuery, projectsQuery] = useSuspenseQueries({\n * queries: [\n * { queryKey: ['users'], queryFn: fetchUsers },\n * { queryKey: ['teams'], queryFn: fetchTeams },\n * { queryKey: ['projects'], queryFn: fetchProjects },\n * ],\n * })\n *\n * return (\n * <div>\n * <UserList users={usersQuery.data} />\n * <TeamList teams={teamsQuery.data} />\n * <ProjectList projects={projectsQuery.data} />\n * </div>\n * )\n * }\n *\n * function App() {\n * return (\n * <QueryErrorResetBoundary>\n * {({ reset }) => (\n * <ErrorBoundary\n * onReset={reset}\n * fallbackRender={({ resetErrorBoundary }) => (\n * <div>\n * There was an error!\n * <button onClick={() => resetErrorBoundary()}>Try again</button>\n * </div>\n * )}\n * >\n * <Suspense fallback={<h1>Loading dashboard...</h1>}>\n * <Dashboard />\n * </Suspense>\n * </ErrorBoundary>\n * )}\n * </QueryErrorResetBoundary>\n * )\n * }\n *\n * function ErrorBoundary({\n * children,\n * onReset,\n * fallbackRender,\n * }: {\n * children: ComponentChildren\n * onReset: () => void\n * fallbackRender: (props: {\n * error: Error\n * resetErrorBoundary: () => void\n * }) => ComponentChildren\n * }) {\n * const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())\n *\n * if (error) return fallbackRender({ error, resetErrorBoundary })\n *\n * return children\n * }\n * ```\n *\n * @example\n * `combine`s the results into a single boolean, so `Refresh` only re-renders when that boolean changes,\n * not on every individual query update. This overload is the only one that accepts `combine`:\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useErrorBoundary } from 'preact/hooks'\n * import {\n * QueryErrorResetBoundary,\n * useSuspenseQueries,\n * } from '@tanstack/preact-query'\n * import type { ComponentChildren } from 'preact'\n *\n * function Refresh() {\n * const anyFetching = useSuspenseQueries({\n * queries: [\n * { queryKey: ['users'], queryFn: fetchUsers },\n * { queryKey: ['teams'], queryFn: fetchTeams },\n * ],\n * combine: (results) => results.some((result) => result.isFetching),\n * })\n *\n * return anyFetching ? <span>Refreshing…</span> : null\n * }\n *\n * function App() {\n * return (\n * <QueryErrorResetBoundary>\n * {({ reset }) => (\n * <ErrorBoundary\n * onReset={reset}\n * fallbackRender={({ resetErrorBoundary }) => (\n * <div>\n * There was an error!\n * <button onClick={() => resetErrorBoundary()}>Try again</button>\n * </div>\n * )}\n * >\n * <Suspense fallback={<h1>Loading dashboard...</h1>}>\n * <Refresh />\n * </Suspense>\n * </ErrorBoundary>\n * )}\n * </QueryErrorResetBoundary>\n * )\n * }\n *\n * function ErrorBoundary({\n * children,\n * onReset,\n * fallbackRender,\n * }: {\n * children: ComponentChildren\n * onReset: () => void\n * fallbackRender: (props: {\n * error: Error\n * resetErrorBoundary: () => void\n * }) => ComponentChildren\n * }) {\n * const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())\n *\n * if (error) return fallbackRender({ error, resetErrorBoundary })\n *\n * return children\n * }\n * ```\n */\nexport function useSuspenseQueries<\n T extends Array<any>,\n TCombinedResult = SuspenseQueriesResults<T>,\n>(\n options: {\n /**\n * An array with query option objects identical to `useSuspenseQuery`.\n */\n queries:\n | readonly [...SuspenseQueriesOptions<T>]\n | readonly [...{ [K in keyof T]: GetUseSuspenseQueryOptions<T[K]> }]\n /**\n * Use this to combine the results of the queries into a single value. The result will be structurally\n * shared to be as referentially stable as possible.\n */\n combine?: (result: SuspenseQueriesResults<T>) => TCombinedResult\n },\n queryClient?: QueryClient,\n): TCombinedResult\n\n/**\n * The options for `useSuspenseQueries` are the same as for `useQueries`, except that the top-level `subscribed`\n * option isn't supported, and each `query` can't have `throwOnError`, `enabled`, or `placeholderData`.\n *\n * @param options - The `queries` array to run in Suspense, and an optional `combine` function.\n * @param queryClient - Use this to provide a custom `QueryClient`. Otherwise, the one from the nearest context\n * will be used.\n * @returns The same structure as `useQueries`, except that for each `query`, `data` is guaranteed to be\n * defined, `isPlaceholderData` is missing, and `status` is either `success` or `error` (with the derived\n * flags set accordingly).\n *\n * Caveat: the component will only re-mount after all queries have finished loading. Hence, if a query has gone\n * stale in the time it took for all the queries to complete, it will be fetched again at re-mount. To avoid\n * this, make sure to set a high enough `staleTime`. Cancellation does not work.\n *\n * @example\n * The query error is thrown if a fetch fails and no cached data exists yet, so an error boundary is\n * required around `<Suspense>`. A failed background refetch instead continues to render the cached data.\n * Use {@link QueryErrorResetBoundary} to let the user retry after such an error:\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useErrorBoundary } from 'preact/hooks'\n * import {\n * QueryErrorResetBoundary,\n * useSuspenseQueries,\n * } from '@tanstack/preact-query'\n * import type { ComponentChildren } from 'preact'\n *\n * function Posts({ ids }: { ids: Array<number> }) {\n * // Every result is guaranteed to be defined — no per-query `isPending` check needed.\n * const postQueries = useSuspenseQueries({\n * queries: ids.map((id) => ({\n * queryKey: ['post', id],\n * queryFn: () => fetchPost(id),\n * })),\n * })\n *\n * return (\n * <ul>\n * {postQueries.map((query) => (\n * <li key={query.data.id}>{query.data.title}</li>\n * ))}\n * </ul>\n * )\n * }\n *\n * function App() {\n * return (\n * <QueryErrorResetBoundary>\n * {({ reset }) => (\n * <ErrorBoundary\n * onReset={reset}\n * fallbackRender={({ resetErrorBoundary }) => (\n * <div>\n * There was an error!\n * <button onClick={() => resetErrorBoundary()}>Try again</button>\n * </div>\n * )}\n * >\n * <Suspense fallback={<h1>Loading posts...</h1>}>\n * <Posts ids={[1, 2, 3]} />\n * </Suspense>\n * </ErrorBoundary>\n * )}\n * </QueryErrorResetBoundary>\n * )\n * }\n *\n * function ErrorBoundary({\n * children,\n * onReset,\n * fallbackRender,\n * }: {\n * children: ComponentChildren\n * onReset: () => void\n * fallbackRender: (props: {\n * error: Error\n * resetErrorBoundary: () => void\n * }) => ComponentChildren\n * }) {\n * const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())\n *\n * if (error) return fallbackRender({ error, resetErrorBoundary })\n *\n * return children\n * }\n * ```\n *\n * @example\n * Several different queries — use `useSuspenseQueries` instead of multiple `useSuspenseQuery` calls, so\n * they fetch in parallel rather than suspending one after another:\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useErrorBoundary } from 'preact/hooks'\n * import {\n * QueryErrorResetBoundary,\n * useSuspenseQueries,\n * } from '@tanstack/preact-query'\n * import type { ComponentChildren } from 'preact'\n *\n * function Dashboard() {\n * const [usersQuery, teamsQuery, projectsQuery] = useSuspenseQueries({\n * queries: [\n * { queryKey: ['users'], queryFn: fetchUsers },\n * { queryKey: ['teams'], queryFn: fetchTeams },\n * { queryKey: ['projects'], queryFn: fetchProjects },\n * ],\n * })\n *\n * return (\n * <div>\n * <UserList users={usersQuery.data} />\n * <TeamList teams={teamsQuery.data} />\n * <ProjectList projects={projectsQuery.data} />\n * </div>\n * )\n * }\n *\n * function App() {\n * return (\n * <QueryErrorResetBoundary>\n * {({ reset }) => (\n * <ErrorBoundary\n * onReset={reset}\n * fallbackRender={({ resetErrorBoundary }) => (\n * <div>\n * There was an error!\n * <button onClick={() => resetErrorBoundary()}>Try again</button>\n * </div>\n * )}\n * >\n * <Suspense fallback={<h1>Loading dashboard...</h1>}>\n * <Dashboard />\n * </Suspense>\n * </ErrorBoundary>\n * )}\n * </QueryErrorResetBoundary>\n * )\n * }\n *\n * function ErrorBoundary({\n * children,\n * onReset,\n * fallbackRender,\n * }: {\n * children: ComponentChildren\n * onReset: () => void\n * fallbackRender: (props: {\n * error: Error\n * resetErrorBoundary: () => void\n * }) => ComponentChildren\n * }) {\n * const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())\n *\n * if (error) return fallbackRender({ error, resetErrorBoundary })\n *\n * return children\n * }\n * ```\n */\nexport function useSuspenseQueries<\n T extends Array<any>,\n TCombinedResult = SuspenseQueriesResults<T>,\n>(\n options: {\n /**\n * An array with query option objects identical to `useSuspenseQuery`.\n */\n queries: readonly [...SuspenseQueriesOptions<T>]\n /**\n * Use this to combine the results of the queries into a single value. The result will be structurally\n * shared to be as referentially stable as possible.\n */\n combine?: (result: SuspenseQueriesResults<T>) => TCombinedResult\n },\n queryClient?: QueryClient,\n): TCombinedResult\n\nexport function useSuspenseQueries(options: any, queryClient?: QueryClient) {\n return useQueries(\n {\n ...options,\n queries: options.queries.map((query: any) => {\n if (process.env.NODE_ENV !== 'production') {\n if (query.queryFn === skipToken) {\n console.error('skipToken is not allowed for useSuspenseQueries')\n }\n }\n\n return {\n ...query,\n suspense: true,\n throwOnError: defaultThrowOnError,\n enabled: true,\n placeholderData: undefined,\n }\n }),\n },\n queryClient,\n )\n}\n"],"mappings":";;;;AA8lBA,SAAgB,mBAAmB,SAAc,aAA2B;CAC1E,OAAO,WACL;EACE,GAAG;EACH,SAAS,QAAQ,QAAQ,KAAK,UAAe;GAC3C,IAAI,QAAQ,IAAI,aAAa,cACvB;QAAA,MAAM,YAAY,WACpB,QAAQ,MAAM,iDAAiD;GAAA;GAInE,OAAO;IACL,GAAG;IACH,UAAU;IACV,cAAc;IACd,SAAS;IACT,iBAAiB,KAAA;GACnB;EACF,CAAC;CACH,GACA,WACF;AACF"}
package/build/legacy/useSuspenseQuery.cjs CHANGED
@@ -20,9 +20,14 @@ let _tanstack_query_core = require("@tanstack/query-core");
20
20
  * is missing, and `status` is either `success` or `error` (with the derived flags set accordingly).
21
21
  *
22
22
  * @example
23
+ * The query error is thrown if the fetch fails and no cached data exists yet, so an error boundary is
24
+ * required around `<Suspense>`. A failed background refetch instead continues to render the cached data.
25
+ * Use {@link QueryErrorResetBoundary} to let the user retry after such an error:
23
26
  * ```tsx
24
27
  * import { Suspense } from 'preact/compat'
25
- * import { useSuspenseQuery } from '@tanstack/preact-query'
28
+ * import { useErrorBoundary } from 'preact/hooks'
29
+ * import { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/preact-query'
30
+ * import type { ComponentChildren } from 'preact'
26
31
  *
27
32
  * function Posts() {
28
33
  * // `data` is guaranteed to be defined here — no `isPending` check needed.
@@ -33,21 +38,56 @@ let _tanstack_query_core = require("@tanstack/query-core");
33
38
  *
34
39
  * return (
35
40
  * <div>
36
- * <h1>Posts {isFetching ? <Spinner /> : null}</h1>
37
- * {data.map((post) => (
38
- * <p key={post.id}>{post.title}</p>
39
- * ))}
41
+ * <h1>Posts {isFetching ? '(refreshing...)' : null}</h1>
42
+ * <ul>
43
+ * {data.map((post) => (
44
+ * <li key={post.id}>{post.title}</li>
45
+ * ))}
46
+ * </ul>
40
47
  * </div>
41
48
  * )
42
49
  * }
43
50
  *
44
51
  * function App() {
45
52
  * return (
46
- * <Suspense fallback={<h1>Loading posts...</h1>}>
47
- * <Posts />
48
- * </Suspense>
53
+ * <QueryErrorResetBoundary>
54
+ * {({ reset }) => (
55
+ * <ErrorBoundary
56
+ * onReset={reset}
57
+ * fallbackRender={({ resetErrorBoundary }) => (
58
+ * <div>
59
+ * There was an error!
60
+ * <button onClick={() => resetErrorBoundary()}>Try again</button>
61
+ * </div>
62
+ * )}
63
+ * >
64
+ * <Suspense fallback={<h1>Loading posts...</h1>}>
65
+ * <Posts />
66
+ * </Suspense>
67
+ * </ErrorBoundary>
68
+ * )}
69
+ * </QueryErrorResetBoundary>
49
70
  * )
50
71
  * }
72
+ *
73
+ * function ErrorBoundary({
74
+ * children,
75
+ * onReset,
76
+ * fallbackRender,
77
+ * }: {
78
+ * children: ComponentChildren
79
+ * onReset: () => void
80
+ * fallbackRender: (props: {
81
+ * error: Error
82
+ * resetErrorBoundary: () => void
83
+ * }) => ComponentChildren
84
+ * }) {
85
+ * const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())
86
+ *
87
+ * if (error) return fallbackRender({ error, resetErrorBoundary })
88
+ *
89
+ * return children
90
+ * }
51
91
  * ```
52
92
  */
53
93
  function useSuspenseQuery(options, queryClient) {
package/build/legacy/useSuspenseQuery.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useSuspenseQuery.cjs","names":["skipToken","useBaseQuery","defaultThrowOnError","QueryObserver"],"sources":["../../src/useSuspenseQuery.ts"],"sourcesContent":["import { QueryObserver, skipToken } from '@tanstack/query-core'\nimport type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * The options for `useSuspenseQuery` are the same as for `useQuery`, except for `throwOnError`, `enabled`, and\n * `placeholderData`.\n *\n * Caveat: cancellation does not work.\n *\n * @remarks Multiple `useSuspenseQuery` calls in the same component suspend serially, causing a request\n * waterfall — each one blocks rendering until it resolves, so the next doesn't even start fetching until then.\n * Use {@link useSuspenseQueries} instead when you have more than one suspenseful query in a component, so they\n * fetch in parallel.\n * @param options - The {@link UseSuspenseQueryOptions} to use — the same options as `useQuery`, minus the ones listed above.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The same object as `useQuery`, except that `data` is guaranteed to be defined, `isPlaceholderData`\n * is missing, and `status` is either `success` or `error` (with the derived flags set accordingly).\n *\n * @example\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQuery } from '@tanstack/preact-query'\n *\n * function Posts() {\n * // `data` is guaranteed to be defined here — no `isPending` check needed.\n * const { data, isFetching } = useSuspenseQuery({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * })\n *\n * return (\n * <div>\n * <h1>Posts {isFetching ? <Spinner /> : null}</h1>\n * {data.map((post) => (\n * <p key={post.id}>{post.title}</p>\n * ))}\n * </div>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading posts...</h1>}>\n * <Posts />\n * </Suspense>\n * )\n * }\n * ```\n */\nexport function useSuspenseQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,\n queryClient?: QueryClient,\n): UseSuspenseQueryResult<TData, TError> {\n if (process.env.NODE_ENV !== 'production') {\n if ((options.queryFn as any) === skipToken) {\n console.error('skipToken is not allowed for useSuspenseQuery')\n }\n }\n\n return useBaseQuery(\n {\n ...options,\n enabled: true,\n suspense: true,\n throwOnError: defaultThrowOnError,\n placeholderData: undefined,\n },\n QueryObserver,\n queryClient,\n ) as UseSuspenseQueryResult<TData, TError>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,SAAgB,iBAMd,SACA,aACuC;CACvC,IAAI,QAAQ,IAAI,aAAa,cACtB;MAAA,QAAQ,YAAoBA,qBAAAA,WAC/B,QAAQ,MAAM,+CAA+C;CAAA;CAIjE,OAAOC,qBAAAA,aACL;EACE,GAAG;EACH,SAAS;EACT,UAAU;EACV,cAAcC,iBAAAA;EACd,iBAAiB,KAAA;CACnB,GACAC,qBAAAA,eACA,WACF;AACF"}
1
+ {"version":3,"file":"useSuspenseQuery.cjs","names":["skipToken","useBaseQuery","defaultThrowOnError","QueryObserver"],"sources":["../../src/useSuspenseQuery.ts"],"sourcesContent":["import { QueryObserver, skipToken } from '@tanstack/query-core'\nimport type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * The options for `useSuspenseQuery` are the same as for `useQuery`, except for `throwOnError`, `enabled`, and\n * `placeholderData`.\n *\n * Caveat: cancellation does not work.\n *\n * @remarks Multiple `useSuspenseQuery` calls in the same component suspend serially, causing a request\n * waterfall — each one blocks rendering until it resolves, so the next doesn't even start fetching until then.\n * Use {@link useSuspenseQueries} instead when you have more than one suspenseful query in a component, so they\n * fetch in parallel.\n * @param options - The {@link UseSuspenseQueryOptions} to use — the same options as `useQuery`, minus the ones listed above.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The same object as `useQuery`, except that `data` is guaranteed to be defined, `isPlaceholderData`\n * is missing, and `status` is either `success` or `error` (with the derived flags set accordingly).\n *\n * @example\n * The query error is thrown if the fetch fails and no cached data exists yet, so an error boundary is\n * required around `<Suspense>`. A failed background refetch instead continues to render the cached data.\n * Use {@link QueryErrorResetBoundary} to let the user retry after such an error:\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useErrorBoundary } from 'preact/hooks'\n * import { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/preact-query'\n * import type { ComponentChildren } from 'preact'\n *\n * function Posts() {\n * // `data` is guaranteed to be defined here — no `isPending` check needed.\n * const { data, isFetching } = useSuspenseQuery({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * })\n *\n * return (\n * <div>\n * <h1>Posts {isFetching ? '(refreshing...)' : null}</h1>\n * <ul>\n * {data.map((post) => (\n * <li key={post.id}>{post.title}</li>\n * ))}\n * </ul>\n * </div>\n * )\n * }\n *\n * function App() {\n * return (\n * <QueryErrorResetBoundary>\n * {({ reset }) => (\n * <ErrorBoundary\n * onReset={reset}\n * fallbackRender={({ resetErrorBoundary }) => (\n * <div>\n * There was an error!\n * <button onClick={() => resetErrorBoundary()}>Try again</button>\n * </div>\n * )}\n * >\n * <Suspense fallback={<h1>Loading posts...</h1>}>\n * <Posts />\n * </Suspense>\n * </ErrorBoundary>\n * )}\n * </QueryErrorResetBoundary>\n * )\n * }\n *\n * function ErrorBoundary({\n * children,\n * onReset,\n * fallbackRender,\n * }: {\n * children: ComponentChildren\n * onReset: () => void\n * fallbackRender: (props: {\n * error: Error\n * resetErrorBoundary: () => void\n * }) => ComponentChildren\n * }) {\n * const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())\n *\n * if (error) return fallbackRender({ error, resetErrorBoundary })\n *\n * return children\n * }\n * ```\n */\nexport function useSuspenseQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,\n queryClient?: QueryClient,\n): UseSuspenseQueryResult<TData, TError> {\n if (process.env.NODE_ENV !== 'production') {\n if ((options.queryFn as any) === skipToken) {\n console.error('skipToken is not allowed for useSuspenseQuery')\n }\n }\n\n return useBaseQuery(\n {\n ...options,\n enabled: true,\n suspense: true,\n throwOnError: defaultThrowOnError,\n placeholderData: undefined,\n },\n QueryObserver,\n queryClient,\n ) as UseSuspenseQueryResult<TData, TError>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,SAAgB,iBAMd,SACA,aACuC;CACvC,IAAI,QAAQ,IAAI,aAAa,cACtB;MAAA,QAAQ,YAAoBA,qBAAAA,WAC/B,QAAQ,MAAM,+CAA+C;CAAA;CAIjE,OAAOC,qBAAAA,aACL;EACE,GAAG;EACH,SAAS;EACT,UAAU;EACV,cAAcC,iBAAAA;EACd,iBAAiB,KAAA;CACnB,GACAC,qBAAAA,eACA,WACF;AACF"}
package/build/legacy/useSuspenseQuery.d.cts CHANGED
@@ -18,9 +18,14 @@ import { DefaultError, QueryClient, QueryKey } from "@tanstack/query-core";
18
18
  * is missing, and `status` is either `success` or `error` (with the derived flags set accordingly).
19
19
  *
20
20
  * @example
21
+ * The query error is thrown if the fetch fails and no cached data exists yet, so an error boundary is
22
+ * required around `<Suspense>`. A failed background refetch instead continues to render the cached data.
23
+ * Use {@link QueryErrorResetBoundary} to let the user retry after such an error:
21
24
  * ```tsx
22
25
  * import { Suspense } from 'preact/compat'
23
- * import { useSuspenseQuery } from '@tanstack/preact-query'
26
+ * import { useErrorBoundary } from 'preact/hooks'
27
+ * import { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/preact-query'
28
+ * import type { ComponentChildren } from 'preact'
24
29
  *
25
30
  * function Posts() {
26
31
  * // `data` is guaranteed to be defined here — no `isPending` check needed.
@@ -31,21 +36,56 @@ import { DefaultError, QueryClient, QueryKey } from "@tanstack/query-core";
31
36
  *
32
37
  * return (
33
38
  * <div>
34
- * <h1>Posts {isFetching ? <Spinner /> : null}</h1>
35
- * {data.map((post) => (
36
- * <p key={post.id}>{post.title}</p>
37
- * ))}
39
+ * <h1>Posts {isFetching ? '(refreshing...)' : null}</h1>
40
+ * <ul>
41
+ * {data.map((post) => (
42
+ * <li key={post.id}>{post.title}</li>
43
+ * ))}
44
+ * </ul>
38
45
  * </div>
39
46
  * )
40
47
  * }
41
48
  *
42
49
  * function App() {
43
50
  * return (
44
- * <Suspense fallback={<h1>Loading posts...</h1>}>
45
- * <Posts />
46
- * </Suspense>
51
+ * <QueryErrorResetBoundary>
52
+ * {({ reset }) => (
53
+ * <ErrorBoundary
54
+ * onReset={reset}
55
+ * fallbackRender={({ resetErrorBoundary }) => (
56
+ * <div>
57
+ * There was an error!
58
+ * <button onClick={() => resetErrorBoundary()}>Try again</button>
59
+ * </div>
60
+ * )}
61
+ * >
62
+ * <Suspense fallback={<h1>Loading posts...</h1>}>
63
+ * <Posts />
64
+ * </Suspense>
65
+ * </ErrorBoundary>
66
+ * )}
67
+ * </QueryErrorResetBoundary>
47
68
  * )
48
69
  * }
70
+ *
71
+ * function ErrorBoundary({
72
+ * children,
73
+ * onReset,
74
+ * fallbackRender,
75
+ * }: {
76
+ * children: ComponentChildren
77
+ * onReset: () => void
78
+ * fallbackRender: (props: {
79
+ * error: Error
80
+ * resetErrorBoundary: () => void
81
+ * }) => ComponentChildren
82
+ * }) {
83
+ * const [error, resetErrorBoundary] = useErrorBoundary(() => onReset())
84
+ *
85
+ * if (error) return fallbackRender({ error, resetErrorBoundary })
86
+ *
87
+ * return children
88
+ * }
49
89
  * ```
50
90
  */
51
91
  declare function useSuspenseQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): UseSuspenseQueryResult<TData, TError>;
package/build/legacy/useSuspenseQuery.d.cts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useSuspenseQuery.d.cts","names":[],"sources":["../../src/useSuspenseQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAsDgB,iBACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,wBAAwB,cAAc,QAAQ,OAAO,YAC9D,cAAc,cACb,uBAAuB,OAAO"}
1
+ {"version":3,"file":"useSuspenseQuery.d.cts","names":[],"sources":["../../src/useSuspenseQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8FgB,iBACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,wBAAwB,cAAc,QAAQ,OAAO,YAC9D,cAAc,cACb,uBAAuB,OAAO"}