@tanstack/preact-query 5.102.4 → 5.102.6

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 (125) hide show
  1. package/build/legacy/QueryErrorResetBoundary.cjs +11 -9
  2. package/build/legacy/QueryErrorResetBoundary.cjs.map +1 -1
  3. package/build/legacy/QueryErrorResetBoundary.d.cts +11 -9
  4. package/build/legacy/QueryErrorResetBoundary.d.cts.map +1 -1
  5. package/build/legacy/QueryErrorResetBoundary.d.ts +11 -9
  6. package/build/legacy/QueryErrorResetBoundary.d.ts.map +1 -1
  7. package/build/legacy/QueryErrorResetBoundary.js +11 -9
  8. package/build/legacy/QueryErrorResetBoundary.js.map +1 -1
  9. package/build/legacy/useInfiniteQuery.cjs.map +1 -1
  10. package/build/legacy/useInfiniteQuery.d.cts +28 -24
  11. package/build/legacy/useInfiniteQuery.d.cts.map +1 -1
  12. package/build/legacy/useInfiniteQuery.d.ts +28 -24
  13. package/build/legacy/useInfiniteQuery.d.ts.map +1 -1
  14. package/build/legacy/useInfiniteQuery.js.map +1 -1
  15. package/build/legacy/useIsFetching.cjs +14 -0
  16. package/build/legacy/useIsFetching.cjs.map +1 -1
  17. package/build/legacy/useIsFetching.d.cts +14 -0
  18. package/build/legacy/useIsFetching.d.cts.map +1 -1
  19. package/build/legacy/useIsFetching.d.ts +14 -0
  20. package/build/legacy/useIsFetching.d.ts.map +1 -1
  21. package/build/legacy/useIsFetching.js +14 -0
  22. package/build/legacy/useIsFetching.js.map +1 -1
  23. package/build/legacy/useMutation.cjs +104 -1
  24. package/build/legacy/useMutation.cjs.map +1 -1
  25. package/build/legacy/useMutation.d.cts +104 -1
  26. package/build/legacy/useMutation.d.cts.map +1 -1
  27. package/build/legacy/useMutation.d.ts +104 -1
  28. package/build/legacy/useMutation.d.ts.map +1 -1
  29. package/build/legacy/useMutation.js +104 -1
  30. package/build/legacy/useMutation.js.map +1 -1
  31. package/build/legacy/useQuery.cjs.map +1 -1
  32. package/build/legacy/useQuery.d.cts +54 -2
  33. package/build/legacy/useQuery.d.cts.map +1 -1
  34. package/build/legacy/useQuery.d.ts +54 -2
  35. package/build/legacy/useQuery.d.ts.map +1 -1
  36. package/build/legacy/useQuery.js.map +1 -1
  37. package/build/legacy/useSuspenseInfiniteQuery.cjs +16 -8
  38. package/build/legacy/useSuspenseInfiniteQuery.cjs.map +1 -1
  39. package/build/legacy/useSuspenseInfiniteQuery.d.cts +16 -8
  40. package/build/legacy/useSuspenseInfiniteQuery.d.cts.map +1 -1
  41. package/build/legacy/useSuspenseInfiniteQuery.d.ts +16 -8
  42. package/build/legacy/useSuspenseInfiniteQuery.d.ts.map +1 -1
  43. package/build/legacy/useSuspenseInfiniteQuery.js +16 -8
  44. package/build/legacy/useSuspenseInfiniteQuery.js.map +1 -1
  45. package/build/legacy/useSuspenseQueries.cjs.map +1 -1
  46. package/build/legacy/useSuspenseQueries.d.cts +74 -6
  47. package/build/legacy/useSuspenseQueries.d.cts.map +1 -1
  48. package/build/legacy/useSuspenseQueries.d.ts +74 -6
  49. package/build/legacy/useSuspenseQueries.d.ts.map +1 -1
  50. package/build/legacy/useSuspenseQueries.js.map +1 -1
  51. package/build/legacy/useSuspenseQuery.cjs +4 -0
  52. package/build/legacy/useSuspenseQuery.cjs.map +1 -1
  53. package/build/legacy/useSuspenseQuery.d.cts +4 -0
  54. package/build/legacy/useSuspenseQuery.d.cts.map +1 -1
  55. package/build/legacy/useSuspenseQuery.d.ts +4 -0
  56. package/build/legacy/useSuspenseQuery.d.ts.map +1 -1
  57. package/build/legacy/useSuspenseQuery.js +4 -0
  58. package/build/legacy/useSuspenseQuery.js.map +1 -1
  59. package/build/modern/QueryErrorResetBoundary.cjs +11 -9
  60. package/build/modern/QueryErrorResetBoundary.cjs.map +1 -1
  61. package/build/modern/QueryErrorResetBoundary.d.cts +11 -9
  62. package/build/modern/QueryErrorResetBoundary.d.cts.map +1 -1
  63. package/build/modern/QueryErrorResetBoundary.d.ts +11 -9
  64. package/build/modern/QueryErrorResetBoundary.d.ts.map +1 -1
  65. package/build/modern/QueryErrorResetBoundary.js +11 -9
  66. package/build/modern/QueryErrorResetBoundary.js.map +1 -1
  67. package/build/modern/useInfiniteQuery.cjs.map +1 -1
  68. package/build/modern/useInfiniteQuery.d.cts +28 -24
  69. package/build/modern/useInfiniteQuery.d.cts.map +1 -1
  70. package/build/modern/useInfiniteQuery.d.ts +28 -24
  71. package/build/modern/useInfiniteQuery.d.ts.map +1 -1
  72. package/build/modern/useInfiniteQuery.js.map +1 -1
  73. package/build/modern/useIsFetching.cjs +14 -0
  74. package/build/modern/useIsFetching.cjs.map +1 -1
  75. package/build/modern/useIsFetching.d.cts +14 -0
  76. package/build/modern/useIsFetching.d.cts.map +1 -1
  77. package/build/modern/useIsFetching.d.ts +14 -0
  78. package/build/modern/useIsFetching.d.ts.map +1 -1
  79. package/build/modern/useIsFetching.js +14 -0
  80. package/build/modern/useIsFetching.js.map +1 -1
  81. package/build/modern/useMutation.cjs +104 -1
  82. package/build/modern/useMutation.cjs.map +1 -1
  83. package/build/modern/useMutation.d.cts +104 -1
  84. package/build/modern/useMutation.d.cts.map +1 -1
  85. package/build/modern/useMutation.d.ts +104 -1
  86. package/build/modern/useMutation.d.ts.map +1 -1
  87. package/build/modern/useMutation.js +104 -1
  88. package/build/modern/useMutation.js.map +1 -1
  89. package/build/modern/useQuery.cjs.map +1 -1
  90. package/build/modern/useQuery.d.cts +54 -2
  91. package/build/modern/useQuery.d.cts.map +1 -1
  92. package/build/modern/useQuery.d.ts +54 -2
  93. package/build/modern/useQuery.d.ts.map +1 -1
  94. package/build/modern/useQuery.js.map +1 -1
  95. package/build/modern/useSuspenseInfiniteQuery.cjs +16 -8
  96. package/build/modern/useSuspenseInfiniteQuery.cjs.map +1 -1
  97. package/build/modern/useSuspenseInfiniteQuery.d.cts +16 -8
  98. package/build/modern/useSuspenseInfiniteQuery.d.cts.map +1 -1
  99. package/build/modern/useSuspenseInfiniteQuery.d.ts +16 -8
  100. package/build/modern/useSuspenseInfiniteQuery.d.ts.map +1 -1
  101. package/build/modern/useSuspenseInfiniteQuery.js +16 -8
  102. package/build/modern/useSuspenseInfiniteQuery.js.map +1 -1
  103. package/build/modern/useSuspenseQueries.cjs.map +1 -1
  104. package/build/modern/useSuspenseQueries.d.cts +74 -6
  105. package/build/modern/useSuspenseQueries.d.cts.map +1 -1
  106. package/build/modern/useSuspenseQueries.d.ts +74 -6
  107. package/build/modern/useSuspenseQueries.d.ts.map +1 -1
  108. package/build/modern/useSuspenseQueries.js.map +1 -1
  109. package/build/modern/useSuspenseQuery.cjs +4 -0
  110. package/build/modern/useSuspenseQuery.cjs.map +1 -1
  111. package/build/modern/useSuspenseQuery.d.cts +4 -0
  112. package/build/modern/useSuspenseQuery.d.cts.map +1 -1
  113. package/build/modern/useSuspenseQuery.d.ts +4 -0
  114. package/build/modern/useSuspenseQuery.d.ts.map +1 -1
  115. package/build/modern/useSuspenseQuery.js +4 -0
  116. package/build/modern/useSuspenseQuery.js.map +1 -1
  117. package/package.json +3 -3
  118. package/src/QueryErrorResetBoundary.tsx +11 -9
  119. package/src/useInfiniteQuery.ts +28 -24
  120. package/src/useIsFetching.ts +14 -0
  121. package/src/useMutation.ts +104 -1
  122. package/src/useQuery.ts +54 -2
  123. package/src/useSuspenseInfiniteQuery.ts +16 -8
  124. package/src/useSuspenseQueries.ts +74 -6
  125. package/src/useSuspenseQuery.ts +4 -0
@@ -64,6 +64,24 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
64
64
  * )
65
65
  * }
66
66
  * ```
67
+ *
68
+ * @example
69
+ * The same query, checking `isPending`/`isError` instead of `status` — pick whichever reads better to you:
70
+ * ```tsx
71
+ * import { useQuery } from '@tanstack/preact-query'
72
+ *
73
+ * function Posts() {
74
+ * const { isPending, isError, data, error } = useQuery({
75
+ * queryKey: ['posts'],
76
+ * queryFn: fetchPosts,
77
+ * })
78
+ *
79
+ * if (isPending) return 'Loading...'
80
+ * if (isError) return <span>Error: {error.message}</span>
81
+ *
82
+ * return <>{data.map((post) => <p key={post.id}>{post.title}</p>)}</>
83
+ * }
84
+ * ```
67
85
  */
68
86
  declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): UseQueryResult<TData, TError>;
69
87
  /**
@@ -102,17 +120,22 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
102
120
  * ```
103
121
  *
104
122
  * @example
