@tanstack/react-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 (298) hide show
  1. package/build/legacy/HydrationBoundary.cjs +44 -1
  2. package/build/legacy/HydrationBoundary.cjs.map +1 -1
  3. package/build/legacy/HydrationBoundary.d.cts +61 -0
  4. package/build/legacy/HydrationBoundary.d.cts.map +1 -1
  5. package/build/legacy/HydrationBoundary.d.ts +61 -0
  6. package/build/legacy/HydrationBoundary.d.ts.map +1 -1
  7. package/build/legacy/HydrationBoundary.js +44 -1
  8. package/build/legacy/HydrationBoundary.js.map +1 -1
  9. package/build/legacy/IsRestoringProvider.cjs +11 -0
  10. package/build/legacy/IsRestoringProvider.cjs.map +1 -1
  11. package/build/legacy/IsRestoringProvider.d.cts +11 -0
  12. package/build/legacy/IsRestoringProvider.d.cts.map +1 -1
  13. package/build/legacy/IsRestoringProvider.d.ts +11 -0
  14. package/build/legacy/IsRestoringProvider.d.ts.map +1 -1
  15. package/build/legacy/IsRestoringProvider.js +11 -0
  16. package/build/legacy/IsRestoringProvider.js.map +1 -1
  17. package/build/legacy/QueryClientProvider.cjs +30 -0
  18. package/build/legacy/QueryClientProvider.cjs.map +1 -1
  19. package/build/legacy/QueryClientProvider.d.cts +41 -0
  20. package/build/legacy/QueryClientProvider.d.cts.map +1 -1
  21. package/build/legacy/QueryClientProvider.d.ts +41 -0
  22. package/build/legacy/QueryClientProvider.d.ts.map +1 -1
  23. package/build/legacy/QueryClientProvider.js +30 -0
  24. package/build/legacy/QueryClientProvider.js.map +1 -1
  25. package/build/legacy/QueryErrorResetBoundary.cjs +76 -0
  26. package/build/legacy/QueryErrorResetBoundary.cjs.map +1 -1
  27. package/build/legacy/QueryErrorResetBoundary.d.cts +77 -0
  28. package/build/legacy/QueryErrorResetBoundary.d.cts.map +1 -1
  29. package/build/legacy/QueryErrorResetBoundary.d.ts +77 -0
  30. package/build/legacy/QueryErrorResetBoundary.d.ts.map +1 -1
  31. package/build/legacy/QueryErrorResetBoundary.js +76 -0
  32. package/build/legacy/QueryErrorResetBoundary.js.map +1 -1
  33. package/build/legacy/infiniteQueryOptions.cjs.map +1 -1
  34. package/build/legacy/infiniteQueryOptions.d.cts +173 -0
  35. package/build/legacy/infiniteQueryOptions.d.cts.map +1 -1
  36. package/build/legacy/infiniteQueryOptions.d.ts +173 -0
  37. package/build/legacy/infiniteQueryOptions.d.ts.map +1 -1
  38. package/build/legacy/infiniteQueryOptions.js.map +1 -1
  39. package/build/legacy/mutationOptions.cjs.map +1 -1
  40. package/build/legacy/mutationOptions.d.cts +55 -0
  41. package/build/legacy/mutationOptions.d.cts.map +1 -1
  42. package/build/legacy/mutationOptions.d.ts +55 -0
  43. package/build/legacy/mutationOptions.d.ts.map +1 -1
  44. package/build/legacy/mutationOptions.js.map +1 -1
  45. package/build/legacy/queryOptions.cjs.map +1 -1
  46. package/build/legacy/queryOptions.d.cts +175 -0
  47. package/build/legacy/queryOptions.d.cts.map +1 -1
  48. package/build/legacy/queryOptions.d.ts +175 -0
  49. package/build/legacy/queryOptions.d.ts.map +1 -1
  50. package/build/legacy/queryOptions.js.map +1 -1
  51. package/build/legacy/types.cjs.map +1 -1
  52. package/build/legacy/types.d.cts +228 -2
  53. package/build/legacy/types.d.cts.map +1 -1
  54. package/build/legacy/types.d.ts +228 -2
  55. package/build/legacy/types.d.ts.map +1 -1
  56. package/build/legacy/types.js.map +1 -1
  57. package/build/legacy/useInfiniteQuery.cjs.map +1 -1
  58. package/build/legacy/useInfiniteQuery.d.cts +292 -0
  59. package/build/legacy/useInfiniteQuery.d.cts.map +1 -1
  60. package/build/legacy/useInfiniteQuery.d.ts +292 -0
  61. package/build/legacy/useInfiniteQuery.d.ts.map +1 -1
  62. package/build/legacy/useInfiniteQuery.js.map +1 -1
  63. package/build/legacy/useIsFetching.cjs +36 -0
  64. package/build/legacy/useIsFetching.cjs.map +1 -1
  65. package/build/legacy/useIsFetching.d.cts +36 -0
  66. package/build/legacy/useIsFetching.d.cts.map +1 -1
  67. package/build/legacy/useIsFetching.d.ts +36 -0
  68. package/build/legacy/useIsFetching.d.ts.map +1 -1
  69. package/build/legacy/useIsFetching.js +36 -0
  70. package/build/legacy/useIsFetching.js.map +1 -1
  71. package/build/legacy/useMutation.cjs +172 -0
  72. package/build/legacy/useMutation.cjs.map +1 -1
  73. package/build/legacy/useMutation.d.cts +172 -0
  74. package/build/legacy/useMutation.d.cts.map +1 -1
  75. package/build/legacy/useMutation.d.ts +172 -0
  76. package/build/legacy/useMutation.d.ts.map +1 -1
  77. package/build/legacy/useMutation.js +172 -0
  78. package/build/legacy/useMutation.js.map +1 -1
  79. package/build/legacy/useMutationState.cjs +94 -0
  80. package/build/legacy/useMutationState.cjs.map +1 -1
  81. package/build/legacy/useMutationState.d.cts +94 -0
  82. package/build/legacy/useMutationState.d.cts.map +1 -1
  83. package/build/legacy/useMutationState.d.ts +94 -0
  84. package/build/legacy/useMutationState.d.ts.map +1 -1
  85. package/build/legacy/useMutationState.js +94 -0
  86. package/build/legacy/useMutationState.js.map +1 -1
  87. package/build/legacy/usePrefetchInfiniteQuery.cjs +44 -0
  88. package/build/legacy/usePrefetchInfiniteQuery.cjs.map +1 -1
  89. package/build/legacy/usePrefetchInfiniteQuery.d.cts +44 -0
  90. package/build/legacy/usePrefetchInfiniteQuery.d.cts.map +1 -1
  91. package/build/legacy/usePrefetchInfiniteQuery.d.ts +44 -0
  92. package/build/legacy/usePrefetchInfiniteQuery.d.ts.map +1 -1
  93. package/build/legacy/usePrefetchInfiniteQuery.js +44 -0
  94. package/build/legacy/usePrefetchInfiniteQuery.js.map +1 -1
  95. package/build/legacy/usePrefetchQuery.cjs +35 -0
  96. package/build/legacy/usePrefetchQuery.cjs.map +1 -1
  97. package/build/legacy/usePrefetchQuery.d.cts +35 -0
  98. package/build/legacy/usePrefetchQuery.d.cts.map +1 -1
  99. package/build/legacy/usePrefetchQuery.d.ts +35 -0
  100. package/build/legacy/usePrefetchQuery.d.ts.map +1 -1
  101. package/build/legacy/usePrefetchQuery.js +35 -0
  102. package/build/legacy/usePrefetchQuery.js.map +1 -1
  103. package/build/legacy/useQueries.cjs +130 -0
  104. package/build/legacy/useQueries.cjs.map +1 -1
  105. package/build/legacy/useQueries.d.cts +165 -2
  106. package/build/legacy/useQueries.d.cts.map +1 -1
  107. package/build/legacy/useQueries.d.ts +165 -2
  108. package/build/legacy/useQueries.d.ts.map +1 -1
  109. package/build/legacy/useQueries.js +130 -0
  110. package/build/legacy/useQueries.js.map +1 -1
  111. package/build/legacy/useQuery.cjs.map +1 -1
  112. package/build/legacy/useQuery.d.cts +246 -0
  113. package/build/legacy/useQuery.d.cts.map +1 -1
  114. package/build/legacy/useQuery.d.ts +246 -0
  115. package/build/legacy/useQuery.d.ts.map +1 -1
  116. package/build/legacy/useQuery.js.map +1 -1
  117. package/build/legacy/useSuspenseInfiniteQuery.cjs +86 -0
  118. package/build/legacy/useSuspenseInfiniteQuery.cjs.map +1 -1
  119. package/build/legacy/useSuspenseInfiniteQuery.d.cts +86 -0
  120. package/build/legacy/useSuspenseInfiniteQuery.d.cts.map +1 -1
  121. package/build/legacy/useSuspenseInfiniteQuery.d.ts +86 -0
  122. package/build/legacy/useSuspenseInfiniteQuery.d.ts.map +1 -1
  123. package/build/legacy/useSuspenseInfiniteQuery.js +86 -0
  124. package/build/legacy/useSuspenseInfiniteQuery.js.map +1 -1
  125. package/build/legacy/useSuspenseQueries.cjs.map +1 -1
  126. package/build/legacy/useSuspenseQueries.d.cts +320 -2
  127. package/build/legacy/useSuspenseQueries.d.cts.map +1 -1
  128. package/build/legacy/useSuspenseQueries.d.ts +320 -2
  129. package/build/legacy/useSuspenseQueries.d.ts.map +1 -1
  130. package/build/legacy/useSuspenseQueries.js.map +1 -1
  131. package/build/legacy/useSuspenseQuery.cjs +67 -0
  132. package/build/legacy/useSuspenseQuery.cjs.map +1 -1
  133. package/build/legacy/useSuspenseQuery.d.cts +67 -0
  134. package/build/legacy/useSuspenseQuery.d.cts.map +1 -1
  135. package/build/legacy/useSuspenseQuery.d.ts +67 -0
  136. package/build/legacy/useSuspenseQuery.d.ts.map +1 -1
  137. package/build/legacy/useSuspenseQuery.js +67 -0
  138. package/build/legacy/useSuspenseQuery.js.map +1 -1
  139. package/build/modern/HydrationBoundary.cjs +44 -1
  140. package/build/modern/HydrationBoundary.cjs.map +1 -1
  141. package/build/modern/HydrationBoundary.d.cts +61 -0
  142. package/build/modern/HydrationBoundary.d.cts.map +1 -1
  143. package/build/modern/HydrationBoundary.d.ts +61 -0
  144. package/build/modern/HydrationBoundary.d.ts.map +1 -1
  145. package/build/modern/HydrationBoundary.js +44 -1
  146. package/build/modern/HydrationBoundary.js.map +1 -1
  147. package/build/modern/IsRestoringProvider.cjs +11 -0
  148. package/build/modern/IsRestoringProvider.cjs.map +1 -1
  149. package/build/modern/IsRestoringProvider.d.cts +11 -0
  150. package/build/modern/IsRestoringProvider.d.cts.map +1 -1
  151. package/build/modern/IsRestoringProvider.d.ts +11 -0
  152. package/build/modern/IsRestoringProvider.d.ts.map +1 -1
  153. package/build/modern/IsRestoringProvider.js +11 -0
  154. package/build/modern/IsRestoringProvider.js.map +1 -1
  155. package/build/modern/QueryClientProvider.cjs +30 -0
  156. package/build/modern/QueryClientProvider.cjs.map +1 -1
  157. package/build/modern/QueryClientProvider.d.cts +41 -0
  158. package/build/modern/QueryClientProvider.d.cts.map +1 -1
  159. package/build/modern/QueryClientProvider.d.ts +41 -0
  160. package/build/modern/QueryClientProvider.d.ts.map +1 -1
  161. package/build/modern/QueryClientProvider.js +30 -0
  162. package/build/modern/QueryClientProvider.js.map +1 -1
  163. package/build/modern/QueryErrorResetBoundary.cjs +76 -0
  164. package/build/modern/QueryErrorResetBoundary.cjs.map +1 -1
  165. package/build/modern/QueryErrorResetBoundary.d.cts +77 -0
  166. package/build/modern/QueryErrorResetBoundary.d.cts.map +1 -1
  167. package/build/modern/QueryErrorResetBoundary.d.ts +77 -0
  168. package/build/modern/QueryErrorResetBoundary.d.ts.map +1 -1
  169. package/build/modern/QueryErrorResetBoundary.js +76 -0
  170. package/build/modern/QueryErrorResetBoundary.js.map +1 -1
  171. package/build/modern/infiniteQueryOptions.cjs.map +1 -1
  172. package/build/modern/infiniteQueryOptions.d.cts +173 -0
  173. package/build/modern/infiniteQueryOptions.d.cts.map +1 -1
  174. package/build/modern/infiniteQueryOptions.d.ts +173 -0
  175. package/build/modern/infiniteQueryOptions.d.ts.map +1 -1
  176. package/build/modern/infiniteQueryOptions.js.map +1 -1
  177. package/build/modern/mutationOptions.cjs.map +1 -1
  178. package/build/modern/mutationOptions.d.cts +55 -0
  179. package/build/modern/mutationOptions.d.cts.map +1 -1
  180. package/build/modern/mutationOptions.d.ts +55 -0
  181. package/build/modern/mutationOptions.d.ts.map +1 -1
  182. package/build/modern/mutationOptions.js.map +1 -1
  183. package/build/modern/queryOptions.cjs.map +1 -1
  184. package/build/modern/queryOptions.d.cts +175 -0
  185. package/build/modern/queryOptions.d.cts.map +1 -1
  186. package/build/modern/queryOptions.d.ts +175 -0
  187. package/build/modern/queryOptions.d.ts.map +1 -1
  188. package/build/modern/queryOptions.js.map +1 -1
  189. package/build/modern/types.cjs.map +1 -1
  190. package/build/modern/types.d.cts +228 -2
  191. package/build/modern/types.d.cts.map +1 -1
  192. package/build/modern/types.d.ts +228 -2
  193. package/build/modern/types.d.ts.map +1 -1
  194. package/build/modern/types.js.map +1 -1
  195. package/build/modern/useInfiniteQuery.cjs.map +1 -1
  196. package/build/modern/useInfiniteQuery.d.cts +292 -0
  197. package/build/modern/useInfiniteQuery.d.cts.map +1 -1
  198. package/build/modern/useInfiniteQuery.d.ts +292 -0
  199. package/build/modern/useInfiniteQuery.d.ts.map +1 -1
  200. package/build/modern/useInfiniteQuery.js.map +1 -1
  201. package/build/modern/useIsFetching.cjs +36 -0
  202. package/build/modern/useIsFetching.cjs.map +1 -1
  203. package/build/modern/useIsFetching.d.cts +36 -0
  204. package/build/modern/useIsFetching.d.cts.map +1 -1
  205. package/build/modern/useIsFetching.d.ts +36 -0
  206. package/build/modern/useIsFetching.d.ts.map +1 -1
  207. package/build/modern/useIsFetching.js +36 -0
  208. package/build/modern/useIsFetching.js.map +1 -1
  209. package/build/modern/useMutation.cjs +172 -0
  210. package/build/modern/useMutation.cjs.map +1 -1
  211. package/build/modern/useMutation.d.cts +172 -0
  212. package/build/modern/useMutation.d.cts.map +1 -1
  213. package/build/modern/useMutation.d.ts +172 -0
  214. package/build/modern/useMutation.d.ts.map +1 -1
  215. package/build/modern/useMutation.js +172 -0
  216. package/build/modern/useMutation.js.map +1 -1
  217. package/build/modern/useMutationState.cjs +94 -0
  218. package/build/modern/useMutationState.cjs.map +1 -1
  219. package/build/modern/useMutationState.d.cts +94 -0
  220. package/build/modern/useMutationState.d.cts.map +1 -1
  221. package/build/modern/useMutationState.d.ts +94 -0
  222. package/build/modern/useMutationState.d.ts.map +1 -1
  223. package/build/modern/useMutationState.js +94 -0
  224. package/build/modern/useMutationState.js.map +1 -1
  225. package/build/modern/usePrefetchInfiniteQuery.cjs +44 -0
  226. package/build/modern/usePrefetchInfiniteQuery.cjs.map +1 -1
  227. package/build/modern/usePrefetchInfiniteQuery.d.cts +44 -0
  228. package/build/modern/usePrefetchInfiniteQuery.d.cts.map +1 -1
  229. package/build/modern/usePrefetchInfiniteQuery.d.ts +44 -0
  230. package/build/modern/usePrefetchInfiniteQuery.d.ts.map +1 -1
  231. package/build/modern/usePrefetchInfiniteQuery.js +44 -0
  232. package/build/modern/usePrefetchInfiniteQuery.js.map +1 -1
  233. package/build/modern/usePrefetchQuery.cjs +35 -0
  234. package/build/modern/usePrefetchQuery.cjs.map +1 -1
  235. package/build/modern/usePrefetchQuery.d.cts +35 -0
  236. package/build/modern/usePrefetchQuery.d.cts.map +1 -1
  237. package/build/modern/usePrefetchQuery.d.ts +35 -0
  238. package/build/modern/usePrefetchQuery.d.ts.map +1 -1
  239. package/build/modern/usePrefetchQuery.js +35 -0
  240. package/build/modern/usePrefetchQuery.js.map +1 -1
  241. package/build/modern/useQueries.cjs +130 -0
  242. package/build/modern/useQueries.cjs.map +1 -1
  243. package/build/modern/useQueries.d.cts +165 -2
  244. package/build/modern/useQueries.d.cts.map +1 -1
  245. package/build/modern/useQueries.d.ts +165 -2
  246. package/build/modern/useQueries.d.ts.map +1 -1
  247. package/build/modern/useQueries.js +130 -0
  248. package/build/modern/useQueries.js.map +1 -1
  249. package/build/modern/useQuery.cjs.map +1 -1
  250. package/build/modern/useQuery.d.cts +246 -0
  251. package/build/modern/useQuery.d.cts.map +1 -1
  252. package/build/modern/useQuery.d.ts +246 -0
  253. package/build/modern/useQuery.d.ts.map +1 -1
  254. package/build/modern/useQuery.js.map +1 -1
  255. package/build/modern/useSuspenseInfiniteQuery.cjs +86 -0
  256. package/build/modern/useSuspenseInfiniteQuery.cjs.map +1 -1
  257. package/build/modern/useSuspenseInfiniteQuery.d.cts +86 -0
  258. package/build/modern/useSuspenseInfiniteQuery.d.cts.map +1 -1
  259. package/build/modern/useSuspenseInfiniteQuery.d.ts +86 -0
  260. package/build/modern/useSuspenseInfiniteQuery.d.ts.map +1 -1
  261. package/build/modern/useSuspenseInfiniteQuery.js +86 -0
  262. package/build/modern/useSuspenseInfiniteQuery.js.map +1 -1
  263. package/build/modern/useSuspenseQueries.cjs.map +1 -1
  264. package/build/modern/useSuspenseQueries.d.cts +320 -2
  265. package/build/modern/useSuspenseQueries.d.cts.map +1 -1
  266. package/build/modern/useSuspenseQueries.d.ts +320 -2
  267. package/build/modern/useSuspenseQueries.d.ts.map +1 -1
  268. package/build/modern/useSuspenseQueries.js.map +1 -1
  269. package/build/modern/useSuspenseQuery.cjs +67 -0
  270. package/build/modern/useSuspenseQuery.cjs.map +1 -1
  271. package/build/modern/useSuspenseQuery.d.cts +67 -0
  272. package/build/modern/useSuspenseQuery.d.cts.map +1 -1
  273. package/build/modern/useSuspenseQuery.d.ts +67 -0
  274. package/build/modern/useSuspenseQuery.d.ts.map +1 -1
  275. package/build/modern/useSuspenseQuery.js +67 -0
  276. package/build/modern/useSuspenseQuery.js.map +1 -1
  277. package/build/query-codemods/eslint.config.js +7 -0
  278. package/build/query-codemods/root.eslint.config.js +45 -0
  279. package/package.json +11 -11
  280. package/src/HydrationBoundary.tsx +61 -1
  281. package/src/IsRestoringProvider.ts +12 -0
  282. package/src/QueryClientProvider.tsx +41 -0
  283. package/src/QueryErrorResetBoundary.tsx +89 -0
  284. package/src/infiniteQueryOptions.ts +173 -0
  285. package/src/mutationOptions.ts +55 -0
  286. package/src/queryOptions.ts +175 -0
  287. package/src/types.ts +228 -2
  288. package/src/useInfiniteQuery.ts +292 -0
  289. package/src/useIsFetching.ts +36 -0
  290. package/src/useMutation.ts +172 -0
  291. package/src/useMutationState.ts +94 -0
  292. package/src/usePrefetchInfiniteQuery.tsx +44 -0
  293. package/src/usePrefetchQuery.tsx +35 -0
  294. package/src/useQueries.ts +165 -2
  295. package/src/useQuery.ts +246 -0
  296. package/src/useSuspenseInfiniteQuery.ts +86 -0
  297. package/src/useSuspenseQueries.ts +320 -2
  298. package/src/useSuspenseQuery.ts +67 -0
