@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.
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
@@ -32,7 +32,9 @@ type UndefinedInitialDataOptions<TQueryFnData = unknown, TError = DefaultError,
32
32
  type UnusedSkipTokenOptions<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey> = OmitKeyof<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryFn'> & {
33
33
  /**
34
34
  * `skipToken` is not allowed as a value here — this overload is selected when no `initialData` is set. If
35
- * you don't intend to run the query yet, omit `queryFn` or use a default query function instead.
35
+ * you don't intend to run the query yet, set `enabled: false` — omitting `queryFn` alone still triggers a
36
+ * fetch that fails with "Missing queryFn" unless `enabled` is `false` or a default query function has been
37
+ * defined. A default query function only supplies `queryFn`; it doesn't defer the fetch on its own.
36
38
  */
37
39
  queryFn?: Exclude<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>['queryFn'], SkipToken | undefined>;
38
40
  };
@@ -69,6 +71,7 @@ type DefinedInitialDataOptions<TQueryFnData = unknown, TError = DefaultError, TD
69
71
  * This overload is selected when `initialData` is set, so the resulting `data` is never `undefined`.
70
72
  *
71
73
  * @see {@link useQuery} to run a query with these options.
74
+ * @see [The Query Options API](https://tkdodo.eu/blog/the-query-options-api) for more on this pattern.
72
75
  * @param options - The {@link DefinedInitialDataOptions} to use — everything you can pass to `useQuery`, with `initialData` set.
73
76
  * @returns The same options object, typed so that `queryKey` carries the inferred data type.
74
77
  *
@@ -83,9 +86,18 @@ type DefinedInitialDataOptions<TQueryFnData = unknown, TError = DefaultError, TD
83
86
  * })
84
87
  *
85
88
  * function Posts() {
86
- * // `data` is `Post[]`, never `undefined`, thanks to `initialData`.
87
- * const { data } = useQuery(postsOptions)
88
- * return <>{data.map((post) => <p key={post.id}>{post.title}</p>)}</>
89
+ * // `data` is `Post[]`, never `undefined`, thanks to `initialData` — even if a refetch fails,
90
+ * // so the list stays visible alongside the error.
91
+ * const { data, isError, error } = useQuery(postsOptions)
92
+ *
93
+ * return (
94
+ * <div>
95
+ * {isError ? <span>Error: {error.message}</span> : null}
96
+ * <ul>
97
+ * {data.map((post) => <li key={post.id}>{post.title}</li>)}
98
+ * </ul>
99
+ * </div>
100
+ * )
89
101
  * }
90
102
  * ```
91
103
  */
@@ -96,23 +108,14 @@ declare function queryOptions<TQueryFnData = unknown, TError = DefaultError, TDa
96
108
  * is the query key to generate options for.
97
109
  *
98
110
  * @see {@link useQuery} to run a query with these options.
111
+ * @see [The Query Options API](https://tkdodo.eu/blog/the-query-options-api) for more on this pattern.
99
112
  * @param options - The {@link UnusedSkipTokenOptions} to use — everything you can pass to `useQuery`.
100
113
  * @returns The same options object, typed so that `queryKey` carries the inferred data type.
101
114
  *
102
115
  * @example
116
+ * A parameterized factory, so the same options object can be reused per `id`:
103
117
  * ```tsx
104
- * import { queryOptions } from '@tanstack/preact-query'
105
- *
106
- * export const postsOptions = queryOptions({
107
- * queryKey: ['posts'],
108
- * queryFn: fetchPosts,
109
- * })
110
- * ```
111
- *
112
- * @example
113
- * A parameterized factory, reused across a hook and an imperative call with the same cache entry:
114
- * ```tsx
115
- * import { noop, queryOptions, useQuery } from '@tanstack/preact-query'
118
+ * import { queryOptions, useQuery } from '@tanstack/preact-query'
116
119
  *
117
120
  * export const postOptions = (id: string) =>
118
121
  * queryOptions({
@@ -121,33 +124,13 @@ declare function queryOptions<TQueryFnData = unknown, TError = DefaultError, TDa
121
124
  * })
122
125
  *
123
126
  * function Post({ id }: { id: string }) {
124
- * const { data } = useQuery(postOptions(id))
125
- * return <h1>{data?.title}</h1>
126
- * }
127
+ * const { data, isPending, isError, error } = useQuery(postOptions(id))
127
128
  *
128
- * // Elsewhere, e.g. to warm the cache before rendering `<Post>`:
129
- * queryClient.query(postOptions(id)).catch(noop)
130
- * ```
131
- *
132
- * @example
133
- * The same options object works with every API that accepts query options:
134
- * ```tsx
135
- * import {
136
- * noop,
137
- * queryOptions,
138
- * useQuery,
139
- * useSuspenseQuery,
140
- * } from '@tanstack/preact-query'
141
- *
142
- * const todosOptions = queryOptions({
143
- * queryKey: ['todos'],
144
- * queryFn: fetchTodos,
145
- * })
129
+ * if (isPending) return 'Loading...'
130
+ * if (isError) return <span>Error: {error.message}</span>
146
131
  *
147
- * useQuery(todosOptions)
148
- * useSuspenseQuery(todosOptions)
149
- * queryClient.query(todosOptions).catch(noop)
150
- * queryClient.getQueryData(todosOptions.queryKey) // typed as Array<Todo> | undefined
132
+ * return <h1>{data.title}</h1>
133
+ * }
151
134
  * ```
152
135
  */
153
136
  declare function queryOptions<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey>): UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey> & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;
@@ -157,23 +140,15 @@ declare function queryOptions<TQueryFnData = unknown, TError = DefaultError, TDa
157
140
  * is the query key to generate options for.
158
141
  *
159
142
  * @see {@link useQuery} to run a query with these options.
143
+ * @see [The Query Options API](https://tkdodo.eu/blog/the-query-options-api) for more on this pattern.
160
144
  * @param options - The {@link UndefinedInitialDataOptions} to use — everything you can pass to `useQuery`.
161
145
  * @returns The same options object, typed so that `queryKey` carries the inferred data type.
146
+ * @remarks This is the only overload that accepts `queryFn: skipToken`, shown below.
162
147
  *
163
148
  * @example
149
+ * A parameterized factory, so the same options object can be reused per `id`:
164
150
  * ```tsx
165
- * import { queryOptions } from '@tanstack/preact-query'
166
- *
167
- * export const postsOptions = queryOptions({
168
- * queryKey: ['posts'],
169
- * queryFn: fetchPosts,
170
- * })
171
- * ```
172
- *
173
- * @example
174
- * A parameterized factory, reused across a hook and an imperative call with the same cache entry:
175
- * ```tsx
176
- * import { noop, queryOptions, useQuery } from '@tanstack/preact-query'
151
+ * import { queryOptions, useQuery } from '@tanstack/preact-query'
177
152
  *
178
153
  * export const postOptions = (id: string) =>
179
154
  * queryOptions({
@@ -182,33 +157,35 @@ declare function queryOptions<TQueryFnData = unknown, TError = DefaultError, TDa
182
157
  * })
183
158
  *