105
- * A dependent query, only enabled once `postId` is set:
123
+ * A dependent query, only enabled once `postId` is set — use `isLoading`, not `isPending`, so the
124
+ * loading state doesn't show while the query is disabled:
106
125
  * ```tsx
107
126
  * import { useQuery } from '@tanstack/preact-query'
108
127
  *
109
128
  * function Post({ postId }: { postId: number | undefined }) {
110
- * const { data } = useQuery({
129
+ * const { data, isLoading, isError, error } = useQuery({
111
130
  * queryKey: ['post', postId],
112
131
  * queryFn: () => fetchPost(postId!),
113
132
  * enabled: postId != null,
114
133
  * })
115
134
  *
135
+ * if (postId == null) return 'Select a post'
136
+ * if (isLoading) return 'Loading...'
137
+ * if (isError) return <span>Error: {error.message}</span>
138
+ *
116
139
  * return <h1>{data?.title}</h1>
117
140
  * }
118
141
  * ```
@@ -137,6 +160,35 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
137
160
  * return <h1>{data?.title}</h1>
138
161
  * }
139
162
  * ```
163
+ *
164
+ * @example
165
+ * Paginated data, keeping the previous page's data visible while the next page loads:
166
+ * ```tsx
167
+ * import { keepPreviousData, useQuery } from '@tanstack/preact-query'
168
+ * import { useState } from 'preact/hooks'
169
+ *
170
+ * function Posts() {
171
+ * const [page, setPage] = useState(0)
172
+ *
173
+ * const { data, isPlaceholderData } = useQuery({
174
+ * queryKey: ['posts', page],
175
+ * queryFn: () => fetchPosts(page),
176
+ * placeholderData: keepPreviousData,
177
+ * })
178
+ *
179
+ * return (
180
+ * <div>
181
+ * {data?.map((post) => <p key={post.id}>{post.title}</p>)}
182
+ * <button
183
+ * disabled={isPlaceholderData}
184
+ * onClick={() => setPage((old) => old + 1)}
185
+ * >
186
+ * Next Page
187
+ * </button>
188
+ * </div>
189
+ * )
190
+ * }
191
+ * ```
140
192
  */
141
193
  declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): UseQueryResult<TData, TError>;
142
194
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"useQuery.d.cts","names":[],"sources":["../../src/useQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyCgB,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,0BAA0B,cAAc,QAAQ,OAAO,YAChE,cAAc,cACb,sBAAsB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAqChB,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,4BAA4B,cAAc,QAAQ,OAAO,YAClE,cAAc,cACb,eAAe,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA0ET,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,gBAAgB,cAAc,QAAQ,OAAO,YACtD,cAAc,cACb,eAAe,OAAO"}
1
+ {"version":3,"file":"useQuery.d.cts","names":[],"sources":["../../src/useQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyCgB,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,0BAA0B,cAAc,QAAQ,OAAO,YAChE,cAAc,cACb,sBAAsB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuDhB,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,4BAA4B,cAAc,QAAQ,OAAO,YAClE,cAAc,cACb,eAAe,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4GT,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,gBAAgB,cAAc,QAAQ,OAAO,YACtD,cAAc,cACb,eAAe,OAAO"}
@@ -64,6 +64,24 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
64
64
  * )
65
65
  * }
66
66
  * ```
67
+ *
68
+ * @example
69
+ * The same query, checking `isPending`/`isError` instead of `status` — pick whichever reads better to you:
70
+ * ```tsx
71
+ * import { useQuery } from '@tanstack/preact-query'
72
+ *
73
+ * function Posts() {
74
+ * const { isPending, isError, data, error } = useQuery({
75
+ * queryKey: ['posts'],
76
+ * queryFn: fetchPosts,
77
+ * })
78
+ *
79
+ * if (isPending) return 'Loading...'
80
+ * if (isError) return <span>Error: {error.message}</span>
81
+ *
82
+ * return <>{data.map((post) => <p key={post.id}>{post.title}</p>)}</>
83
+ * }
84
+ * ```
67
85
  */
68
86
  declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): UseQueryResult<TData, TError>;
69
87
  /**
@@ -102,17 +120,22 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
102
120
  * ```
103
121
  *
104
122
  * @example
105
- * A dependent query, only enabled once `postId` is set:
123
+ * A dependent query, only enabled once `postId` is set — use `isLoading`, not `isPending`, so the
124
+ * loading state doesn't show while the query is disabled:
106
125
  * ```tsx
107
126
  * import { useQuery } from '@tanstack/preact-query'
108
127
  *
109
128
  * function Post({ postId }: { postId: number | undefined }) {
110
- * const { data } = useQuery({
129
+ * const { data, isLoading, isError, error } = useQuery({
111
130
  * queryKey: ['post', postId],
112
131
  * queryFn: () => fetchPost(postId!),
113
132
  * enabled: postId != null,
114
133
  * })
115
134
  *
135
+ * if (postId == null) return 'Select a post'
136
+ * if (isLoading) return 'Loading...'
137
+ * if (isError) return <span>Error: {error.message}</span>
138
+ *
116
139
  * return <h1>{data?.title}</h1>
117
140
  * }
118
141
  * ```
@@ -137,6 +160,35 @@ declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData =
137
160
  * return <h1>{data?.title}</h1>
138
161
  * }
139
162
  * ```
163
+ *
164
+ * @example
165
+ * Paginated data, keeping the previous page's data visible while the next page loads:
166
+ * ```tsx
167
+ * import { keepPreviousData, useQuery } from '@tanstack/preact-query'
168
+ * import { useState } from 'preact/hooks'
169
+ *
170
+ * function Posts() {
171
+ * const [page, setPage] = useState(0)
172
+ *
173
+ * const { data, isPlaceholderData } = useQuery({
174
+ * queryKey: ['posts', page],
175
+ * queryFn: () => fetchPosts(page),
176
+ * placeholderData: keepPreviousData,
177
+ * })
178
+ *
179
+ * return (
180
+ * <div>
181
+ * {data?.map((post) => <p key={post.id}>{post.title}</p>)}
182
+ * <button
183
+ * disabled={isPlaceholderData}
184
+ * onClick={() => setPage((old) => old + 1)}
185
+ * >
186
+ * Next Page
187
+ * </button>
188
+ * </div>
189
+ * )
190
+ * }
191
+ * ```
140
192
  */
141
193
  declare function useQuery<TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey>(options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, queryClient?: QueryClient): UseQueryResult<TData, TError>;