@@ -2,8 +2,300 @@ import { DefinedUseInfiniteQueryResult, UseInfiniteQueryOptions, UseInfiniteQuer
2
2
  import { DefinedInitialDataInfiniteOptions, UndefinedInitialDataInfiniteOptions } from "./infiniteQueryOptions.cjs";
3
3
  import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/query-core";
4
4
  //#region src/useInfiniteQuery.d.ts
5
+ /**
6
+ * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
7
+ * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
8
+ *
9
+ * This overload is selected when `initialData` is set.
10
+ *
11
+ * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default
12
+ * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user
13
+ * actions, or add conditions like `hasNextPage && !isFetching`.
14
+ * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.
15
+ * @param options - The {@link DefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`, with `initialData` set.
16
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
17
+ * be used.
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.
22
+ *
23
+ * @example
24
+ * ```tsx
25
+ * import { useInfiniteQuery } from '@tanstack/react-query'
26
+ *
27
+ * function Projects() {
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({
31
+ * queryKey: ['projects'],
32
+ * queryFn: ({ pageParam }) => fetchProjects(pageParam),
33
+ * initialPageParam: 0,
34
+ * getNextPageParam: (lastPage) => lastPage.nextId,
35
+ * initialData: { pages: [], pageParams: [] },
36
+ * })
37
+ *
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
+ * )
46
+ * }
47
+ * ```
48
+ */
5
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>;
50
+ /**
51
+ * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
52
+ * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
53
+ *
54
+ * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default
55
+ * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user
56
+ * actions, or add conditions like `hasNextPage && !isFetching`.
57
+ * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.
58
+ * @param options - The {@link UndefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`.
59
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
60
+ * be used.
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.
65
+ *
66
+ * @example
67
+ * Fetching the next page from a "Load More" button click:
68
+ * ```tsx
69
+ * import { useInfiniteQuery } from '@tanstack/react-query'
70
+ *
71
+ * function Projects() {
72
+ * const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
73
+ * useInfiniteQuery({
74
+ * queryKey: ['projects'],
75
+ * queryFn: ({ pageParam }) => fetchProjects(pageParam),
76
+ * initialPageParam: 0,
77
+ * getNextPageParam: (lastPage) => lastPage.nextId,
78
+ * })
79
+ *
80
+ * if (isPending) return 'Loading...'
81
+ * if (isError) return <span>Error: {error.message}</span>
82
+ *
83
+ * return (
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/react-query'
110
+ * import { useEffect, useRef } from 'react'
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
+ * </>
155
+ * )
156
+ * }
157
+ * ```
158
+ */
6
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>;
160
+ /**
161
+ * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
162
+ * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
163
+ *
164
+ * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default
165
+ * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user
166
+ * actions, or add conditions like `hasNextPage && !isFetching`.
167
+ * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.
168
+ * @param options - The {@link UseInfiniteQueryOptions} to use — everything you can pass to `useInfiniteQuery`.
169
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
170
+ * be used.
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.
175
+ *
176
+ * @example
177
+ * Fetching the next page from a "Load More" button click:
178
+ * ```tsx
179
+ * import { useInfiniteQuery } from '@tanstack/react-query'
180
+ *
181
+ * function Projects() {
182
+ * const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
183
+ * useInfiniteQuery({
184
+ * queryKey: ['projects'],
185
+ * queryFn: ({ pageParam }) => fetchProjects(pageParam),
186
+ * initialPageParam: 0,
187
+ * getNextPageParam: (lastPage) => lastPage.nextId,
188
+ * })
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/react-query'
220
+ * import { useEffect, useRef } from 'react'
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/react-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
+ *
291
+ * return (
292
+ * <ul>
293
+ * {data?.pages.map((page) => page.comments.map((c) => <li key={c.id}>{c.text}</li>))}
294
+ * </ul>
295
+ * )
296
+ * }
297
+ * ```
298
+ */
7
299
  declare function useInfiniteQuery<TQueryFnData, TError = DefaultError, TData = InfiniteData<TQueryFnData>, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(options: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: QueryClient): UseInfiniteQueryResult<TData, TError>;
8
300
  //#endregion
9
301
  export { useInfiniteQuery };
@@ -1 +1 @@
1
- {"version":3,"file":"useInfiniteQuery.d.cts","names":[],"sources":["../../src/useInfiniteQuery.ts"],"mappings":";;;;iBAoBgB,iBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,kCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,8BAA8B,OAAO;iBAExB,iBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,oCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,uBAAuB,OAAO;iBAEjB,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"}
@@ -2,8 +2,300 @@ import { DefinedUseInfiniteQueryResult, UseInfiniteQueryOptions, UseInfiniteQuer
2
2
  import { DefinedInitialDataInfiniteOptions, UndefinedInitialDataInfiniteOptions } from "./infiniteQueryOptions.js";
3
3
  import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/query-core";
4
4
  //#region src/useInfiniteQuery.d.ts
5
+ /**
6
+ * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
7
+ * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
8
+ *
9
+ * This overload is selected when `initialData` is set.
10
+ *
11
+ * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default
12
+ * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user
13
+ * actions, or add conditions like `hasNextPage && !isFetching`.
14
+ * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.
15
+ * @param options - The {@link DefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`, with `initialData` set.
16
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
17
+ * be used.
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.
22
+ *
23
+ * @example
24
+ * ```tsx
25
+ * import { useInfiniteQuery } from '@tanstack/react-query'
26
+ *
27
+ * function Projects() {
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({
31
+ * queryKey: ['projects'],
32
+ * queryFn: ({ pageParam }) => fetchProjects(pageParam),
33
+ * initialPageParam: 0,
34
+ * getNextPageParam: (lastPage) => lastPage.nextId,
35
+ * initialData: { pages: [], pageParams: [] },
36
+ * })
37
+ *
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
+ * )
46
+ * }
47
+ * ```
48
+ */
5
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>;
50
+ /**
51
+ * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
52
+ * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
53
+ *
54
+ * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default
55
+ * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user
56
+ * actions, or add conditions like `hasNextPage && !isFetching`.
57
+ * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.
58
+ * @param options - The {@link UndefinedInitialDataInfiniteOptions} to use — everything you can pass to `useInfiniteQuery`.
59
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
60
+ * be used.
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.
65
+ *
66
+ * @example
67
+ * Fetching the next page from a "Load More" button click:
68
+ * ```tsx
69
+ * import { useInfiniteQuery } from '@tanstack/react-query'
70
+ *
71
+ * function Projects() {
72
+ * const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
73
+ * useInfiniteQuery({
74
+ * queryKey: ['projects'],
75
+ * queryFn: ({ pageParam }) => fetchProjects(pageParam),
76
+ * initialPageParam: 0,
77
+ * getNextPageParam: (lastPage) => lastPage.nextId,
78
+ * })
79
+ *
80
+ * if (isPending) return 'Loading...'
81
+ * if (isError) return <span>Error: {error.message}</span>
82
+ *
83
+ * return (
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/react-query'
110
+ * import { useEffect, useRef } from 'react'
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
+ * </>
155
+ * )
156
+ * }
157
+ * ```
158
+ */
6
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>;
160
+ /**
161
+ * The options for `useInfiniteQuery` are identical to `useQuery`, with the addition of
162
+ * `initialPageParam`, `getNextPageParam`, `getPreviousPageParam`, and `maxPages`.
163
+ *
164
+ * @remarks Keep in mind that imperative fetch calls, such as `fetchNextPage`, may interfere with the default
165
+ * refetch behavior, resulting in outdated data. Make sure to call these functions only in response to user
166
+ * actions, or add conditions like `hasNextPage && !isFetching`.
167
+ * @see {@link infiniteQueryOptions} to share these options between `useInfiniteQuery` and imperative APIs like `queryClient.infiniteQuery`.
168
+ * @param options - The {@link UseInfiniteQueryOptions} to use — everything you can pass to `useInfiniteQuery`.
169
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
170
+ * be used.
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.
175
+ *
176
+ * @example
177
+ * Fetching the next page from a "Load More" button click:
178
+ * ```tsx
179
+ * import { useInfiniteQuery } from '@tanstack/react-query'
180
+ *
181
+ * function Projects() {
182
+ * const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
183
+ * useInfiniteQuery({
184
+ * queryKey: ['projects'],
185
+ * queryFn: ({ pageParam }) => fetchProjects(pageParam),
186
+ * initialPageParam: 0,
187
+ * getNextPageParam: (lastPage) => lastPage.nextId,
188
+ * })
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/react-query'
220
+ * import { useEffect, useRef } from 'react'
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/react-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
+ *
291
+ * return (
292
+ * <ul>
293
+ * {data?.pages.map((page) => page.comments.map((c) => <li key={c.id}>{c.text}</li>))}
294
+ * </ul>
295
+ * )
296
+ * }
297
+ * ```
298
+ */
7
299
  declare function useInfiniteQuery<TQueryFnData, TError = DefaultError, TData = InfiniteData<TQueryFnData>, TQueryKey extends QueryKey = QueryKey, TPageParam = unknown>(options: UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: QueryClient): UseInfiniteQueryResult<TData, TError>;
8
300
  //#endregion
9
301
  export { useInfiniteQuery };
@@ -1 +1 @@
1
- {"version":3,"file":"useInfiniteQuery.d.ts","names":[],"sources":["../../src/useInfiniteQuery.ts"],"mappings":";;;;iBAoBgB,iBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,kCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,8BAA8B,OAAO;iBAExB,iBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,oCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,uBAAuB,OAAO;iBAEjB,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.ts","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"}
@@ -1 +1 @@
1
- {"version":3,"file":"useInfiniteQuery.js","names":[],"sources":["../../src/useInfiniteQuery.ts"],"sourcesContent":["'use client'\nimport { InfiniteQueryObserver } from '@tanstack/query-core'\nimport { useBaseQuery } from './useBaseQuery'\nimport type {\n DefaultError,\n InfiniteData,\n QueryClient,\n QueryKey,\n QueryObserver,\n} from '@tanstack/query-core'\nimport type {\n DefinedUseInfiniteQueryResult,\n UseInfiniteQueryOptions,\n UseInfiniteQueryResult,\n} from './types'\nimport type {\n DefinedInitialDataInfiniteOptions,\n UndefinedInitialDataInfiniteOptions,\n} from './infiniteQueryOptions'\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\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\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":";;;;AAuEA,SAAgB,iBACd,SACA,aACA;CACA,OAAO,aACL,SACA,uBACA,WACF;AACF"}
1
+ {"version":3,"file":"useInfiniteQuery.js","names":[],"sources":["../../src/useInfiniteQuery.ts"],"sourcesContent":["'use client'\nimport { InfiniteQueryObserver } from '@tanstack/query-core'\nimport { useBaseQuery } from './useBaseQuery'\nimport type {\n DefaultError,\n InfiniteData,\n QueryClient,\n QueryKey,\n QueryObserver,\n} from '@tanstack/query-core'\nimport type {\n DefinedUseInfiniteQueryResult,\n UseInfiniteQueryOptions,\n UseInfiniteQueryResult,\n} from './types'\nimport type {\n DefinedInitialDataInfiniteOptions,\n UndefinedInitialDataInfiniteOptions,\n} from './infiniteQueryOptions'\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/react-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/react-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/react-query'\n * import { useEffect, useRef } from 'react'\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/react-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/react-query'\n * import { useEffect, useRef } from 'react'\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/react-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,OAAO,aACL,SACA,uBACA,WACF;AACF"}