184
159
  * function Post({ id }: { id: string }) {
185
- * const { data } = useQuery(postOptions(id))
186
- * return <h1>{data?.title}</h1>
187
- * }
160
+ * const { data, isPending, isError, error } = useQuery(postOptions(id))
188
161
  *
189
- * // Elsewhere, e.g. to warm the cache before rendering `<Post>`:
190
- * queryClient.query(postOptions(id)).catch(noop)
162
+ * if (isPending) return 'Loading...'
163
+ * if (isError) return <span>Error: {error.message}</span>
164
+ *
165
+ * return <h1>{data.title}</h1>
166
+ * }
191
167
  * ```
192
168
  *
193
169
  * @example
194
- * The same options object works with every API that accepts query options:
170
+ * A factory that disables the query, type safe, until `postId` is set:
195
171
  * ```tsx
196
- * import {
197
- * noop,
198
- * queryOptions,
199
- * useQuery,
200
- * useSuspenseQuery,
201
- * } from '@tanstack/preact-query'
202
- *
203
- * const todosOptions = queryOptions({
204
- * queryKey: ['todos'],
205
- * queryFn: fetchTodos,
206
- * })
172
+ * import { queryOptions, skipToken, useQuery } from '@tanstack/preact-query'
173
+ *
174
+ * export const postOptions = (postId: number | undefined) =>
175
+ * queryOptions({
176
+ * queryKey: ['post', postId],
177
+ * queryFn: postId != null ? () => fetchPost(postId) : skipToken,
178
+ * })
179
+ *
180
+ * function Post({ postId }: { postId: number | undefined }) {
181
+ * const { data, isLoading, isError, error } = useQuery(postOptions(postId))
182
+ *
183
+ * if (postId == null) return 'Select a post'
184
+ * if (isLoading) return 'Loading...'
185
+ * if (isError) return <span>Error: {error.message}</span>
207
186
  *
208
- * useQuery(todosOptions)
209
- * useSuspenseQuery(todosOptions)
210
- * queryClient.query(todosOptions).catch(noop)
211
- * queryClient.getQueryData(todosOptions.queryKey) // typed as Array<Todo> | undefined
187
+ * return <h1>{data?.title}</h1>
188
+ * }
212
189
  * ```
213
190
  */
214
191
  declare function queryOptions<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>): UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;
@@ -1 +1 @@
1
- {"version":3,"file":"queryOptions.d.ts","names":[],"sources":["../../src/queryOptions.ts"],"mappings":";;;;;;;;;;;;KAsBY,4BACV,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,YAC3B,gBAAgB,cAAc,QAAQ,OAAO;;;;;;;;EAQ/C,0BAEI,oBAAoB,kBAAkB,iBACtC,kBAAkB;;;;;;;;;;;KAYZ,uBACV,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,YAC3B,UACF,gBAAgB,cAAc,QAAQ,OAAO;;;;;EAO7C,UAAU,QACR,gBAAgB,cAAc,QAAQ,OAAO,uBAC7C;;;;;;;;;;;KAaQ,0BACV,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,YAC3B,KAAK,gBAAgB,cAAc,QAAQ,OAAO;;;;;;;;EAQpD,aACI,kBAAkB,uBACX,kBAAkB;;;;;;EAM7B,UAAU,cAAc,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+BxB,aACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,0BAA0B,cAAc,QAAQ,OAAO,aAC/D,0BAA0B,cAAc,QAAQ,OAAO,aACxD,oBAAoB,WAAW,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8D/B,aACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,uBAAuB,cAAc,QAAQ,OAAO,aAC5D,uBAAuB,cAAc,QAAQ,OAAO,aACrD,oBAAoB,WAAW,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8D/B,aACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,4BAA4B,cAAc,QAAQ,OAAO,aACjE,4BAA4B,cAAc,QAAQ,OAAO,aAC1D,oBAAoB,WAAW,cAAc"}
1
+ {"version":3,"file":"queryOptions.d.ts","names":[],"sources":["../../src/queryOptions.ts"],"mappings":";;;;;;;;;;;;KAsBY,4BACV,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,YAC3B,gBAAgB,cAAc,QAAQ,OAAO;;;;;;;;EAQ/C,0BAEI,oBAAoB,kBAAkB,iBACtC,kBAAkB;;;;;;;;;;;KAYZ,uBACV,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,YAC3B,UACF,gBAAgB,cAAc,QAAQ,OAAO;;;;;;;EAS7C,UAAU,QACR,gBAAgB,cAAc,QAAQ,OAAO,uBAC7C;;;;;;;;;;;KAaQ,0BACV,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,YAC3B,KAAK,gBAAgB,cAAc,QAAQ,OAAO;;;;;;;;EAQpD,aACI,kBAAkB,uBACX,kBAAkB;;;;;;EAM7B,UAAU,cAAc,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyCxB,aACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,0BAA0B,cAAc,QAAQ,OAAO,aAC/D,0BAA0B,cAAc,QAAQ,OAAO,aACxD,oBAAoB,WAAW,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiC/B,aACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,uBAAuB,cAAc,QAAQ,OAAO,aAC5D,uBAAuB,cAAc,QAAQ,OAAO,aACrD,oBAAoB,WAAW,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAwD/B,aACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,4BAA4B,cAAc,QAAQ,OAAO,aACjE,4BAA4B,cAAc,QAAQ,OAAO,aAC1D,oBAAoB,WAAW,cAAc"}
@@ -1 +1 @@
1
- {"version":3,"file":"queryOptions.js","names":[],"sources":["../../src/queryOptions.ts"],"sourcesContent":["import type {\n DefaultError,\n InitialDataFunction,\n NonUndefinedGuard,\n OmitKeyof,\n QueryFunction,\n QueryKey,\n QueryKeyWithDataTag,\n SkipToken,\n} from '@tanstack/query-core'\n\nimport type { UseQueryOptions } from './types'\n\n/**\n * The options accepted by the `queryOptions` overload selected when no `initialData` is set — `data` may be\n * `undefined` while the query is `pending`.\n *\n * @template TQueryFnData - The type your `queryFn` resolves to.\n * @template TError - The type of errors your `queryFn` may throw.\n * @template TData - The type `data` ends up as after `select` runs.\n * @template TQueryKey - The type of your `queryKey`.\n */\nexport type UndefinedInitialDataOptions<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n> = UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {\n /**\n * If set, this value will be used as the initial data for the query cache (as long as the query hasn't been\n * created or cached yet). If set to a function, the function will be called **once** during the shared/root\n * query initialization, and be expected to synchronously return the initial data. Initial data is\n * considered stale by default unless a `staleTime` has been set. `initialData` **is persisted** to the\n * cache.\n */\n initialData?:\n | undefined\n | InitialDataFunction<NonUndefinedGuard<TQueryFnData>>\n | NonUndefinedGuard<TQueryFnData>\n}\n\n/**\n * The options accepted by the `queryOptions` overload selected when no `initialData` is set and `queryFn` is\n * not `skipToken` — same as {@link UndefinedInitialDataOptions}, but `queryFn` may not be `skipToken`.\n *\n * @template TQueryFnData - The type your `queryFn` resolves to.\n * @template TError - The type of errors your `queryFn` may throw.\n * @template TData - The type `data` ends up as after `select` runs.\n * @template TQueryKey - The type of your `queryKey`.\n */\nexport type UnusedSkipTokenOptions<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n> = OmitKeyof<\n UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,\n 'queryFn'\n> & {\n /**\n * `skipToken` is not allowed as a value here — this overload is selected when no `initialData` is set. If\n * you don't intend to run the query yet, omit `queryFn` or use a default query function instead.\n */\n queryFn?: Exclude<\n UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>['queryFn'],\n SkipToken | undefined\n >\n}\n\n/**\n * The options accepted by the `queryOptions` overload selected when `initialData` is set — `data` is never\n * `undefined`.\n *\n * @template TQueryFnData - The type your `queryFn` resolves to.\n * @template TError - The type of errors your `queryFn` may throw.\n * @template TData - The type `data` ends up as after `select` runs.\n * @template TQueryKey - The type of your `queryKey`.\n */\nexport type DefinedInitialDataOptions<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n> = Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryFn'> & {\n /**\n * If set, this value will be used as the initial data for the query cache (as long as the query hasn't been\n * created or cached yet). If set to a function, the function will be called **once** during the shared/root\n * query initialization, and be expected to synchronously return the initial data. Initial data is\n * considered stale by default unless a `staleTime` has been set. `initialData` **is persisted** to the\n * cache.\n */\n initialData:\n | NonUndefinedGuard<TQueryFnData>\n | (() => NonUndefinedGuard<TQueryFnData>)\n /**\n * Optional here, but omitting it is only safe when no fetch will be attempted — for example with\n * `enabled: false`, or when a default query function has been defined. Otherwise, an enabled query with no\n * `queryFn` still tries to fetch and fails with a \"Missing queryFn\" error; `initialData` does not prevent this.\n */\n queryFn?: QueryFunction<TQueryFnData, TQueryKey>\n}\n\n/**\n * You can generally pass everything to `queryOptions` that you can also pass to `useQuery`. These options can\n * be shared across hooks and imperative APIs such as `queryClient.query`. `options.queryKey` is required and\n * is the query key to generate options for.\n *\n * This overload is selected when `initialData` is set, so the resulting `data` is never `undefined`.\n *\n * @see {@link useQuery} to run a query with these options.\n * @param options - The {@link DefinedInitialDataOptions} to use — everything you can pass to `useQuery`, with `initialData` set.\n * @returns The same options object, typed so that `queryKey` carries the inferred data type.\n *\n * @example\n * ```tsx\n * import { queryOptions, useQuery } from '@tanstack/preact-query'\n *\n * export const postsOptions = queryOptions({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * initialData: [],\n * })\n *\n * function Posts() {\n * // `data` is `Post[]`, never `undefined`, thanks to `initialData`.\n * const { data } = useQuery(postsOptions)\n * return <>{data.map((post) => <p key={post.id}>{post.title}</p>)}</>\n * }\n * ```\n */\nexport function queryOptions<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,\n): DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> &\n QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>\n\n/**\n * You can generally pass everything to `queryOptions` that you can also pass to `useQuery`. These options can\n * be shared across hooks and imperative APIs such as `queryClient.query`. `options.queryKey` is required and\n * is the query key to generate options for.\n *\n * @see {@link useQuery} to run a query with these options.\n * @param options - The {@link UnusedSkipTokenOptions} to use — everything you can pass to `useQuery`.\n * @returns The same options object, typed so that `queryKey` carries the inferred data type.\n *\n * @example\n * ```tsx\n * import { queryOptions } from '@tanstack/preact-query'\n *\n * export const postsOptions = queryOptions({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * })\n * ```\n *\n * @example\n * A parameterized factory, reused across a hook and an imperative call with the same cache entry:\n * ```tsx\n * import { noop, queryOptions, useQuery } from '@tanstack/preact-query'\n *\n * export const postOptions = (id: string) =>\n * queryOptions({\n * queryKey: ['post', id],\n * queryFn: () => fetchPost(id),\n * })\n *\n * function Post({ id }: { id: string }) {\n * const { data } = useQuery(postOptions(id))\n * return <h1>{data?.title}</h1>\n * }\n *\n * // Elsewhere, e.g. to warm the cache before rendering `<Post>`:\n * queryClient.query(postOptions(id)).catch(noop)\n * ```\n *\n * @example\n * The same options object works with every API that accepts query options:\n * ```tsx\n * import {\n * noop,\n * queryOptions,\n * useQuery,\n * useSuspenseQuery,\n * } from '@tanstack/preact-query'\n *\n * const todosOptions = queryOptions({\n * queryKey: ['todos'],\n * queryFn: fetchTodos,\n * })\n *\n * useQuery(todosOptions)\n * useSuspenseQuery(todosOptions)\n * queryClient.query(todosOptions).catch(noop)\n * queryClient.getQueryData(todosOptions.queryKey) // typed as Array<Todo> | undefined\n * ```\n */\nexport function queryOptions<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey>,\n): UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey> &\n QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>\n\n/**\n * You can generally pass everything to `queryOptions` that you can also pass to `useQuery`. These options can\n * be shared across hooks and imperative APIs such as `queryClient.query`. `options.queryKey` is required and\n * is the query key to generate options for.\n *\n * @see {@link useQuery} to run a query with these options.\n * @param options - The {@link UndefinedInitialDataOptions} to use — everything you can pass to `useQuery`.\n * @returns The same options object, typed so that `queryKey` carries the inferred data type.\n *\n * @example\n * ```tsx\n * import { queryOptions } from '@tanstack/preact-query'\n *\n * export const postsOptions = queryOptions({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * })\n * ```\n *\n * @example\n * A parameterized factory, reused across a hook and an imperative call with the same cache entry:\n * ```tsx\n * import { noop, queryOptions, useQuery } from '@tanstack/preact-query'\n *\n * export const postOptions = (id: string) =>\n * queryOptions({\n * queryKey: ['post', id],\n * queryFn: () => fetchPost(id),\n * })\n *\n * function Post({ id }: { id: string }) {\n * const { data } = useQuery(postOptions(id))\n * return <h1>{data?.title}</h1>\n * }\n *\n * // Elsewhere, e.g. to warm the cache before rendering `<Post>`:\n * queryClient.query(postOptions(id)).catch(noop)\n * ```\n *\n * @example\n * The same options object works with every API that accepts query options:\n * ```tsx\n * import {\n * noop,\n * queryOptions,\n * useQuery,\n * useSuspenseQuery,\n * } from '@tanstack/preact-query'\n *\n * const todosOptions = queryOptions({\n * queryKey: ['todos'],\n * queryFn: fetchTodos,\n * })\n *\n * useQuery(todosOptions)\n * useSuspenseQuery(todosOptions)\n * queryClient.query(todosOptions).catch(noop)\n * queryClient.getQueryData(todosOptions.queryKey) // typed as Array<Todo> | undefined\n * ```\n */\nexport function queryOptions<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,\n): UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> &\n QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>\n\nexport function queryOptions(options: unknown) {\n return options\n}\n"],"mappings":";AAwRA,SAAgB,aAAa,SAAkB;CAC7C,OAAO;AACT"}
1
+ {"version":3,"file":"queryOptions.js","names":[],"sources":["../../src/queryOptions.ts"],"sourcesContent":["import type {\n DefaultError,\n InitialDataFunction,\n NonUndefinedGuard,\n OmitKeyof,\n QueryFunction,\n QueryKey,\n QueryKeyWithDataTag,\n SkipToken,\n} from '@tanstack/query-core'\n\nimport type { UseQueryOptions } from './types'\n\n/**\n * The options accepted by the `queryOptions` overload selected when no `initialData` is set — `data` may be\n * `undefined` while the query is `pending`.\n *\n * @template TQueryFnData - The type your `queryFn` resolves to.\n * @template TError - The type of errors your `queryFn` may throw.\n * @template TData - The type `data` ends up as after `select` runs.\n * @template TQueryKey - The type of your `queryKey`.\n */\nexport type UndefinedInitialDataOptions<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n> = UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> & {\n /**\n * If set, this value will be used as the initial data for the query cache (as long as the query hasn't been\n * created or cached yet). If set to a function, the function will be called **once** during the shared/root\n * query initialization, and be expected to synchronously return the initial data. Initial data is\n * considered stale by default unless a `staleTime` has been set. `initialData` **is persisted** to the\n * cache.\n */\n initialData?:\n | undefined\n | InitialDataFunction<NonUndefinedGuard<TQueryFnData>>\n | NonUndefinedGuard<TQueryFnData>\n}\n\n/**\n * The options accepted by the `queryOptions` overload selected when no `initialData` is set and `queryFn` is\n * not `skipToken` — same as {@link UndefinedInitialDataOptions}, but `queryFn` may not be `skipToken`.\n *\n * @template TQueryFnData - The type your `queryFn` resolves to.\n * @template TError - The type of errors your `queryFn` may throw.\n * @template TData - The type `data` ends up as after `select` runs.\n * @template TQueryKey - The type of your `queryKey`.\n */\nexport type UnusedSkipTokenOptions<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n> = OmitKeyof<\n UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,\n 'queryFn'\n> & {\n /**\n * `skipToken` is not allowed as a value here — this overload is selected when no `initialData` is set. If\n * you don't intend to run the query yet, set `enabled: false` — omitting `queryFn` alone still triggers a\n * fetch that fails with \"Missing queryFn\" unless `enabled` is `false` or a default query function has been\n * defined. A default query function only supplies `queryFn`; it doesn't defer the fetch on its own.\n */\n queryFn?: Exclude<\n UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>['queryFn'],\n SkipToken | undefined\n >\n}\n\n/**\n * The options accepted by the `queryOptions` overload selected when `initialData` is set — `data` is never\n * `undefined`.\n *\n * @template TQueryFnData - The type your `queryFn` resolves to.\n * @template TError - The type of errors your `queryFn` may throw.\n * @template TData - The type `data` ends up as after `select` runs.\n * @template TQueryKey - The type of your `queryKey`.\n */\nexport type DefinedInitialDataOptions<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n> = Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryFn'> & {\n /**\n * If set, this value will be used as the initial data for the query cache (as long as the query hasn't been\n * created or cached yet). If set to a function, the function will be called **once** during the shared/root\n * query initialization, and be expected to synchronously return the initial data. Initial data is\n * considered stale by default unless a `staleTime` has been set. `initialData` **is persisted** to the\n * cache.\n */\n initialData:\n | NonUndefinedGuard<TQueryFnData>\n | (() => NonUndefinedGuard<TQueryFnData>)\n /**\n * Optional here, but omitting it is only safe when no fetch will be attempted — for example with\n * `enabled: false`, or when a default query function has been defined. Otherwise, an enabled query with no\n * `queryFn` still tries to fetch and fails with a \"Missing queryFn\" error; `initialData` does not prevent this.\n */\n queryFn?: QueryFunction<TQueryFnData, TQueryKey>\n}\n\n/**\n * You can generally pass everything to `queryOptions` that you can also pass to `useQuery`. These options can\n * be shared across hooks and imperative APIs such as `queryClient.query`. `options.queryKey` is required and\n * is the query key to generate options for.\n *\n * This overload is selected when `initialData` is set, so the resulting `data` is never `undefined`.\n *\n * @see {@link useQuery} to run a query with these options.\n * @see [The Query Options API](https://tkdodo.eu/blog/the-query-options-api) for more on this pattern.\n * @param options - The {@link DefinedInitialDataOptions} to use — everything you can pass to `useQuery`, with `initialData` set.\n * @returns The same options object, typed so that `queryKey` carries the inferred data type.\n *\n * @example\n * ```tsx\n * import { queryOptions, useQuery } from '@tanstack/preact-query'\n *\n * export const postsOptions = queryOptions({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * initialData: [],\n * })\n *\n * function Posts() {\n * // `data` is `Post[]`, never `undefined`, thanks to `initialData` — even if a refetch fails,\n * // so the list stays visible alongside the error.\n * const { data, isError, error } = useQuery(postsOptions)\n *\n * return (\n * <div>\n * {isError ? <span>Error: {error.message}</span> : null}\n * <ul>\n * {data.map((post) => <li key={post.id}>{post.title}</li>)}\n * </ul>\n * </div>\n * )\n * }\n * ```\n */\nexport function queryOptions<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,\n): DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> &\n QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>\n\n/**\n * You can generally pass everything to `queryOptions` that you can also pass to `useQuery`. These options can\n * be shared across hooks and imperative APIs such as `queryClient.query`. `options.queryKey` is required and\n * is the query key to generate options for.\n *\n * @see {@link useQuery} to run a query with these options.\n * @see [The Query Options API](https://tkdodo.eu/blog/the-query-options-api) for more on this pattern.\n * @param options - The {@link UnusedSkipTokenOptions} to use — everything you can pass to `useQuery`.\n * @returns The same options object, typed so that `queryKey` carries the inferred data type.\n *\n * @example\n * A parameterized factory, so the same options object can be reused per `id`:\n * ```tsx\n * import { queryOptions, useQuery } from '@tanstack/preact-query'\n *\n * export const postOptions = (id: string) =>\n * queryOptions({\n * queryKey: ['post', id],\n * queryFn: () => fetchPost(id),\n * })\n *\n * function Post({ id }: { id: string }) {\n * const { data, isPending, isError, error } = useQuery(postOptions(id))\n *\n * if (isPending) return 'Loading...'\n * if (isError) return <span>Error: {error.message}</span>\n *\n * return <h1>{data.title}</h1>\n * }\n * ```\n */\nexport function queryOptions<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey>,\n): UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey> &\n QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>\n\n/**\n * You can generally pass everything to `queryOptions` that you can also pass to `useQuery`. These options can\n * be shared across hooks and imperative APIs such as `queryClient.query`. `options.queryKey` is required and\n * is the query key to generate options for.\n *\n * @see {@link useQuery} to run a query with these options.\n * @see [The Query Options API](https://tkdodo.eu/blog/the-query-options-api) for more on this pattern.\n * @param options - The {@link UndefinedInitialDataOptions} to use — everything you can pass to `useQuery`.\n * @returns The same options object, typed so that `queryKey` carries the inferred data type.\n * @remarks This is the only overload that accepts `queryFn: skipToken`, shown below.\n *\n * @example\n * A parameterized factory, so the same options object can be reused per `id`:\n * ```tsx\n * import { queryOptions, useQuery } from '@tanstack/preact-query'\n *\n * export const postOptions = (id: string) =>\n * queryOptions({\n * queryKey: ['post', id],\n * queryFn: () => fetchPost(id),\n * })\n *\n * function Post({ id }: { id: string }) {\n * const { data, isPending, isError, error } = useQuery(postOptions(id))\n *\n * if (isPending) return 'Loading...'\n * if (isError) return <span>Error: {error.message}</span>\n *\n * return <h1>{data.title}</h1>\n * }\n * ```\n *\n * @example\n * A factory that disables the query, type safe, until `postId` is set:\n * ```tsx\n * import { queryOptions, skipToken, useQuery } from '@tanstack/preact-query'\n *\n * export const postOptions = (postId: number | undefined) =>\n * queryOptions({\n * queryKey: ['post', postId],\n * queryFn: postId != null ? () => fetchPost(postId) : skipToken,\n * })\n *\n * function Post({ postId }: { postId: number | undefined }) {\n * const { data, isLoading, isError, error } = useQuery(postOptions(postId))\n *\n * if (postId == null) return 'Select a post'\n * if (isLoading) return 'Loading...'\n * if (isError) return <span>Error: {error.message}</span>\n *\n * return <h1>{data?.title}</h1>\n * }\n * ```\n */\nexport function queryOptions<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,\n): UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey> &\n QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>\n\nexport function queryOptions(options: unknown) {\n return options\n}\n"],"mappings":";AAiQA,SAAgB,aAAa,SAAkB;CAC7C,OAAO;AACT"}
@@ -1 +1 @@
1
- {"version":3,"file":"useInfiniteQuery.cjs","names":["useBaseQuery","InfiniteQueryObserver"],"sources":["../../src/useInfiniteQuery.ts"],"sourcesContent":["import { InfiniteQueryObserver } from '@tanstack/query-core'\nimport type {\n DefaultError,\n InfiniteData,\n QueryClient,\n QueryKey,\n QueryObserver,\n} from '@tanstack/query-core'\n\nimport type {\n DefinedInitialDataInfiniteOptions,\n UndefinedInitialDataInfiniteOptions,\n} from './infiniteQueryOptions'\nimport type {\n DefinedUseInfiniteQueryResult,\n UseInfiniteQueryOptions,\n UseInfiniteQueryResult,\n} from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of `queryFn`,\n * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.\n *\n * This overload is selected when `initialData` is set.\n *\n * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default\n * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user\n * actions, or add conditions like `hasNextPage && !isFetching`.\n * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.\n * @param options - The {@link DefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`, with `initialData` set.\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 properties as `useQuery`, with the addition of `data.pages`, `data.pageParams`,\n * `fetchNextPage`, `fetchPreviousPage`, `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and\n * `isFetchingPreviousPage`.\n *\n * @example\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n * const { data } = useInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * initialData: { pages: [], pageParams: [] },\n * })\n *\n * return <>{data.pages.map((page) => page.projects.map((p) => <p key={p.id}>{p.name}</p>))}</>\n * }\n * ```\n */\nexport function useInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: DefinedInitialDataInfiniteOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n queryClient?: QueryClient,\n): DefinedUseInfiniteQueryResult<TData, TError>\n\n/**\n * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of `queryFn`,\n * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.\n *\n * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default\n * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user\n * actions, or add conditions like `hasNextPage && !isFetching`.\n * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.\n * @param options - The {@link UndefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`.\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 properties as `useQuery`, with the addition of `data.pages`, `data.pageParams`,\n * `fetchNextPage`, `fetchPreviousPage`, `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and\n * `isFetchingPreviousPage`.\n *\n * @example\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n * const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =\n * useInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * })\n *\n * return (\n * <button\n * onClick={() => fetchNextPage()}\n * disabled={!hasNextPage || isFetching}\n * >\n * {isFetchingNextPage\n * ? 'Loading more...'\n * : hasNextPage\n * ? 'Load More'\n * : 'Nothing more to load'}\n * </button>\n * )\n * }\n * ```\n */\nexport function useInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: UndefinedInitialDataInfiniteOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n queryClient?: QueryClient,\n): UseInfiniteQueryResult<TData, TError>\n\n/**\n * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of `queryFn`,\n * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.\n *\n * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default\n * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user\n * actions, or add conditions like `hasNextPage && !isFetching`.\n * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.\n * @param options - The {@link UseInfiniteQueryOptions} to use — everything you can pass to `useInfiniteQuery`.\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 properties as `useQuery`, with the addition of `data.pages`, `data.pageParams`,\n * `fetchNextPage`, `fetchPreviousPage`, `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and\n * `isFetchingPreviousPage`.\n *\n * @example\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n * const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =\n * useInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * })\n *\n * return (\n * <button\n * onClick={() => fetchNextPage()}\n * disabled={!hasNextPage || isFetching}\n * >\n * {isFetchingNextPage\n * ? 'Loading more...'\n * : hasNextPage\n * ? 'Load More'\n * : 'Nothing more to load'}\n * </button>\n * )\n * }\n * ```\n */\nexport function useInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: UseInfiniteQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n queryClient?: QueryClient,\n): UseInfiniteQueryResult<TData, TError>\n\nexport function useInfiniteQuery(\n options: UseInfiniteQueryOptions,\n queryClient?: QueryClient,\n) {\n return useBaseQuery(\n options,\n InfiniteQueryObserver as typeof QueryObserver,\n queryClient,\n )\n}\n"],"mappings":";;;;AA+LA,SAAgB,iBACd,SACA,aACA;CACA,OAAOA,qBAAAA,aACL,SACAC,qBAAAA,uBACA,WACF;AACF"}
1
+ {"version":3,"file":"useInfiniteQuery.cjs","names":["useBaseQuery","InfiniteQueryObserver"],"sources":["../../src/useInfiniteQuery.ts"],"sourcesContent":["import { InfiniteQueryObserver } from '@tanstack/query-core'\nimport type {\n DefaultError,\n InfiniteData,\n QueryClient,\n QueryKey,\n QueryObserver,\n} from '@tanstack/query-core'\n\nimport type {\n DefinedInitialDataInfiniteOptions,\n UndefinedInitialDataInfiniteOptions,\n} from './infiniteQueryOptions'\nimport type {\n DefinedUseInfiniteQueryResult,\n UseInfiniteQueryOptions,\n UseInfiniteQueryResult,\n} from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of\n * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.\n *\n * This overload is selected when `initialData` is set.\n *\n * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default\n * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user\n * actions, or add conditions like `hasNextPage && !isFetching`.\n * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.\n * @param options - The {@link DefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`, with `initialData` set.\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 properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,\n * `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and\n * `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default\n * `InfiniteData<TQueryFnData>` shape.\n *\n * @example\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n * // `data` is never `undefined`, thanks to `initialData` — even if a refetch fails, so the\n * // list stays visible alongside the error.\n * const { data, isError, error } = useInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * initialData: { pages: [], pageParams: [] },\n * })\n *\n * return (\n * <div>\n * {isError ? <span>Error: {error.message}</span> : null}\n * <ul>\n * {data.pages.map((page) => page.projects.map((p) => <li key={p.id}>{p.name}</li>))}\n * </ul>\n * </div>\n * )\n * }\n * ```\n */\nexport function useInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: DefinedInitialDataInfiniteOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n queryClient?: QueryClient,\n): DefinedUseInfiniteQueryResult<TData, TError>\n\n/**\n * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of\n * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.\n *\n * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default\n * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user\n * actions, or add conditions like `hasNextPage && !isFetching`.\n * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.\n * @param options - The {@link UndefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`.\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 properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,\n * `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and\n * `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default\n * `InfiniteData<TQueryFnData>` shape.\n *\n * @example\n * Fetching the next page from a \"Load More\" button click:\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n * const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =\n * useInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * })\n *\n * if (isPending) return 'Loading...'\n * if (isError) return <span>Error: {error.message}</span>\n *\n * return (\n * <>\n * <ul>\n * {data.pages.map((page) =>\n * page.projects.map((project) => <li key={project.id}>{project.name}</li>),\n * )}\n * </ul>\n * <button\n * onClick={() => fetchNextPage()}\n * disabled={!hasNextPage || isFetching}\n * >\n * {isFetchingNextPage\n * ? 'Loading more...'\n * : hasNextPage\n * ? 'Load More'\n * : 'Nothing more to load'}\n * </button>\n * </>\n * )\n * }\n * ```\n *\n * @example\n * Fetching the next page automatically as the user scrolls, using an `IntersectionObserver` on a\n * sentinel element after the list:\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/preact-query'\n * import { useEffect, useRef } from 'preact/hooks'\n *\n * function Projects() {\n * const {\n * data,\n * isPending,\n * isError,\n * error,\n * fetchNextPage,\n * hasNextPage,\n * isFetching,\n * isFetchingNextPage,\n * } = useInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * })\n *\n * const sentinelRef = useRef<HTMLDivElement>(null)\n *\n * useEffect(() => {\n * const sentinel = sentinelRef.current\n * if (sentinel == null || !hasNextPage || isFetching) return\n *\n * const observer = new IntersectionObserver(([entry]) => {\n * if (entry?.isIntersecting) fetchNextPage()\n * })\n * observer.observe(sentinel)\n *\n * return () => observer.disconnect()\n * }, [hasNextPage, isFetching, fetchNextPage])\n *\n * if (isPending) return 'Loading...'\n * if (isError) return <span>Error: {error.message}</span>\n *\n * return (\n * <>\n * <ul>\n * {data.pages.map((page) =>\n * page.projects.map((project) => <li key={project.id}>{project.name}</li>),\n * )}\n * </ul>\n * <div ref={sentinelRef}>{isFetchingNextPage ? 'Loading more...' : null}</div>\n * </>\n * )\n * }\n * ```\n */\nexport function useInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: UndefinedInitialDataInfiniteOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n queryClient?: QueryClient,\n): UseInfiniteQueryResult<TData, TError>\n\n/**\n * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of\n * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.\n *\n * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default\n * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user\n * actions, or add conditions like `hasNextPage && !isFetching`.\n * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.\n * @param options - The {@link UseInfiniteQueryOptions} to use — everything you can pass to `useInfiniteQuery`.\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 properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,\n * `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and\n * `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default\n * `InfiniteData<TQueryFnData>` shape.\n *\n * @example\n * Fetching the next page from a \"Load More\" button click:\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n * const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =\n * useInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * })\n *\n * if (isPending) return 'Loading...'\n * if (isError) return <span>Error: {error.message}</span>\n *\n * return (\n * <>\n * <ul>\n * {data.pages.map((page) =>\n * page.projects.map((project) => <li key={project.id}>{project.name}</li>),\n * )}\n * </ul>\n * <button\n * onClick={() => fetchNextPage()}\n * disabled={!hasNextPage || isFetching}\n * >\n * {isFetchingNextPage\n * ? 'Loading more...'\n * : hasNextPage\n * ? 'Load More'\n * : 'Nothing more to load'}\n * </button>\n * </>\n * )\n * }\n * ```\n *\n * @example\n * Fetching the next page automatically as the user scrolls, using an `IntersectionObserver` on a\n * sentinel element after the list:\n * ```tsx\n * import { useInfiniteQuery } from '@tanstack/preact-query'\n * import { useEffect, useRef } from 'preact/hooks'\n *\n * function Projects() {\n * const {\n * data,\n * isPending,\n * isError,\n * error,\n * fetchNextPage,\n * hasNextPage,\n * isFetching,\n * isFetchingNextPage,\n * } = useInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * })\n *\n * const sentinelRef = useRef<HTMLDivElement>(null)\n *\n * useEffect(() => {\n * const sentinel = sentinelRef.current\n * if (sentinel == null || !hasNextPage || isFetching) return\n *\n * const observer = new IntersectionObserver(([entry]) => {\n * if (entry?.isIntersecting) fetchNextPage()\n * })\n * observer.observe(sentinel)\n *\n * return () => observer.disconnect()\n * }, [hasNextPage, isFetching, fetchNextPage])\n *\n * if (isPending) return 'Loading...'\n * if (isError) return <span>Error: {error.message}</span>\n *\n * return (\n * <>\n * <ul>\n * {data.pages.map((page) =>\n * page.projects.map((project) => <li key={project.id}>{project.name}</li>),\n * )}\n * </ul>\n * <div ref={sentinelRef}>{isFetchingNextPage ? 'Loading more...' : null}</div>\n * </>\n * )\n * }\n * ```\n *\n * @example\n * A query that's disabled, type safe, until `postId` is set — pass `skipToken` as `queryFn`\n * instead of setting `enabled: false`:\n * ```tsx\n * import { skipToken, useInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Comments({ postId }: { postId: string | undefined }) {\n * // Use `isLoading`, not `isPending`, so the loading state doesn't show while the query is disabled.\n * const { data, isLoading, isError, error } = useInfiniteQuery({\n * queryKey: ['post', postId, 'comments'],\n * queryFn:\n * postId != null\n * ? ({ pageParam }) => fetchComments(postId, pageParam)\n * : skipToken,\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * })\n *\n * if (postId == null) return 'Select a post'\n * if (isLoading) return 'Loading...'\n * if (isError) return <span>Error: {error.message}</span>\n *\n * return (\n * <ul>\n * {data?.pages.map((page) => page.comments.map((c) => <li key={c.id}>{c.text}</li>))}\n * </ul>\n * )\n * }\n * ```\n */\nexport function useInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: UseInfiniteQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n queryClient?: QueryClient,\n): UseInfiniteQueryResult<TData, TError>\n\nexport function useInfiniteQuery(\n options: UseInfiniteQueryOptions,\n queryClient?: QueryClient,\n) {\n return useBaseQuery(\n options,\n InfiniteQueryObserver as typeof QueryObserver,\n queryClient,\n )\n}\n"],"mappings":";;;;AA2WA,SAAgB,iBACd,SACA,aACA;CACA,OAAOA,qBAAAA,aACL,SACAC,qBAAAA,uBACA,WACF;AACF"}
@@ -3,7 +3,7 @@ import { DefinedInitialDataInfiniteOptions, UndefinedInitialDataInfiniteOptions
3
3
  import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/query-core";
4
4
  //#region src/useInfiniteQuery.d.ts
5
5
  /**
6
- * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of `queryFn`,
6
+ * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
7
7
  * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
8
8
  *
9
9
  * This overload is selected when `initialData` is set.
@@ -15,16 +15,19 @@ import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/que
15
15
  * @param options - The {@link DefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`, with `initialData` set.
16
16
  * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
17
17
  * be used.
18
- * @returns The same properties as `useQuery`, with the addition of `data.pages`, `data.pageParams`,
19
- * `fetchNextPage`, `fetchPreviousPage`, `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and
20
- * `isFetchingPreviousPage`.
18
+ * @returns The same properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,
19
+ * `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and
20
+ * `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default
21
+ * `InfiniteData<TQueryFnData>` shape.
21
22
  *
22
23
  * @example
23
24
  * ```tsx
24
25
  * import { useInfiniteQuery } from '@tanstack/preact-query'
25
26
  *
26
27
  * function Projects() {
27
- * const { data } = useInfiniteQuery({
28
+ * // `data` is never `undefined`, thanks to `initialData` — even if a refetch fails, so the
29
+ * // list stays visible alongside the error.
30
+ * const { data, isError, error } = useInfiniteQuery({
28
31
  * queryKey: ['projects'],
29
32
  * queryFn: ({ pageParam }) => fetchProjects(pageParam),
30
33
  * initialPageParam: 0,
@@ -32,13 +35,20 @@ import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/que
32
35
  * initialData: { pages: [], pageParams: [] },
33
36
  * })
34
37
  *
35
- * return <>{data.pages.map((page) => page.projects.map((p) => <p key={p.id}>{p.name}</p>))}</>
38
+ * return (
39
+ * <div>
40
+ * {isError ? <span>Error: {error.message}</span> : null}
41
+ * <ul>
42
+ * {data.pages.map((page) => page.projects.map((p) => <li key={p.id}>{p.name}</li>))}
43
+ * </ul>
44
+ * </div>
45
+ * )
36
46
  * }
37
47
  * ```
38
48
  */
39
49
  declare function useInfiniteQuery<TQueryFnData, TError = DefaultError, TData = InfiniteData<TQueryFnData>, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(options: DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: QueryClient): DefinedUseInfiniteQueryResult<TData, TError>;
40
50
  /**
41
- * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of `queryFn`,
51
+ * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
42
52
  * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
43
53
  *
44
54
  * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default
@@ -48,16 +58,18 @@ declare function useInfiniteQuery<TQueryFnData, TError = DefaultError, TData = I
48
58
  * @param options - The {@link UndefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`.
49
59
  * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
50
60
  * be used.
51
- * @returns The same properties as `useQuery`, with the addition of `data.pages`, `data.pageParams`,
52
- * `fetchNextPage`, `fetchPreviousPage`, `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and
53
- * `isFetchingPreviousPage`.
61
+ * @returns The same properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,
62
+ * `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and
63
+ * `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default
64
+ * `InfiniteData<TQueryFnData>` shape.
54
65
  *
55
66
  * @example
67
+ * Fetching the next page from a "Load More" button click:
56
68
  * ```tsx
57
69
  * import { useInfiniteQuery } from '@tanstack/preact-query'
58
70
  *
59
71
  * function Projects() {
60
- * const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
72
+ * const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
61
73
  * useInfiniteQuery({
62
74
  * queryKey: ['projects'],
63
75
  * queryFn: ({ pageParam }) => fetchProjects(pageParam),
@@ -65,24 +77,88 @@ declare function useInfiniteQuery<TQueryFnData, TError = DefaultError, TData = I
65
77
  * getNextPageParam: (lastPage) => lastPage.nextId,
66
78
  * })
67
79
  *
80
+ * if (isPending) return 'Loading...'
81
+ * if (isError) return <span>Error: {error.message}</span>
82
+ *
68
83
  * return (
69
- * <button
70
- * onClick={() => fetchNextPage()}
71
- * disabled={!hasNextPage || isFetching}
72
- * >
73
- * {isFetchingNextPage
74
- * ? 'Loading more...'
75
- * : hasNextPage
76
- * ? 'Load More'
77
- * : 'Nothing more to load'}
78
- * </button>
84
+ * <>
85
+ * <ul>
86
+ * {data.pages.map((page) =>
87
+ * page.projects.map((project) => <li key={project.id}>{project.name}</li>),
88
+ * )}
89
+ * </ul>
90
+ * <button
91
+ * onClick={() => fetchNextPage()}
92
+ * disabled={!hasNextPage || isFetching}
93
+ * >
94
+ * {isFetchingNextPage
95
+ * ? 'Loading more...'
96
+ * : hasNextPage
97
+ * ? 'Load More'
98
+ * : 'Nothing more to load'}
99
+ * </button>
100
+ * </>
101
+ * )
102
+ * }
103
+ * ```
104
+ *
105
+ * @example
106
+ * Fetching the next page automatically as the user scrolls, using an `IntersectionObserver` on a
107
+ * sentinel element after the list:
108
+ * ```tsx
109
+ * import { useInfiniteQuery } from '@tanstack/preact-query'
110
+ * import { useEffect, useRef } from 'preact/hooks'
111
+ *
112
+ * function Projects() {
113
+ * const {
114
+ * data,
115
+ * isPending,
116
+ * isError,
117
+ * error,
118
+ * fetchNextPage,
119
+ * hasNextPage,
120
+ * isFetching,
121
+ * isFetchingNextPage,
122
+ * } = useInfiniteQuery({
123
+ * queryKey: ['projects'],
124
+ * queryFn: ({ pageParam }) => fetchProjects(pageParam),
125
+ * initialPageParam: 0,
126
+ * getNextPageParam: (lastPage) => lastPage.nextId,
127
+ * })
128
+ *
129
+ * const sentinelRef = useRef<HTMLDivElement>(null)
130
+ *
131
+ * useEffect(() => {
132
+ * const sentinel = sentinelRef.current
133
+ * if (sentinel == null || !hasNextPage || isFetching) return
134
+ *
135
+ * const observer = new IntersectionObserver(([entry]) => {
136
+ * if (entry?.isIntersecting) fetchNextPage()
137
+ * })
138
+ * observer.observe(sentinel)
139
+ *
140
+ * return () => observer.disconnect()
141
+ * }, [hasNextPage, isFetching, fetchNextPage])
142
+ *
143
+ * if (isPending) return 'Loading...'
144
+ * if (isError) return <span>Error: {error.message}</span>
145
+ *
146
+ * return (
147
+ * <>
148
+ * <ul>
149
+ * {data.pages.map((page) =>
150
+ * page.projects.map((project) => <li key={project.id}>{project.name}</li>),
151
+ * )}
152
+ * </ul>
153
+ * <div ref={sentinelRef}>{isFetchingNextPage ? 'Loading more...' : null}</div>
154
+ * </>
79
155
  * )
80
156
  * }
81
157
  * ```
82
158
  */
83
159
  declare function useInfiniteQuery<TQueryFnData, TError = DefaultError, TData = InfiniteData<TQueryFnData>, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(options: UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: QueryClient): UseInfiniteQueryResult<TData, TError>;
84
160
  /**
85
- * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of `queryFn`,
161
+ * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
86
162
  * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
87
163
  *
88
164
  * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default
@@ -92,16 +168,18 @@ declare function useInfiniteQuery<TQueryFnData, TError = DefaultError, TData = I
92
168
  * @param options - The {@link UseInfiniteQueryOptions} to use — everything you can pass to `useInfiniteQuery`.
93
169
  * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
94
170
  * be used.
95
- * @returns The same properties as `useQuery`, with the addition of `data.pages`, `data.pageParams`,
96
- * `fetchNextPage`, `fetchPreviousPage`, `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and
97
- * `isFetchingPreviousPage`.
171
+ * @returns The same properties as `useQuery`, with the addition of `fetchNextPage`, `fetchPreviousPage`,
172
+ * `hasNextPage`, `hasPreviousPage`, `isFetchingNextPage`, and `isFetchingPreviousPage`. `data.pages` and
173
+ * `data.pageParams` are also added, as long as a `select` doesn't change `TData` away from its default
174
+ * `InfiniteData<TQueryFnData>` shape.
98
175
  *
99
176
  * @example
177
+ * Fetching the next page from a "Load More" button click:
100
178
  * ```tsx
101
179
  * import { useInfiniteQuery } from '@tanstack/preact-query'
102
180
  *
103
181
  * function Projects() {
104
- * const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
182
+ * const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
105
183
  * useInfiniteQuery({
106
184
  * queryKey: ['projects'],
107
185
  * queryFn: ({ pageParam }) => fetchProjects(pageParam),
@@ -109,17 +187,111 @@ declare function useInfiniteQuery<TQueryFnData, TError = DefaultError, TData = I
109
187
  * getNextPageParam: (lastPage) => lastPage.nextId,
110
188
  * })
111
189
  *
190
+ * if (isPending) return 'Loading...'
191
+ * if (isError) return <span>Error: {error.message}</span>
192
+ *
193
+ * return (
194
+ * <>
195
+ * <ul>
196
+ * {data.pages.map((page) =>
197
+ * page.projects.map((project) => <li key={project.id}>{project.name}</li>),
198
+ * )}
199
+ * </ul>
200
+ * <button
201
+ * onClick={() => fetchNextPage()}
202
+ * disabled={!hasNextPage || isFetching}
203
+ * >
204
+ * {isFetchingNextPage
205
+ * ? 'Loading more...'
206
+ * : hasNextPage
207
+ * ? 'Load More'
208
+ * : 'Nothing more to load'}
209
+ * </button>
210
+ * </>
211
+ * )
212
+ * }
213
+ * ```
214
+ *
215
+ * @example
216
+ * Fetching the next page automatically as the user scrolls, using an `IntersectionObserver` on a
217
+ * sentinel element after the list:
218
+ * ```tsx
219
+ * import { useInfiniteQuery } from '@tanstack/preact-query'
220
+ * import { useEffect, useRef } from 'preact/hooks'
221
+ *
222
+ * function Projects() {
223
+ * const {
224
+ * data,
225
+ * isPending,
226
+ * isError,
227
+ * error,
228
+ * fetchNextPage,
229
+ * hasNextPage,
230
+ * isFetching,
231
+ * isFetchingNextPage,
232
+ * } = useInfiniteQuery({
233
+ * queryKey: ['projects'],
234
+ * queryFn: ({ pageParam }) => fetchProjects(pageParam),
235
+ * initialPageParam: 0,
236
+ * getNextPageParam: (lastPage) => lastPage.nextId,
237
+ * })
238
+ *
239
+ * const sentinelRef = useRef<HTMLDivElement>(null)
240
+ *
241
+ * useEffect(() => {
242
+ * const sentinel = sentinelRef.current
243
+ * if (sentinel == null || !hasNextPage || isFetching) return
244
+ *
245
+ * const observer = new IntersectionObserver(([entry]) => {
246
+ * if (entry?.isIntersecting) fetchNextPage()
247
+ * })
248
+ * observer.observe(sentinel)
249
+ *
250
+ * return () => observer.disconnect()
251
+ * }, [hasNextPage, isFetching, fetchNextPage])
252
+ *
253
+ * if (isPending) return 'Loading...'
254
+ * if (isError) return <span>Error: {error.message}</span>
255
+ *
256
+ * return (
257
+ * <>
258
+ * <ul>
259
+ * {data.pages.map((page) =>
260
+ * page.projects.map((project) => <li key={project.id}>{project.name}</li>),
261
+ * )}
262
+ * </ul>
263
+ * <div ref={sentinelRef}>{isFetchingNextPage ? 'Loading more...' : null}</div>
264
+ * </>
265
+ * )
266
+ * }
267
+ * ```
268
+ *
269
+ * @example
270
+ * A query that's disabled, type safe, until `postId` is set — pass `skipToken` as `queryFn`
271
+ * instead of setting `enabled: false`:
272
+ * ```tsx
273
+ * import { skipToken, useInfiniteQuery } from '@tanstack/preact-query'
274
+ *
275
+ * function Comments({ postId }: { postId: string | undefined }) {
276
+ * // Use `isLoading`, not `isPending`, so the loading state doesn't show while the query is disabled.
277
+ * const { data, isLoading, isError, error } = useInfiniteQuery({
278
+ * queryKey: ['post', postId, 'comments'],
279
+ * queryFn:
280
+ * postId != null
281
+ * ? ({ pageParam }) => fetchComments(postId, pageParam)
282
+ * : skipToken,
283
+ * initialPageParam: 0,
284
+ * getNextPageParam: (lastPage) => lastPage.nextId,
285
+ * })
286
+ *
287
+ * if (postId == null) return 'Select a post'
288
+ * if (isLoading) return 'Loading...'
289
+ * if (isError) return <span>Error: {error.message}</span>
290
+ *
112
291
  * return (
113
- * <button
114
- * onClick={() => fetchNextPage()}
115
- * disabled={!hasNextPage || isFetching}
116
- * >
117
- * {isFetchingNextPage
118
- * ? 'Loading more...'
119
- * : hasNextPage
120
- * ? 'Load More'
121
- * : 'Nothing more to load'}
122
- * </button>
292
+ * <ul>
293
+ * {data?.pages.map((page) => page.comments.map((c) => <li key={c.id}>{c.text}</li>))}
294
+ * </ul>
123
295
  * )
124
296
  * }
125
297
  * ```
@@ -1 +1 @@
1
- {"version":3,"file":"useInfiniteQuery.d.cts","names":[],"sources":["../../src/useInfiniteQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAsDgB,iBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,kCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,8BAA8B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6CxB,iBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,oCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,uBAAuB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6CjB,iBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,wBACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,uBAAuB,OAAO"}
1
+ {"version":3,"file":"useInfiniteQuery.d.cts","names":[],"sources":["../../src/useInfiniteQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAgEgB,iBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,kCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,8BAA8B,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA+GxB,iBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,oCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,uBAAuB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6IjB,iBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,wBACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,uBAAuB,OAAO"}