142
194
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"useQuery.d.ts","names":[],"sources":["../../src/useQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyCgB,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,0BAA0B,cAAc,QAAQ,OAAO,YAChE,cAAc,cACb,sBAAsB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAqChB,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,4BAA4B,cAAc,QAAQ,OAAO,YAClE,cAAc,cACb,eAAe,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA0ET,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,gBAAgB,cAAc,QAAQ,OAAO,YACtD,cAAc,cACb,eAAe,OAAO"}
1
+ {"version":3,"file":"useQuery.d.ts","names":[],"sources":["../../src/useQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyCgB,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,0BAA0B,cAAc,QAAQ,OAAO,YAChE,cAAc,cACb,sBAAsB,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAuDhB,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,4BAA4B,cAAc,QAAQ,OAAO,YAClE,cAAc,cACb,eAAe,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA4GT,SACd,wBACA,SAAS,cACT,QAAQ,cACR,kBAAkB,WAAW,UAE7B,SAAS,gBAAgB,cAAc,QAAQ,OAAO,YACtD,cAAc,cACb,eAAe,OAAO"}
@@ -1 +1 @@
1
- {"version":3,"file":"useQuery.js","names":[],"sources":["../../src/useQuery.ts"],"sourcesContent":["import { QueryObserver } from '@tanstack/query-core'\nimport type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'\n\nimport type {\n DefinedInitialDataOptions,\n UndefinedInitialDataOptions,\n} from './queryOptions'\nimport type {\n DefinedUseQueryResult,\n UseQueryOptions,\n UseQueryResult,\n} from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * This overload is selected when `initialData` is set, so the resulting `data` is never `undefined`.\n *\n * @see {@link queryOptions} to share these options between `useQuery` and imperative APIs like `queryClient.query`.\n * @param options - The {@link DefinedInitialDataOptions} to use — everything you can pass to `useQuery`, 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 current query result, typed so that `status` is `success` — or `error` if a fetch attempt\n * fails while keeping the existing data (`status` never resolves to `pending` in this overload's type,\n * since `initialData` guarantees data upfront). `isSuccess`/`isError` are derived booleans for convenience.\n *\n * @example\n * ```tsx\n * import { useQuery } from '@tanstack/preact-query'\n *\n * function Posts() {\n * // `data` is `Post[]`, never `undefined`, thanks to `initialData`.\n * const { data } = useQuery({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * initialData: [],\n * })\n *\n * return <>{data.map((post) => <p key={post.id}>{post.title}</p>)}</>\n * }\n * ```\n */\nexport function useQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,\n queryClient?: QueryClient,\n): DefinedUseQueryResult<TData, TError>\n\n/**\n * @see {@link queryOptions} to share these options between `useQuery` and imperative APIs like `queryClient.query`.\n * @param options - The {@link UndefinedInitialDataOptions} to use — everything you can pass to `useQuery`.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The current query result. `status` is `pending` if there is no cached data and no query attempt\n * has finished yet, `error` if the query attempt resulted in an error, or `success` if the query has data to\n * display. `isPending`/`isSuccess`/`isError` are derived booleans for convenience.\n *\n * @example\n * ```tsx\n * import { queryOptions, useQuery } from '@tanstack/preact-query'\n *\n * const postsOptions = queryOptions({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * })\n *\n * function Posts() {\n * const { status, data, error, isFetching } = useQuery(postsOptions)\n *\n * if (status === 'pending') return 'Loading...'\n * if (status === 'error') return <span>Error: {error.message}</span>\n *\n * return (\n * <div>\n * {data.map((post) => (\n * <p key={post.id}>{post.title}</p>\n * ))}\n * <div>{isFetching ? 'Background Updating...' : ' '}</div>\n * </div>\n * )\n * }\n * ```\n */\nexport function useQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,\n queryClient?: QueryClient,\n): UseQueryResult<TData, TError>\n\n/**\n * @see {@link queryOptions} to share these options between `useQuery` and imperative APIs like `queryClient.query`.\n * @param options - The {@link UseQueryOptions} to use — everything you can pass to `useQuery`.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The current query result. `status` is `pending` if there is no cached data and no query attempt\n * has finished yet, `error` if the query attempt resulted in an error, or `success` if the query has data to\n * display. `isPending`/`isSuccess`/`isError` are derived booleans for convenience.\n *\n * @example\n * ```tsx\n * import { queryOptions, useQuery } from '@tanstack/preact-query'\n *\n * const postsOptions = queryOptions({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * })\n *\n * function Posts() {\n * const { status, data, error, isFetching } = useQuery(postsOptions)\n *\n * if (status === 'pending') return 'Loading...'\n * if (status === 'error') return <span>Error: {error.message}</span>\n *\n * return (\n * <div>\n * {data.map((post) => (\n * <p key={post.id}>{post.title}</p>\n * ))}\n * <div>{isFetching ? 'Background Updating...' : ' '}</div>\n * </div>\n * )\n * }\n * ```\n *\n * @example\n * A dependent query, only enabled once `postId` is set:\n * ```tsx\n * import { useQuery } from '@tanstack/preact-query'\n *\n * function Post({ postId }: { postId: number | undefined }) {\n * const { data } = useQuery({\n * queryKey: ['post', postId],\n * queryFn: () => fetchPost(postId!),\n * enabled: postId != null,\n * })\n *\n * return <h1>{data?.title}</h1>\n * }\n * ```\n *\n * @example\n * Seeding a detail query from an already-cached list, to skip the loading state:\n * ```tsx\n * import { useQuery, useQueryClient } from '@tanstack/preact-query'\n *\n * function Post({ postId }: { postId: number }) {\n * const queryClient = useQueryClient()\n *\n * const { data } = useQuery({\n * queryKey: ['post', postId],\n * queryFn: () => fetchPost(postId),\n * initialData: () =>\n * queryClient\n * .getQueryData<Array<Post>>(['posts'])\n * ?.find((post) => post.id === postId),\n * })\n *\n * return <h1>{data?.title}</h1>\n * }\n * ```\n */\nexport function useQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,\n queryClient?: QueryClient,\n): UseQueryResult<TData, TError>\n\nexport function useQuery(options: UseQueryOptions, queryClient?: QueryClient) {\n return useBaseQuery(options, QueryObserver, queryClient)\n}\n"],"mappings":";;;AAkLA,SAAgB,SAAS,SAA0B,aAA2B;CAC5E,OAAO,aAAa,SAAS,eAAe,WAAW;AACzD"}
1
+ {"version":3,"file":"useQuery.js","names":[],"sources":["../../src/useQuery.ts"],"sourcesContent":["import { QueryObserver } from '@tanstack/query-core'\nimport type { DefaultError, QueryClient, QueryKey } from '@tanstack/query-core'\n\nimport type {\n DefinedInitialDataOptions,\n UndefinedInitialDataOptions,\n} from './queryOptions'\nimport type {\n DefinedUseQueryResult,\n UseQueryOptions,\n UseQueryResult,\n} from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * This overload is selected when `initialData` is set, so the resulting `data` is never `undefined`.\n *\n * @see {@link queryOptions} to share these options between `useQuery` and imperative APIs like `queryClient.query`.\n * @param options - The {@link DefinedInitialDataOptions} to use — everything you can pass to `useQuery`, 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 current query result, typed so that `status` is `success` — or `error` if a fetch attempt\n * fails while keeping the existing data (`status` never resolves to `pending` in this overload's type,\n * since `initialData` guarantees data upfront). `isSuccess`/`isError` are derived booleans for convenience.\n *\n * @example\n * ```tsx\n * import { useQuery } from '@tanstack/preact-query'\n *\n * function Posts() {\n * // `data` is `Post[]`, never `undefined`, thanks to `initialData`.\n * const { data } = useQuery({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * initialData: [],\n * })\n *\n * return <>{data.map((post) => <p key={post.id}>{post.title}</p>)}</>\n * }\n * ```\n */\nexport function useQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,\n queryClient?: QueryClient,\n): DefinedUseQueryResult<TData, TError>\n\n/**\n * @see {@link queryOptions} to share these options between `useQuery` and imperative APIs like `queryClient.query`.\n * @param options - The {@link UndefinedInitialDataOptions} to use — everything you can pass to `useQuery`.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The current query result. `status` is `pending` if there is no cached data and no query attempt\n * has finished yet, `error` if the query attempt resulted in an error, or `success` if the query has data to\n * display. `isPending`/`isSuccess`/`isError` are derived booleans for convenience.\n *\n * @example\n * ```tsx\n * import { queryOptions, useQuery } from '@tanstack/preact-query'\n *\n * const postsOptions = queryOptions({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * })\n *\n * function Posts() {\n * const { status, data, error, isFetching } = useQuery(postsOptions)\n *\n * if (status === 'pending') return 'Loading...'\n * if (status === 'error') return <span>Error: {error.message}</span>\n *\n * return (\n * <div>\n * {data.map((post) => (\n * <p key={post.id}>{post.title}</p>\n * ))}\n * <div>{isFetching ? 'Background Updating...' : ' '}</div>\n * </div>\n * )\n * }\n * ```\n *\n * @example\n * The same query, checking `isPending`/`isError` instead of `status` — pick whichever reads better to you:\n * ```tsx\n * import { useQuery } from '@tanstack/preact-query'\n *\n * function Posts() {\n * const { isPending, isError, data, error } = useQuery({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * })\n *\n * if (isPending) return 'Loading...'\n * if (isError) return <span>Error: {error.message}</span>\n *\n * return <>{data.map((post) => <p key={post.id}>{post.title}</p>)}</>\n * }\n * ```\n */\nexport function useQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>,\n queryClient?: QueryClient,\n): UseQueryResult<TData, TError>\n\n/**\n * @see {@link queryOptions} to share these options between `useQuery` and imperative APIs like `queryClient.query`.\n * @param options - The {@link UseQueryOptions} to use — everything you can pass to `useQuery`.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The current query result. `status` is `pending` if there is no cached data and no query attempt\n * has finished yet, `error` if the query attempt resulted in an error, or `success` if the query has data to\n * display. `isPending`/`isSuccess`/`isError` are derived booleans for convenience.\n *\n * @example\n * ```tsx\n * import { queryOptions, useQuery } from '@tanstack/preact-query'\n *\n * const postsOptions = queryOptions({\n * queryKey: ['posts'],\n * queryFn: fetchPosts,\n * })\n *\n * function Posts() {\n * const { status, data, error, isFetching } = useQuery(postsOptions)\n *\n * if (status === 'pending') return 'Loading...'\n * if (status === 'error') return <span>Error: {error.message}</span>\n *\n * return (\n * <div>\n * {data.map((post) => (\n * <p key={post.id}>{post.title}</p>\n * ))}\n * <div>{isFetching ? 'Background Updating...' : ' '}</div>\n * </div>\n * )\n * }\n * ```\n *\n * @example\n * A dependent query, only enabled once `postId` is set — use `isLoading`, not `isPending`, so the\n * loading state doesn't show while the query is disabled:\n * ```tsx\n * import { useQuery } from '@tanstack/preact-query'\n *\n * function Post({ postId }: { postId: number | undefined }) {\n * const { data, isLoading, isError, error } = useQuery({\n * queryKey: ['post', postId],\n * queryFn: () => fetchPost(postId!),\n * enabled: postId != null,\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 <h1>{data?.title}</h1>\n * }\n * ```\n *\n * @example\n * Seeding a detail query from an already-cached list, to skip the loading state:\n * ```tsx\n * import { useQuery, useQueryClient } from '@tanstack/preact-query'\n *\n * function Post({ postId }: { postId: number }) {\n * const queryClient = useQueryClient()\n *\n * const { data } = useQuery({\n * queryKey: ['post', postId],\n * queryFn: () => fetchPost(postId),\n * initialData: () =>\n * queryClient\n * .getQueryData<Array<Post>>(['posts'])\n * ?.find((post) => post.id === postId),\n * })\n *\n * return <h1>{data?.title}</h1>\n * }\n * ```\n *\n * @example\n * Paginated data, keeping the previous page's data visible while the next page loads:\n * ```tsx\n * import { keepPreviousData, useQuery } from '@tanstack/preact-query'\n * import { useState } from 'preact/hooks'\n *\n * function Posts() {\n * const [page, setPage] = useState(0)\n *\n * const { data, isPlaceholderData } = useQuery({\n * queryKey: ['posts', page],\n * queryFn: () => fetchPosts(page),\n * placeholderData: keepPreviousData,\n * })\n *\n * return (\n * <div>\n * {data?.map((post) => <p key={post.id}>{post.title}</p>)}\n * <button\n * disabled={isPlaceholderData}\n * onClick={() => setPage((old) => old + 1)}\n * >\n * Next Page\n * </button>\n * </div>\n * )\n * }\n * ```\n */\nexport function useQuery<\n TQueryFnData = unknown,\n TError = DefaultError,\n TData = TQueryFnData,\n TQueryKey extends QueryKey = QueryKey,\n>(\n options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,\n queryClient?: QueryClient,\n): UseQueryResult<TData, TError>\n\nexport function useQuery(options: UseQueryOptions, queryClient?: QueryClient) {\n return useBaseQuery(options, QueryObserver, queryClient)\n}\n"],"mappings":";;;AAsOA,SAAgB,SAAS,SAA0B,aAA2B;CAC5E,OAAO,aAAa,SAAS,eAAe,WAAW;AACzD"}
@@ -23,20 +23,28 @@ let _tanstack_query_core = require("@tanstack/query-core");
23
23
  *
24
24
  * function Projects() {
25
25
  * // `data` is guaranteed to be defined here — no `isPending` check needed.
26
- * const { data, fetchNextPage, hasNextPage } = useSuspenseInfiniteQuery({
27
- * queryKey: ['projects'],
28
- * queryFn: ({ pageParam }) => fetchProjects(pageParam),
29
- * initialPageParam: 0,
30
- * getNextPageParam: (lastPage) => lastPage.nextId,
31
- * })
26
+ * const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
27
+ * useSuspenseInfiniteQuery({
28
+ * queryKey: ['projects'],
29
+ * queryFn: ({ pageParam }) => fetchProjects(pageParam),
30
+ * initialPageParam: 0,
31
+ * getNextPageParam: (lastPage) => lastPage.nextId,
32
+ * })
32
33
  *
33
34
  * return (
34
35
  * <div>
35
36
  * {data.pages.map((page) =>
36
37
  * page.projects.map((project) => <p key={project.id}>{project.name}</p>),
37
38
  * )}
38
- * <button onClick={() => fetchNextPage()} disabled={!hasNextPage}>
39
- * Load More
39
+ * <button
40
+ * onClick={() => fetchNextPage()}
41
+ * disabled={!hasNextPage || isFetching}
42
+ * >
43
+ * {isFetchingNextPage
44
+ * ? 'Loading more...'
45
+ * : hasNextPage
46
+ * ? 'Load More'
47
+ * : 'Nothing more to load'}
40
48
  * </button>
41
49
  * </div>
42
50
  * )
@@ -1 +1 @@
1
- {"version":3,"file":"useSuspenseInfiniteQuery.cjs","names":["skipToken","useBaseQuery","defaultThrowOnError","InfiniteQueryObserver"],"sources":["../../src/useSuspenseInfiniteQuery.ts"],"sourcesContent":["import { InfiniteQueryObserver, skipToken } from '@tanstack/query-core'\nimport type {\n DefaultError,\n InfiniteData,\n InfiniteQueryObserverSuccessResult,\n QueryClient,\n QueryKey,\n QueryObserver,\n} from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type {\n UseSuspenseInfiniteQueryOptions,\n UseSuspenseInfiniteQueryResult,\n} from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * The options for `useSuspenseInfiniteQuery` are the same as for `useInfiniteQuery`, except for `throwOnError`,\n * `enabled`, and `placeholderData`.\n *\n * Caveat: cancellation does not work.\n *\n * @param options - The {@link UseSuspenseInfiniteQueryOptions} to use — the same options as `useInfiniteQuery`, minus the ones listed above.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The same object as `useInfiniteQuery`, except that `data` is guaranteed to be defined,\n * `isPlaceholderData` is missing, and `status` is either `success` or `error` (with the derived flags set\n * accordingly).\n *\n * @example\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n * // `data` is guaranteed to be defined here — no `isPending` check needed.\n * const { data, fetchNextPage, hasNextPage } = useSuspenseInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * })\n *\n * return (\n * <div>\n * {data.pages.map((page) =>\n * page.projects.map((project) => <p key={project.id}>{project.name}</p>),\n * )}\n * <button onClick={() => fetchNextPage()} disabled={!hasNextPage}>\n * Load More\n * </button>\n * </div>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading projects...</h1>}>\n * <Projects />\n * </Suspense>\n * )\n * }\n * ```\n */\nexport function useSuspenseInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: UseSuspenseInfiniteQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n queryClient?: QueryClient,\n): UseSuspenseInfiniteQueryResult<TData, TError> {\n if (process.env.NODE_ENV !== 'production') {\n if ((options.queryFn as any) === skipToken) {\n console.error('skipToken is not allowed for useSuspenseInfiniteQuery')\n }\n }\n\n return useBaseQuery(\n {\n ...options,\n enabled: true,\n suspense: true,\n throwOnError: defaultThrowOnError,\n placeholderData: undefined,\n },\n InfiniteQueryObserver as typeof QueryObserver,\n queryClient,\n ) as InfiniteQueryObserverSuccessResult<TData, TError>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,SAAgB,yBAOd,SAOA,aAC+C;CAC/C,IAAI,QAAQ,IAAI,aAAa,cACtB;MAAA,QAAQ,YAAoBA,qBAAAA,WAC/B,QAAQ,MAAM,uDAAuD;CAAA;CAIzE,OAAOC,qBAAAA,aACL;EACE,GAAG;EACH,SAAS;EACT,UAAU;EACV,cAAcC,iBAAAA;EACd,iBAAiB,KAAA;CACnB,GACAC,qBAAAA,uBACA,WACF;AACF"}
1
+ {"version":3,"file":"useSuspenseInfiniteQuery.cjs","names":["skipToken","useBaseQuery","defaultThrowOnError","InfiniteQueryObserver"],"sources":["../../src/useSuspenseInfiniteQuery.ts"],"sourcesContent":["import { InfiniteQueryObserver, skipToken } from '@tanstack/query-core'\nimport type {\n DefaultError,\n InfiniteData,\n InfiniteQueryObserverSuccessResult,\n QueryClient,\n QueryKey,\n QueryObserver,\n} from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type {\n UseSuspenseInfiniteQueryOptions,\n UseSuspenseInfiniteQueryResult,\n} from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * The options for `useSuspenseInfiniteQuery` are the same as for `useInfiniteQuery`, except for `throwOnError`,\n * `enabled`, and `placeholderData`.\n *\n * Caveat: cancellation does not work.\n *\n * @param options - The {@link UseSuspenseInfiniteQueryOptions} to use — the same options as `useInfiniteQuery`, minus the ones listed above.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The same object as `useInfiniteQuery`, except that `data` is guaranteed to be defined,\n * `isPlaceholderData` is missing, and `status` is either `success` or `error` (with the derived flags set\n * accordingly).\n *\n * @example\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n * // `data` is guaranteed to be defined here — no `isPending` check needed.\n * const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =\n * useSuspenseInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * })\n *\n * return (\n * <div>\n * {data.pages.map((page) =>\n * page.projects.map((project) => <p key={project.id}>{project.name}</p>),\n * )}\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 * </div>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading projects...</h1>}>\n * <Projects />\n * </Suspense>\n * )\n * }\n * ```\n */\nexport function useSuspenseInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: UseSuspenseInfiniteQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n queryClient?: QueryClient,\n): UseSuspenseInfiniteQueryResult<TData, TError> {\n if (process.env.NODE_ENV !== 'production') {\n if ((options.queryFn as any) === skipToken) {\n console.error('skipToken is not allowed for useSuspenseInfiniteQuery')\n }\n }\n\n return useBaseQuery(\n {\n ...options,\n enabled: true,\n suspense: true,\n throwOnError: defaultThrowOnError,\n placeholderData: undefined,\n },\n InfiniteQueryObserver as typeof QueryObserver,\n queryClient,\n ) as InfiniteQueryObserverSuccessResult<TData, TError>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA,SAAgB,yBAOd,SAOA,aAC+C;CAC/C,IAAI,QAAQ,IAAI,aAAa,cACtB;MAAA,QAAQ,YAAoBA,qBAAAA,WAC/B,QAAQ,MAAM,uDAAuD;CAAA;CAIzE,OAAOC,qBAAAA,aACL;EACE,GAAG;EACH,SAAS;EACT,UAAU;EACV,cAAcC,iBAAAA;EACd,iBAAiB,KAAA;CACnB,GACAC,qBAAAA,uBACA,WACF;AACF"}
@@ -21,20 +21,28 @@ import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/que
21
21
  *
22
22
  * function Projects() {
23
23
  * // `data` is guaranteed to be defined here — no `isPending` check needed.
24
- * const { data, fetchNextPage, hasNextPage } = useSuspenseInfiniteQuery({
25
- * queryKey: ['projects'],
26
- * queryFn: ({ pageParam }) => fetchProjects(pageParam),
27
- * initialPageParam: 0,
28
- * getNextPageParam: (lastPage) => lastPage.nextId,
29
- * })
24
+ * const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
25
+ * useSuspenseInfiniteQuery({
26
+ * queryKey: ['projects'],
27
+ * queryFn: ({ pageParam }) => fetchProjects(pageParam),
28
+ * initialPageParam: 0,
29
+ * getNextPageParam: (lastPage) => lastPage.nextId,
30
+ * })
30
31
  *
31
32
  * return (
32
33
  * <div>
33
34
  * {data.pages.map((page) =>
34
35
  * page.projects.map((project) => <p key={project.id}>{project.name}</p>),
35
36
  * )}
36
- * <button onClick={() => fetchNextPage()} disabled={!hasNextPage}>
37
- * Load More
37
+ * <button
38
+ * onClick={() => fetchNextPage()}
39
+ * disabled={!hasNextPage || isFetching}
40
+ * >
41
+ * {isFetchingNextPage
42
+ * ? 'Loading more...'
43
+ * : hasNextPage
44
+ * ? 'Load More'
45
+ * : 'Nothing more to load'}
38
46
  * </button>
39
47
  * </div>
40
48
  * )
@@ -1 +1 @@
1
- {"version":3,"file":"useSuspenseInfiniteQuery.d.cts","names":[],"sources":["../../src/useSuspenseInfiniteQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiEgB,yBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,gCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,+BAA+B,OAAO"}
1
+ {"version":3,"file":"useSuspenseInfiniteQuery.d.cts","names":[],"sources":["../../src/useSuspenseInfiniteQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyEgB,yBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,gCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,+BAA+B,OAAO"}
@@ -21,20 +21,28 @@ import { DefaultError, InfiniteData, QueryClient, QueryKey } from "@tanstack/que
21
21
  *
22
22
  * function Projects() {
23
23
  * // `data` is guaranteed to be defined here — no `isPending` check needed.
24
- * const { data, fetchNextPage, hasNextPage } = useSuspenseInfiniteQuery({
25
- * queryKey: ['projects'],
26
- * queryFn: ({ pageParam }) => fetchProjects(pageParam),
27
- * initialPageParam: 0,
28
- * getNextPageParam: (lastPage) => lastPage.nextId,
29
- * })
24
+ * const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
25
+ * useSuspenseInfiniteQuery({
26
+ * queryKey: ['projects'],
27
+ * queryFn: ({ pageParam }) => fetchProjects(pageParam),
28
+ * initialPageParam: 0,
29
+ * getNextPageParam: (lastPage) => lastPage.nextId,
30
+ * })
30
31
  *
31
32
  * return (
32
33
  * <div>
33
34
  * {data.pages.map((page) =>
34
35
  * page.projects.map((project) => <p key={project.id}>{project.name}</p>),
35
36
  * )}
36
- * <button onClick={() => fetchNextPage()} disabled={!hasNextPage}>
37
- * Load More
37
+ * <button
38
+ * onClick={() => fetchNextPage()}
39
+ * disabled={!hasNextPage || isFetching}
40
+ * >
41
+ * {isFetchingNextPage
42
+ * ? 'Loading more...'
43
+ * : hasNextPage
44
+ * ? 'Load More'
45
+ * : 'Nothing more to load'}
38
46
  * </button>
39
47
  * </div>
40
48
  * )
@@ -1 +1 @@
1
- {"version":3,"file":"useSuspenseInfiniteQuery.d.ts","names":[],"sources":["../../src/useSuspenseInfiniteQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiEgB,yBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,gCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,+BAA+B,OAAO"}
1
+ {"version":3,"file":"useSuspenseInfiniteQuery.d.ts","names":[],"sources":["../../src/useSuspenseInfiniteQuery.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyEgB,yBACd,cACA,SAAS,cACT,QAAQ,aAAa,eACrB,kBAAkB,WAAW,UAC7B,sBAEA,SAAS,gCACP,cACA,QACA,OACA,WACA,aAEF,cAAc,cACb,+BAA+B,OAAO"}
@@ -22,20 +22,28 @@ import { InfiniteQueryObserver, skipToken } from "@tanstack/query-core";
22
22
  *
23
23
  * function Projects() {
24
24
  * // `data` is guaranteed to be defined here — no `isPending` check needed.
25
- * const { data, fetchNextPage, hasNextPage } = useSuspenseInfiniteQuery({
26
- * queryKey: ['projects'],
27
- * queryFn: ({ pageParam }) => fetchProjects(pageParam),
28
- * initialPageParam: 0,
29
- * getNextPageParam: (lastPage) => lastPage.nextId,
30
- * })
25
+ * const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
26
+ * useSuspenseInfiniteQuery({
27
+ * queryKey: ['projects'],
28
+ * queryFn: ({ pageParam }) => fetchProjects(pageParam),
29
+ * initialPageParam: 0,
30
+ * getNextPageParam: (lastPage) => lastPage.nextId,
31
+ * })
31
32
  *
32
33
  * return (
33
34
  * <div>
34
35
  * {data.pages.map((page) =>
35
36
  * page.projects.map((project) => <p key={project.id}>{project.name}</p>),
36
37
  * )}
37
- * <button onClick={() => fetchNextPage()} disabled={!hasNextPage}>
38
- * Load More
38
+ * <button
39
+ * onClick={() => fetchNextPage()}
40
+ * disabled={!hasNextPage || isFetching}
41
+ * >
42
+ * {isFetchingNextPage
43
+ * ? 'Loading more...'
44
+ * : hasNextPage
45
+ * ? 'Load More'
46
+ * : 'Nothing more to load'}
39
47
  * </button>
40
48
  * </div>
41
49
  * )
@@ -1 +1 @@
1
- {"version":3,"file":"useSuspenseInfiniteQuery.js","names":[],"sources":["../../src/useSuspenseInfiniteQuery.ts"],"sourcesContent":["import { InfiniteQueryObserver, skipToken } from '@tanstack/query-core'\nimport type {\n DefaultError,\n InfiniteData,\n InfiniteQueryObserverSuccessResult,\n QueryClient,\n QueryKey,\n QueryObserver,\n} from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type {\n UseSuspenseInfiniteQueryOptions,\n UseSuspenseInfiniteQueryResult,\n} from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * The options for `useSuspenseInfiniteQuery` are the same as for `useInfiniteQuery`, except for `throwOnError`,\n * `enabled`, and `placeholderData`.\n *\n * Caveat: cancellation does not work.\n *\n * @param options - The {@link UseSuspenseInfiniteQueryOptions} to use — the same options as `useInfiniteQuery`, minus the ones listed above.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The same object as `useInfiniteQuery`, except that `data` is guaranteed to be defined,\n * `isPlaceholderData` is missing, and `status` is either `success` or `error` (with the derived flags set\n * accordingly).\n *\n * @example\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n * // `data` is guaranteed to be defined here — no `isPending` check needed.\n * const { data, fetchNextPage, hasNextPage } = useSuspenseInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * })\n *\n * return (\n * <div>\n * {data.pages.map((page) =>\n * page.projects.map((project) => <p key={project.id}>{project.name}</p>),\n * )}\n * <button onClick={() => fetchNextPage()} disabled={!hasNextPage}>\n * Load More\n * </button>\n * </div>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading projects...</h1>}>\n * <Projects />\n * </Suspense>\n * )\n * }\n * ```\n */\nexport function useSuspenseInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: UseSuspenseInfiniteQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n queryClient?: QueryClient,\n): UseSuspenseInfiniteQueryResult<TData, TError> {\n if (process.env.NODE_ENV !== 'production') {\n if ((options.queryFn as any) === skipToken) {\n console.error('skipToken is not allowed for useSuspenseInfiniteQuery')\n }\n }\n\n return useBaseQuery(\n {\n ...options,\n enabled: true,\n suspense: true,\n throwOnError: defaultThrowOnError,\n placeholderData: undefined,\n },\n InfiniteQueryObserver as typeof QueryObserver,\n queryClient,\n ) as InfiniteQueryObserverSuccessResult<TData, TError>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,SAAgB,yBAOd,SAOA,aAC+C;CAC/C,IAAI,QAAQ,IAAI,aAAa,cACtB;MAAA,QAAQ,YAAoB,WAC/B,QAAQ,MAAM,uDAAuD;CAAA;CAIzE,OAAO,aACL;EACE,GAAG;EACH,SAAS;EACT,UAAU;EACV,cAAc;EACd,iBAAiB,KAAA;CACnB,GACA,uBACA,WACF;AACF"}
1
+ {"version":3,"file":"useSuspenseInfiniteQuery.js","names":[],"sources":["../../src/useSuspenseInfiniteQuery.ts"],"sourcesContent":["import { InfiniteQueryObserver, skipToken } from '@tanstack/query-core'\nimport type {\n DefaultError,\n InfiniteData,\n InfiniteQueryObserverSuccessResult,\n QueryClient,\n QueryKey,\n QueryObserver,\n} from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type {\n UseSuspenseInfiniteQueryOptions,\n UseSuspenseInfiniteQueryResult,\n} from './types'\nimport { useBaseQuery } from './useBaseQuery'\n\n/**\n * The options for `useSuspenseInfiniteQuery` are the same as for `useInfiniteQuery`, except for `throwOnError`,\n * `enabled`, and `placeholderData`.\n *\n * Caveat: cancellation does not work.\n *\n * @param options - The {@link UseSuspenseInfiniteQueryOptions} to use — the same options as `useInfiniteQuery`, minus the ones listed above.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns The same object as `useInfiniteQuery`, except that `data` is guaranteed to be defined,\n * `isPlaceholderData` is missing, and `status` is either `success` or `error` (with the derived flags set\n * accordingly).\n *\n * @example\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseInfiniteQuery } from '@tanstack/preact-query'\n *\n * function Projects() {\n * // `data` is guaranteed to be defined here — no `isPending` check needed.\n * const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =\n * useSuspenseInfiniteQuery({\n * queryKey: ['projects'],\n * queryFn: ({ pageParam }) => fetchProjects(pageParam),\n * initialPageParam: 0,\n * getNextPageParam: (lastPage) => lastPage.nextId,\n * })\n *\n * return (\n * <div>\n * {data.pages.map((page) =>\n * page.projects.map((project) => <p key={project.id}>{project.name}</p>),\n * )}\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 * </div>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading projects...</h1>}>\n * <Projects />\n * </Suspense>\n * )\n * }\n * ```\n */\nexport function useSuspenseInfiniteQuery<\n TQueryFnData,\n TError = DefaultError,\n TData = InfiniteData<TQueryFnData>,\n TQueryKey extends QueryKey = QueryKey,\n TPageParam = unknown,\n>(\n options: UseSuspenseInfiniteQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey,\n TPageParam\n >,\n queryClient?: QueryClient,\n): UseSuspenseInfiniteQueryResult<TData, TError> {\n if (process.env.NODE_ENV !== 'production') {\n if ((options.queryFn as any) === skipToken) {\n console.error('skipToken is not allowed for useSuspenseInfiniteQuery')\n }\n }\n\n return useBaseQuery(\n {\n ...options,\n enabled: true,\n suspense: true,\n throwOnError: defaultThrowOnError,\n placeholderData: undefined,\n },\n InfiniteQueryObserver as typeof QueryObserver,\n queryClient,\n ) as InfiniteQueryObserverSuccessResult<TData, TError>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA,SAAgB,yBAOd,SAOA,aAC+C;CAC/C,IAAI,QAAQ,IAAI,aAAa,cACtB;MAAA,QAAQ,YAAoB,WAC/B,QAAQ,MAAM,uDAAuD;CAAA;CAIzE,OAAO,aACL;EACE,GAAG;EACH,SAAS;EACT,UAAU;EACV,cAAc;EACd,iBAAiB,KAAA;CACnB,GACA,uBACA,WACF;AACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"useSuspenseQueries.cjs","names":["useQueries","skipToken","defaultThrowOnError"],"sources":["../../src/useSuspenseQueries.ts"],"sourcesContent":["import { skipToken } from '@tanstack/query-core'\nimport type {\n DefaultError,\n QueryClient,\n QueryFunction,\n ThrowOnError,\n} from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'\nimport { useQueries } from './useQueries'\n\n// Avoid TS depth-limit error in case of large array literal\ntype MAXIMUM_DEPTH = 20\n\n// Widen the type of the symbol to enable type inference even if skipToken is not immutable.\ntype SkipTokenForUseQueries = symbol\n\ntype GetUseSuspenseQueryOptions<T> =\n // Part 1: responsible for applying explicit type parameter to function arguments, if object { queryFnData: TQueryFnData, error: TError, data: TData }\n T extends {\n queryFnData: infer TQueryFnData\n error?: infer TError\n data: infer TData\n }\n ? UseSuspenseQueryOptions<TQueryFnData, TError, TData>\n : T extends { queryFnData: infer TQueryFnData; error?: infer TError }\n ? UseSuspenseQueryOptions<TQueryFnData, TError>\n : T extends { data: infer TData; error?: infer TError }\n ? UseSuspenseQueryOptions<unknown, TError, TData>\n : // Part 2: responsible for applying explicit type parameter to function arguments, if tuple [TQueryFnData, TError, TData]\n T extends [infer TQueryFnData, infer TError, infer TData]\n ? UseSuspenseQueryOptions<TQueryFnData, TError, TData>\n : T extends [infer TQueryFnData, infer TError]\n ? UseSuspenseQueryOptions<TQueryFnData, TError>\n : T extends [infer TQueryFnData]\n ? UseSuspenseQueryOptions<TQueryFnData>\n : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided\n T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, infer TQueryKey>\n | SkipTokenForUseQueries\n select?: (data: any) => infer TData\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey\n >\n : T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, infer TQueryKey>\n | SkipTokenForUseQueries\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryOptions<\n TQueryFnData,\n TError,\n TQueryFnData,\n TQueryKey\n >\n : // Fallback\n UseSuspenseQueryOptions\n\ntype GetUseSuspenseQueryResult<T> =\n // Part 1: responsible for mapping explicit type parameter to function result, if object\n T extends { queryFnData: any; error?: infer TError; data: infer TData }\n ? UseSuspenseQueryResult<TData, TError>\n : T extends { queryFnData: infer TQueryFnData; error?: infer TError }\n ? UseSuspenseQueryResult<TQueryFnData, TError>\n : T extends { data: infer TData; error?: infer TError }\n ? UseSuspenseQueryResult<TData, TError>\n : // Part 2: responsible for mapping explicit type parameter to function result, if tuple\n T extends [any, infer TError, infer TData]\n ? UseSuspenseQueryResult<TData, TError>\n : T extends [infer TQueryFnData, infer TError]\n ? UseSuspenseQueryResult<TQueryFnData, TError>\n : T extends [infer TQueryFnData]\n ? UseSuspenseQueryResult<TQueryFnData>\n : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided\n T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, any>\n | SkipTokenForUseQueries\n select?: (data: any) => infer TData\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryResult<\n unknown extends TData ? TQueryFnData : TData,\n unknown extends TError ? DefaultError : TError\n >\n : T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, any>\n | SkipTokenForUseQueries\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryResult<\n TQueryFnData,\n unknown extends TError ? DefaultError : TError\n >\n : // Fallback\n UseSuspenseQueryResult\n\n/**\n * The `queries` array accepted by `useSuspenseQueries`. Recursively unwraps each tuple element so every\n * entry's `queryFn`/`select` are inferred individually, up to 20 elements. An opaque array (e.g. `unknown[]`)\n * is returned as-is; a non-tuple array of a known element type, or a tuple past 20 elements, falls back to a\n * single homogeneous {@link UseSuspenseQueryOptions} type.\n *\n * @template T - The type of the `queries` array as written at the call site.\n * @template TResults - The internal accumulator that this type builds during recursion. It is not meant\n * to be set explicitly.\n * @template TDepth - The internal recursion-depth counter, checked against the 20-element limit. It is not\n * meant to be set explicitly.\n */\nexport type SuspenseQueriesOptions<\n T extends Array<any>,\n TResults extends Array<any> = [],\n TDepth extends ReadonlyArray<number> = [],\n> = TDepth['length'] extends MAXIMUM_DEPTH\n ? Array<UseSuspenseQueryOptions>\n : T extends []\n ? []\n : T extends [infer Head]\n ? [...TResults, GetUseSuspenseQueryOptions<Head>]\n : T extends [infer Head, ...infer Tails]\n ? SuspenseQueriesOptions<\n [...Tails],\n [...TResults, GetUseSuspenseQueryOptions<Head>],\n [...TDepth, 1]\n >\n : Array<unknown> extends T\n ? T\n : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogeneous type!\n // use this to infer the param types in the case of Array.map() argument\n T extends Array<\n UseSuspenseQueryOptions<\n infer TQueryFnData,\n infer TError,\n infer TData,\n infer TQueryKey\n >\n >\n ? Array<\n UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>\n >\n : // Fallback\n Array<UseSuspenseQueryOptions>\n\n/**\n * The result type returned by `useSuspenseQueries`, when no `combine` is provided. Mirrors\n * {@link SuspenseQueriesOptions}: each tuple element's result type is inferred individually, up to 20 elements.\n * A non-tuple array is mapped per-element instead, still inferring each entry individually; only past 20\n * elements does this fall back to a single homogeneous {@link UseSuspenseQueryResult} type.\n *\n * @template T - The type of the `queries` array, as inferred by {@link SuspenseQueriesOptions}.\n * @template TResults - The internal accumulator that this type builds during recursion. It is not meant\n * to be set explicitly.\n * @template TDepth - The internal recursion-depth counter, checked against the 20-element limit. It is not\n * meant to be set explicitly.\n */\nexport type SuspenseQueriesResults<\n T extends Array<any>,\n TResults extends Array<any> = [],\n TDepth extends ReadonlyArray<number> = [],\n> = TDepth['length'] extends MAXIMUM_DEPTH\n ? Array<UseSuspenseQueryResult>\n : T extends []\n ? []\n : T extends [infer Head]\n ? [...TResults, GetUseSuspenseQueryResult<Head>]\n : T extends [infer Head, ...infer Tails]\n ? SuspenseQueriesResults<\n [...Tails],\n [...TResults, GetUseSuspenseQueryResult<Head>],\n [...TDepth, 1]\n >\n : { [K in keyof T]: GetUseSuspenseQueryResult<T[K]> }\n\n/**\n * The options for `useSuspenseQueries` are the same as for `useQueries`, except that each `query` can't have\n * `throwOnError`, `enabled`, or `placeholderData`.\n *\n * @param options - The `queries` array to run in Suspense, and an optional `combine` function.\n * @param queryClient - Use this to provide a custom `QueryClient`. Otherwise, the one from the nearest context\n * will be used.\n * @returns The same structure as `useQueries`, except that for each `query`, `data` is guaranteed to be\n * defined, `isPlaceholderData` is missing, and `status` is either `success` or `error` (with the derived\n * flags set accordingly).\n *\n * Caveat: the component will only re-mount after all queries have finished loading. Hence, if a query has gone\n * stale in the time it took for all the queries to complete, it will be fetched again at re-mount. To avoid\n * this, make sure to set a high enough `staleTime`. Cancellation does not work.\n *\n * @example\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQueries } from '@tanstack/preact-query'\n *\n * function Posts({ ids }: { ids: Array<number> }) {\n * // Every result is guaranteed to be defined — no per-query `isPending` check needed.\n * const results = useSuspenseQueries({\n * queries: ids.map((id) => ({\n * queryKey: ['post', id],\n * queryFn: () => fetchPost(id),\n * })),\n * })\n *\n * return (\n * <ul>\n * {results.map((result) => (\n * <li key={result.data.id}>{result.data.title}</li>\n * ))}\n * </ul>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading posts...</h1>}>\n * <Posts ids={[1, 2, 3]} />\n * </Suspense>\n * )\n * }\n * ```\n */\nexport function useSuspenseQueries<\n T extends Array<any>,\n TCombinedResult = SuspenseQueriesResults<T>,\n>(\n options: {\n /**\n * An array with query option objects identical to `useSuspenseQuery`.\n */\n queries:\n | readonly [...SuspenseQueriesOptions<T>]\n | readonly [...{ [K in keyof T]: GetUseSuspenseQueryOptions<T[K]> }]\n /**\n * Use this to combine the results of the queries into a single value. The result will be structurally\n * shared to be as referentially stable as possible.\n */\n combine?: (result: SuspenseQueriesResults<T>) => TCombinedResult\n },\n queryClient?: QueryClient,\n): TCombinedResult\n\n/**\n * The options for `useSuspenseQueries` are the same as for `useQueries`, except that each `query` can't have\n * `throwOnError`, `enabled`, or `placeholderData`.\n *\n * @param options - The `queries` array to run in Suspense, and an optional `combine` function.\n * @param queryClient - Use this to provide a custom `QueryClient`. Otherwise, the one from the nearest context\n * will be used.\n * @returns The same structure as `useQueries`, except that for each `query`, `data` is guaranteed to be\n * defined, `isPlaceholderData` is missing, and `status` is either `success` or `error` (with the derived\n * flags set accordingly).\n *\n * Caveat: the component will only re-mount after all queries have finished loading. Hence, if a query has gone\n * stale in the time it took for all the queries to complete, it will be fetched again at re-mount. To avoid\n * this, make sure to set a high enough `staleTime`. Cancellation does not work.\n *\n * @example\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQueries } from '@tanstack/preact-query'\n *\n * function Posts({ ids }: { ids: Array<number> }) {\n * // Every result is guaranteed to be defined — no per-query `isPending` check needed.\n * const results = useSuspenseQueries({\n * queries: ids.map((id) => ({\n * queryKey: ['post', id],\n * queryFn: () => fetchPost(id),\n * })),\n * })\n *\n * return (\n * <ul>\n * {results.map((result) => (\n * <li key={result.data.id}>{result.data.title}</li>\n * ))}\n * </ul>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading posts...</h1>}>\n * <Posts ids={[1, 2, 3]} />\n * </Suspense>\n * )\n * }\n * ```\n */\nexport function useSuspenseQueries<\n T extends Array<any>,\n TCombinedResult = SuspenseQueriesResults<T>,\n>(\n options: {\n /**\n * An array with query option objects identical to `useSuspenseQuery`.\n */\n queries: readonly [...SuspenseQueriesOptions<T>]\n /**\n * Use this to combine the results of the queries into a single value. The result will be structurally\n * shared to be as referentially stable as possible.\n */\n combine?: (result: SuspenseQueriesResults<T>) => TCombinedResult\n },\n queryClient?: QueryClient,\n): TCombinedResult\n\nexport function useSuspenseQueries(options: any, queryClient?: QueryClient) {\n return useQueries(\n {\n ...options,\n queries: options.queries.map((query: any) => {\n if (process.env.NODE_ENV !== 'production') {\n if (query.queryFn === skipToken) {\n console.error('skipToken is not allowed for useSuspenseQueries')\n }\n }\n\n return {\n ...query,\n suspense: true,\n throwOnError: defaultThrowOnError,\n enabled: true,\n placeholderData: undefined,\n }\n }),\n },\n queryClient,\n )\n}\n"],"mappings":";;;;;AA0TA,SAAgB,mBAAmB,SAAc,aAA2B;CAC1E,OAAOA,mBAAAA,WACL;EACE,GAAG;EACH,SAAS,QAAQ,QAAQ,KAAK,UAAe;GAC3C,IAAI,QAAQ,IAAI,aAAa,cACvB;QAAA,MAAM,YAAYC,qBAAAA,WACpB,QAAQ,MAAM,iDAAiD;GAAA;GAInE,OAAO;IACL,GAAG;IACH,UAAU;IACV,cAAcC,iBAAAA;IACd,SAAS;IACT,iBAAiB,KAAA;GACnB;EACF,CAAC;CACH,GACA,WACF;AACF"}
1
+ {"version":3,"file":"useSuspenseQueries.cjs","names":["useQueries","skipToken","defaultThrowOnError"],"sources":["../../src/useSuspenseQueries.ts"],"sourcesContent":["import { skipToken } from '@tanstack/query-core'\nimport type {\n DefaultError,\n QueryClient,\n QueryFunction,\n ThrowOnError,\n} from '@tanstack/query-core'\n\nimport { defaultThrowOnError } from './suspense'\nimport type { UseSuspenseQueryOptions, UseSuspenseQueryResult } from './types'\nimport { useQueries } from './useQueries'\n\n// Avoid TS depth-limit error in case of large array literal\ntype MAXIMUM_DEPTH = 20\n\n// Widen the type of the symbol to enable type inference even if skipToken is not immutable.\ntype SkipTokenForUseQueries = symbol\n\ntype GetUseSuspenseQueryOptions<T> =\n // Part 1: responsible for applying explicit type parameter to function arguments, if object { queryFnData: TQueryFnData, error: TError, data: TData }\n T extends {\n queryFnData: infer TQueryFnData\n error?: infer TError\n data: infer TData\n }\n ? UseSuspenseQueryOptions<TQueryFnData, TError, TData>\n : T extends { queryFnData: infer TQueryFnData; error?: infer TError }\n ? UseSuspenseQueryOptions<TQueryFnData, TError>\n : T extends { data: infer TData; error?: infer TError }\n ? UseSuspenseQueryOptions<unknown, TError, TData>\n : // Part 2: responsible for applying explicit type parameter to function arguments, if tuple [TQueryFnData, TError, TData]\n T extends [infer TQueryFnData, infer TError, infer TData]\n ? UseSuspenseQueryOptions<TQueryFnData, TError, TData>\n : T extends [infer TQueryFnData, infer TError]\n ? UseSuspenseQueryOptions<TQueryFnData, TError>\n : T extends [infer TQueryFnData]\n ? UseSuspenseQueryOptions<TQueryFnData>\n : // Part 3: responsible for inferring and enforcing type if no explicit parameter was provided\n T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, infer TQueryKey>\n | SkipTokenForUseQueries\n select?: (data: any) => infer TData\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryOptions<\n TQueryFnData,\n TError,\n TData,\n TQueryKey\n >\n : T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, infer TQueryKey>\n | SkipTokenForUseQueries\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryOptions<\n TQueryFnData,\n TError,\n TQueryFnData,\n TQueryKey\n >\n : // Fallback\n UseSuspenseQueryOptions\n\ntype GetUseSuspenseQueryResult<T> =\n // Part 1: responsible for mapping explicit type parameter to function result, if object\n T extends { queryFnData: any; error?: infer TError; data: infer TData }\n ? UseSuspenseQueryResult<TData, TError>\n : T extends { queryFnData: infer TQueryFnData; error?: infer TError }\n ? UseSuspenseQueryResult<TQueryFnData, TError>\n : T extends { data: infer TData; error?: infer TError }\n ? UseSuspenseQueryResult<TData, TError>\n : // Part 2: responsible for mapping explicit type parameter to function result, if tuple\n T extends [any, infer TError, infer TData]\n ? UseSuspenseQueryResult<TData, TError>\n : T extends [infer TQueryFnData, infer TError]\n ? UseSuspenseQueryResult<TQueryFnData, TError>\n : T extends [infer TQueryFnData]\n ? UseSuspenseQueryResult<TQueryFnData>\n : // Part 3: responsible for mapping inferred type to results, if no explicit parameter was provided\n T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, any>\n | SkipTokenForUseQueries\n select?: (data: any) => infer TData\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryResult<\n unknown extends TData ? TQueryFnData : TData,\n unknown extends TError ? DefaultError : TError\n >\n : T extends {\n queryFn?:\n | QueryFunction<infer TQueryFnData, any>\n | SkipTokenForUseQueries\n throwOnError?: ThrowOnError<any, infer TError, any, any>\n }\n ? UseSuspenseQueryResult<\n TQueryFnData,\n unknown extends TError ? DefaultError : TError\n >\n : // Fallback\n UseSuspenseQueryResult\n\n/**\n * The `queries` array accepted by `useSuspenseQueries`. Recursively unwraps each tuple element so every\n * entry's `queryFn`/`select` are inferred individually, up to 20 elements. An opaque array (e.g. `unknown[]`)\n * is returned as-is; a non-tuple array of a known element type, or a tuple past 20 elements, falls back to a\n * single homogeneous {@link UseSuspenseQueryOptions} type.\n *\n * @template T - The type of the `queries` array as written at the call site.\n * @template TResults - The internal accumulator that this type builds during recursion. It is not meant\n * to be set explicitly.\n * @template TDepth - The internal recursion-depth counter, checked against the 20-element limit. It is not\n * meant to be set explicitly.\n */\nexport type SuspenseQueriesOptions<\n T extends Array<any>,\n TResults extends Array<any> = [],\n TDepth extends ReadonlyArray<number> = [],\n> = TDepth['length'] extends MAXIMUM_DEPTH\n ? Array<UseSuspenseQueryOptions>\n : T extends []\n ? []\n : T extends [infer Head]\n ? [...TResults, GetUseSuspenseQueryOptions<Head>]\n : T extends [infer Head, ...infer Tails]\n ? SuspenseQueriesOptions<\n [...Tails],\n [...TResults, GetUseSuspenseQueryOptions<Head>],\n [...TDepth, 1]\n >\n : Array<unknown> extends T\n ? T\n : // If T is *some* array but we couldn't assign unknown[] to it, then it must hold some known/homogeneous type!\n // use this to infer the param types in the case of Array.map() argument\n T extends Array<\n UseSuspenseQueryOptions<\n infer TQueryFnData,\n infer TError,\n infer TData,\n infer TQueryKey\n >\n >\n ? Array<\n UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>\n >\n : // Fallback\n Array<UseSuspenseQueryOptions>\n\n/**\n * The result type returned by `useSuspenseQueries`, when no `combine` is provided. Mirrors\n * {@link SuspenseQueriesOptions}: each tuple element's result type is inferred individually, up to 20 elements.\n * A non-tuple array is mapped per-element instead, still inferring each entry individually; only past 20\n * elements does this fall back to a single homogeneous {@link UseSuspenseQueryResult} type.\n *\n * @template T - The type of the `queries` array, as inferred by {@link SuspenseQueriesOptions}.\n * @template TResults - The internal accumulator that this type builds during recursion. It is not meant\n * to be set explicitly.\n * @template TDepth - The internal recursion-depth counter, checked against the 20-element limit. It is not\n * meant to be set explicitly.\n */\nexport type SuspenseQueriesResults<\n T extends Array<any>,\n TResults extends Array<any> = [],\n TDepth extends ReadonlyArray<number> = [],\n> = TDepth['length'] extends MAXIMUM_DEPTH\n ? Array<UseSuspenseQueryResult>\n : T extends []\n ? []\n : T extends [infer Head]\n ? [...TResults, GetUseSuspenseQueryResult<Head>]\n : T extends [infer Head, ...infer Tails]\n ? SuspenseQueriesResults<\n [...Tails],\n [...TResults, GetUseSuspenseQueryResult<Head>],\n [...TDepth, 1]\n >\n : { [K in keyof T]: GetUseSuspenseQueryResult<T[K]> }\n\n/**\n * The options for `useSuspenseQueries` are the same as for `useQueries`, except that each `query` can't have\n * `throwOnError`, `enabled`, or `placeholderData`.\n *\n * @param options - The `queries` array to run in Suspense, and an optional `combine` function.\n * @param queryClient - Use this to provide a custom `QueryClient`. Otherwise, the one from the nearest context\n * will be used.\n * @returns The same structure as `useQueries`, except that for each `query`, `data` is guaranteed to be\n * defined, `isPlaceholderData` is missing, and `status` is either `success` or `error` (with the derived\n * flags set accordingly).\n *\n * Caveat: the component will only re-mount after all queries have finished loading. Hence, if a query has gone\n * stale in the time it took for all the queries to complete, it will be fetched again at re-mount. To avoid\n * this, make sure to set a high enough `staleTime`. Cancellation does not work.\n *\n * @example\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQueries } from '@tanstack/preact-query'\n *\n * function Posts({ ids }: { ids: Array<number> }) {\n * // Every result is guaranteed to be defined — no per-query `isPending` check needed.\n * const postQueries = useSuspenseQueries({\n * queries: ids.map((id) => ({\n * queryKey: ['post', id],\n * queryFn: () => fetchPost(id),\n * })),\n * })\n *\n * return (\n * <ul>\n * {postQueries.map((query) => (\n * <li key={query.data.id}>{query.data.title}</li>\n * ))}\n * </ul>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading posts...</h1>}>\n * <Posts ids={[1, 2, 3]} />\n * </Suspense>\n * )\n * }\n * ```\n *\n * @example\n * Several different queries — use `useSuspenseQueries` instead of multiple `useSuspenseQuery` calls, so\n * they fetch in parallel rather than suspending one after another:\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQueries } from '@tanstack/preact-query'\n *\n * function Dashboard() {\n * const [usersQuery, teamsQuery, projectsQuery] = useSuspenseQueries({\n * queries: [\n * { queryKey: ['users'], queryFn: fetchUsers },\n * { queryKey: ['teams'], queryFn: fetchTeams },\n * { queryKey: ['projects'], queryFn: fetchProjects },\n * ],\n * })\n *\n * return (\n * <div>\n * <UserList users={usersQuery.data} />\n * <TeamList teams={teamsQuery.data} />\n * <ProjectList projects={projectsQuery.data} />\n * </div>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading dashboard...</h1>}>\n * <Dashboard />\n * </Suspense>\n * )\n * }\n * ```\n */\nexport function useSuspenseQueries<\n T extends Array<any>,\n TCombinedResult = SuspenseQueriesResults<T>,\n>(\n options: {\n /**\n * An array with query option objects identical to `useSuspenseQuery`.\n */\n queries:\n | readonly [...SuspenseQueriesOptions<T>]\n | readonly [...{ [K in keyof T]: GetUseSuspenseQueryOptions<T[K]> }]\n /**\n * Use this to combine the results of the queries into a single value. The result will be structurally\n * shared to be as referentially stable as possible.\n */\n combine?: (result: SuspenseQueriesResults<T>) => TCombinedResult\n },\n queryClient?: QueryClient,\n): TCombinedResult\n\n/**\n * The options for `useSuspenseQueries` are the same as for `useQueries`, except that each `query` can't have\n * `throwOnError`, `enabled`, or `placeholderData`.\n *\n * @param options - The `queries` array to run in Suspense, and an optional `combine` function.\n * @param queryClient - Use this to provide a custom `QueryClient`. Otherwise, the one from the nearest context\n * will be used.\n * @returns The same structure as `useQueries`, except that for each `query`, `data` is guaranteed to be\n * defined, `isPlaceholderData` is missing, and `status` is either `success` or `error` (with the derived\n * flags set accordingly).\n *\n * Caveat: the component will only re-mount after all queries have finished loading. Hence, if a query has gone\n * stale in the time it took for all the queries to complete, it will be fetched again at re-mount. To avoid\n * this, make sure to set a high enough `staleTime`. Cancellation does not work.\n *\n * @example\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQueries } from '@tanstack/preact-query'\n *\n * function Posts({ ids }: { ids: Array<number> }) {\n * // Every result is guaranteed to be defined — no per-query `isPending` check needed.\n * const postQueries = useSuspenseQueries({\n * queries: ids.map((id) => ({\n * queryKey: ['post', id],\n * queryFn: () => fetchPost(id),\n * })),\n * })\n *\n * return (\n * <ul>\n * {postQueries.map((query) => (\n * <li key={query.data.id}>{query.data.title}</li>\n * ))}\n * </ul>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading posts...</h1>}>\n * <Posts ids={[1, 2, 3]} />\n * </Suspense>\n * )\n * }\n * ```\n *\n * @example\n * Several different queries — use `useSuspenseQueries` instead of multiple `useSuspenseQuery` calls, so\n * they fetch in parallel rather than suspending one after another:\n * ```tsx\n * import { Suspense } from 'preact/compat'\n * import { useSuspenseQueries } from '@tanstack/preact-query'\n *\n * function Dashboard() {\n * const [usersQuery, teamsQuery, projectsQuery] = useSuspenseQueries({\n * queries: [\n * { queryKey: ['users'], queryFn: fetchUsers },\n * { queryKey: ['teams'], queryFn: fetchTeams },\n * { queryKey: ['projects'], queryFn: fetchProjects },\n * ],\n * })\n *\n * return (\n * <div>\n * <UserList users={usersQuery.data} />\n * <TeamList teams={teamsQuery.data} />\n * <ProjectList projects={projectsQuery.data} />\n * </div>\n * )\n * }\n *\n * function App() {\n * return (\n * <Suspense fallback={<h1>Loading dashboard...</h1>}>\n * <Dashboard />\n * </Suspense>\n * )\n * }\n * ```\n */\nexport function useSuspenseQueries<\n T extends Array<any>,\n TCombinedResult = SuspenseQueriesResults<T>,\n>(\n options: {\n /**\n * An array with query option objects identical to `useSuspenseQuery`.\n */\n queries: readonly [...SuspenseQueriesOptions<T>]\n /**\n * Use this to combine the results of the queries into a single value. The result will be structurally\n * shared to be as referentially stable as possible.\n */\n combine?: (result: SuspenseQueriesResults<T>) => TCombinedResult\n },\n queryClient?: QueryClient,\n): TCombinedResult\n\nexport function useSuspenseQueries(options: any, queryClient?: QueryClient) {\n return useQueries(\n {\n ...options,\n queries: options.queries.map((query: any) => {\n if (process.env.NODE_ENV !== 'production') {\n if (query.queryFn === skipToken) {\n console.error('skipToken is not allowed for useSuspenseQueries')\n }\n }\n\n return {\n ...query,\n suspense: true,\n throwOnError: defaultThrowOnError,\n enabled: true,\n placeholderData: undefined,\n }\n }),\n },\n queryClient,\n )\n}\n"],"mappings":";;;;;AA8XA,SAAgB,mBAAmB,SAAc,aAA2B;CAC1E,OAAOA,mBAAAA,WACL;EACE,GAAG;EACH,SAAS,QAAQ,QAAQ,KAAK,UAAe;GAC3C,IAAI,QAAQ,IAAI,aAAa,cACvB;QAAA,MAAM,YAAYC,qBAAAA,WACpB,QAAQ,MAAM,iDAAiD;GAAA;GAInE,OAAO;IACL,GAAG;IACH,UAAU;IACV,cAAcC,iBAAAA;IACd,SAAS;IACT,iBAAiB,KAAA;GACnB;EACF,CAAC;CACH,GACA,WACF;AACF"}
@@ -87,7 +87,7 @@ type SuspenseQueriesResults<T extends Array<any>, TResults extends Array<any> =
87
87
  *
88
88
  * function Posts({ ids }: { ids: Array<number> }) {
89
89
  * // Every result is guaranteed to be defined — no per-query `isPending` check needed.
90
- * const results = useSuspenseQueries({
90
+ * const postQueries = useSuspenseQueries({
91
91
  * queries: ids.map((id) => ({
92
92
  * queryKey: ['post', id],
93
93
  * queryFn: () => fetchPost(id),
@@ -96,8 +96,8 @@ type SuspenseQueriesResults<T extends Array<any>, TResults extends Array<any> =
96
96
  *
97
97
  * return (
98
98
  * <ul>
99
- * {results.map((result) => (
100
- * <li key={result.data.id}>{result.data.title}</li>
99
+ * {postQueries.map((query) => (
100
+ * <li key={query.data.id}>{query.data.title}</li>
101
101
  * ))}
102
102
  * </ul>
103
103
  * )
@@ -111,6 +111,40 @@ type SuspenseQueriesResults<T extends Array<any>, TResults extends Array<any> =
111
111
  * )
112
112
  * }
113
113
  * ```
114
+ *
115
+ * @example
116
+ * Several different queries — use `useSuspenseQueries` instead of multiple `useSuspenseQuery` calls, so
117
+ * they fetch in parallel rather than suspending one after another:
118
+ * ```tsx
119
+ * import { Suspense } from 'preact/compat'
120
+ * import { useSuspenseQueries } from '@tanstack/preact-query'
121
+ *
122
+ * function Dashboard() {
123
+ * const [usersQuery, teamsQuery, projectsQuery] = useSuspenseQueries({
124
+ * queries: [
125
+ * { queryKey: ['users'], queryFn: fetchUsers },
126
+ * { queryKey: ['teams'], queryFn: fetchTeams },
127
+ * { queryKey: ['projects'], queryFn: fetchProjects },
128
+ * ],
129
+ * })
130
+ *
131
+ * return (
132
+ * <div>
133
+ * <UserList users={usersQuery.data} />
134
+ * <TeamList teams={teamsQuery.data} />
135
+ * <ProjectList projects={projectsQuery.data} />
136
+ * </div>
137
+ * )
138
+ * }
139
+ *
140
+ * function App() {
141
+ * return (
142
+ * <Suspense fallback={<h1>Loading dashboard...</h1>}>
143
+ * <Dashboard />
144
+ * </Suspense>
145
+ * )
146
+ * }
147
+ * ```
114
148
  */
115
149
  declare function useSuspenseQueries<T extends Array<any>, TCombinedResult = SuspenseQueriesResults<T>>(options: {
116
150
  /**
@@ -145,7 +179,7 @@ declare function useSuspenseQueries<T extends Array<any>, TCombinedResult = Susp
145
179
  *
146
180
  * function Posts({ ids }: { ids: Array<number> }) {
147
181
  * // Every result is guaranteed to be defined — no per-query `isPending` check needed.
148
- * const results = useSuspenseQueries({
182
+ * const postQueries = useSuspenseQueries({
149
183
  * queries: ids.map((id) => ({
150
184
  * queryKey: ['post', id],
151
185
  * queryFn: () => fetchPost(id),
@@ -154,8 +188,8 @@ declare function useSuspenseQueries<T extends Array<any>, TCombinedResult = Susp
154
188
  *
155
189
  * return (
156
190
  * <ul>
157
- * {results.map((result) => (
158
- * <li key={result.data.id}>{result.data.title}</li>
191
+ * {postQueries.map((query) => (
192
+ * <li key={query.data.id}>{query.data.title}</li>
159
193
  * ))}
160
194
  * </ul>
161
195
  * )
@@ -169,6 +203,40 @@ declare function useSuspenseQueries<T extends Array<any>, TCombinedResult = Susp
169
203
  * )
170
204
  * }
171
205
  * ```
206
+ *
207
+ * @example
208
+ * Several different queries — use `useSuspenseQueries` instead of multiple `useSuspenseQuery` calls, so
209
+ * they fetch in parallel rather than suspending one after another:
210
+ * ```tsx
211
+ * import { Suspense } from 'preact/compat'
212
+ * import { useSuspenseQueries } from '@tanstack/preact-query'
213
+ *
214
+ * function Dashboard() {
215
+ * const [usersQuery, teamsQuery, projectsQuery] = useSuspenseQueries({
216
+ * queries: [
217
+ * { queryKey: ['users'], queryFn: fetchUsers },
218
+ * { queryKey: ['teams'], queryFn: fetchTeams },
219
+ * { queryKey: ['projects'], queryFn: fetchProjects },
220
+ * ],
221
+ * })
222
+ *
223
+ * return (
224
+ * <div>
225
+ * <UserList users={usersQuery.data} />
226
+ * <TeamList teams={teamsQuery.data} />
227
+ * <ProjectList projects={projectsQuery.data} />
228
+ * </div>
229
+ * )
230
+ * }
231
+ *
232
+ * function App() {
233
+ * return (
234
+ * <Suspense fallback={<h1>Loading dashboard...</h1>}>
235
+ * <Dashboard />
236
+ * </Suspense>
237
+ * )
238
+ * }
239
+ * ```
172
240
  */
173
241
  declare function useSuspenseQueries<T extends Array<any>, TCombinedResult = SuspenseQueriesResults<T>>(options: {
174
242
  /**