@tanstack/preact-query 5.102.3 → 5.102.5

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 (296) hide show
  1. package/build/legacy/HydrationBoundary.cjs +43 -0
  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 +43 -0
  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 +77 -0
  26. package/build/legacy/QueryErrorResetBoundary.cjs.map +1 -1
  27. package/build/legacy/QueryErrorResetBoundary.d.cts +108 -0
  28. package/build/legacy/QueryErrorResetBoundary.d.cts.map +1 -1
  29. package/build/legacy/QueryErrorResetBoundary.d.ts +108 -0
  30. package/build/legacy/QueryErrorResetBoundary.d.ts.map +1 -1
  31. package/build/legacy/QueryErrorResetBoundary.js +77 -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 +187 -0
  35. package/build/legacy/infiniteQueryOptions.d.cts.map +1 -1
  36. package/build/legacy/infiniteQueryOptions.d.ts +187 -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 +68 -0
  41. package/build/legacy/mutationOptions.d.cts.map +1 -1
  42. package/build/legacy/mutationOptions.d.ts +68 -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 +198 -0
  47. package/build/legacy/queryOptions.d.cts.map +1 -1
  48. package/build/legacy/queryOptions.d.ts +198 -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 +120 -0
  59. package/build/legacy/useInfiniteQuery.d.cts.map +1 -1
  60. package/build/legacy/useInfiniteQuery.d.ts +120 -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 +34 -0
  64. package/build/legacy/useIsFetching.cjs.map +1 -1
  65. package/build/legacy/useIsFetching.d.cts +34 -0
  66. package/build/legacy/useIsFetching.d.cts.map +1 -1
  67. package/build/legacy/useIsFetching.d.ts +34 -0
  68. package/build/legacy/useIsFetching.d.ts.map +1 -1
  69. package/build/legacy/useIsFetching.js +34 -0
  70. package/build/legacy/useIsFetching.js.map +1 -1
  71. package/build/legacy/useMutation.cjs +170 -0
  72. package/build/legacy/useMutation.cjs.map +1 -1
  73. package/build/legacy/useMutation.d.cts +170 -0
  74. package/build/legacy/useMutation.d.cts.map +1 -1
  75. package/build/legacy/useMutation.d.ts +170 -0
  76. package/build/legacy/useMutation.d.ts.map +1 -1
  77. package/build/legacy/useMutation.js +170 -0
  78. package/build/legacy/useMutation.js.map +1 -1
  79. package/build/legacy/useMutationState.cjs +74 -0
  80. package/build/legacy/useMutationState.cjs.map +1 -1
  81. package/build/legacy/useMutationState.d.cts +74 -0
  82. package/build/legacy/useMutationState.d.cts.map +1 -1
  83. package/build/legacy/useMutationState.d.ts +74 -0
  84. package/build/legacy/useMutationState.d.ts.map +1 -1
  85. package/build/legacy/useMutationState.js +74 -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 +50 -0
  104. package/build/legacy/useQueries.cjs.map +1 -1
  105. package/build/legacy/useQueries.d.cts +85 -2
  106. package/build/legacy/useQueries.d.cts.map +1 -1
  107. package/build/legacy/useQueries.d.ts +85 -2
  108. package/build/legacy/useQueries.d.ts.map +1 -1
  109. package/build/legacy/useQueries.js +50 -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 +186 -0
  113. package/build/legacy/useQuery.d.cts.map +1 -1
  114. package/build/legacy/useQuery.d.ts +186 -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 +56 -0
  118. package/build/legacy/useSuspenseInfiniteQuery.cjs.map +1 -1
  119. package/build/legacy/useSuspenseInfiniteQuery.d.cts +56 -0
  120. package/build/legacy/useSuspenseInfiniteQuery.d.cts.map +1 -1
  121. package/build/legacy/useSuspenseInfiniteQuery.d.ts +56 -0
  122. package/build/legacy/useSuspenseInfiniteQuery.d.ts.map +1 -1
  123. package/build/legacy/useSuspenseInfiniteQuery.js +56 -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 +196 -2
  127. package/build/legacy/useSuspenseQueries.d.cts.map +1 -1
  128. package/build/legacy/useSuspenseQueries.d.ts +196 -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 +47 -0
  132. package/build/legacy/useSuspenseQuery.cjs.map +1 -1
  133. package/build/legacy/useSuspenseQuery.d.cts +47 -0
  134. package/build/legacy/useSuspenseQuery.d.cts.map +1 -1
  135. package/build/legacy/useSuspenseQuery.d.ts +47 -0
  136. package/build/legacy/useSuspenseQuery.d.ts.map +1 -1
  137. package/build/legacy/useSuspenseQuery.js +47 -0
  138. package/build/legacy/useSuspenseQuery.js.map +1 -1
  139. package/build/modern/HydrationBoundary.cjs +43 -0
  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 +43 -0
  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 +77 -0
  164. package/build/modern/QueryErrorResetBoundary.cjs.map +1 -1
  165. package/build/modern/QueryErrorResetBoundary.d.cts +108 -0
  166. package/build/modern/QueryErrorResetBoundary.d.cts.map +1 -1
  167. package/build/modern/QueryErrorResetBoundary.d.ts +108 -0
  168. package/build/modern/QueryErrorResetBoundary.d.ts.map +1 -1
  169. package/build/modern/QueryErrorResetBoundary.js +77 -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 +187 -0
  173. package/build/modern/infiniteQueryOptions.d.cts.map +1 -1
  174. package/build/modern/infiniteQueryOptions.d.ts +187 -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 +68 -0
  179. package/build/modern/mutationOptions.d.cts.map +1 -1
  180. package/build/modern/mutationOptions.d.ts +68 -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 +198 -0
  185. package/build/modern/queryOptions.d.cts.map +1 -1
  186. package/build/modern/queryOptions.d.ts +198 -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 +120 -0
  197. package/build/modern/useInfiniteQuery.d.cts.map +1 -1
  198. package/build/modern/useInfiniteQuery.d.ts +120 -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 +34 -0
  202. package/build/modern/useIsFetching.cjs.map +1 -1
  203. package/build/modern/useIsFetching.d.cts +34 -0
  204. package/build/modern/useIsFetching.d.cts.map +1 -1
  205. package/build/modern/useIsFetching.d.ts +34 -0
  206. package/build/modern/useIsFetching.d.ts.map +1 -1
  207. package/build/modern/useIsFetching.js +34 -0
  208. package/build/modern/useIsFetching.js.map +1 -1
  209. package/build/modern/useMutation.cjs +170 -0
  210. package/build/modern/useMutation.cjs.map +1 -1
  211. package/build/modern/useMutation.d.cts +170 -0
  212. package/build/modern/useMutation.d.cts.map +1 -1
  213. package/build/modern/useMutation.d.ts +170 -0
  214. package/build/modern/useMutation.d.ts.map +1 -1
  215. package/build/modern/useMutation.js +170 -0
  216. package/build/modern/useMutation.js.map +1 -1
  217. package/build/modern/useMutationState.cjs +74 -0
  218. package/build/modern/useMutationState.cjs.map +1 -1
  219. package/build/modern/useMutationState.d.cts +74 -0
  220. package/build/modern/useMutationState.d.cts.map +1 -1
  221. package/build/modern/useMutationState.d.ts +74 -0
  222. package/build/modern/useMutationState.d.ts.map +1 -1
  223. package/build/modern/useMutationState.js +74 -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 +50 -0
  242. package/build/modern/useQueries.cjs.map +1 -1
  243. package/build/modern/useQueries.d.cts +85 -2
  244. package/build/modern/useQueries.d.cts.map +1 -1
  245. package/build/modern/useQueries.d.ts +85 -2
  246. package/build/modern/useQueries.d.ts.map +1 -1
  247. package/build/modern/useQueries.js +50 -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 +186 -0
  251. package/build/modern/useQuery.d.cts.map +1 -1
  252. package/build/modern/useQuery.d.ts +186 -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 +56 -0
  256. package/build/modern/useSuspenseInfiniteQuery.cjs.map +1 -1
  257. package/build/modern/useSuspenseInfiniteQuery.d.cts +56 -0
  258. package/build/modern/useSuspenseInfiniteQuery.d.cts.map +1 -1
  259. package/build/modern/useSuspenseInfiniteQuery.d.ts +56 -0
  260. package/build/modern/useSuspenseInfiniteQuery.d.ts.map +1 -1
  261. package/build/modern/useSuspenseInfiniteQuery.js +56 -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 +196 -2
  265. package/build/modern/useSuspenseQueries.d.cts.map +1 -1
  266. package/build/modern/useSuspenseQueries.d.ts +196 -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 +47 -0
  270. package/build/modern/useSuspenseQuery.cjs.map +1 -1
  271. package/build/modern/useSuspenseQuery.d.cts +47 -0
  272. package/build/modern/useSuspenseQuery.d.cts.map +1 -1
  273. package/build/modern/useSuspenseQuery.d.ts +47 -0
  274. package/build/modern/useSuspenseQuery.d.ts.map +1 -1
  275. package/build/modern/useSuspenseQuery.js +47 -0
  276. package/build/modern/useSuspenseQuery.js.map +1 -1
  277. package/package.json +3 -3
  278. package/src/HydrationBoundary.tsx +61 -0
  279. package/src/IsRestoringProvider.ts +12 -0
  280. package/src/QueryClientProvider.tsx +41 -0
  281. package/src/QueryErrorResetBoundary.tsx +111 -0
  282. package/src/infiniteQueryOptions.ts +187 -0
  283. package/src/mutationOptions.ts +68 -0
  284. package/src/queryOptions.ts +198 -0
  285. package/src/types.ts +228 -2
  286. package/src/useInfiniteQuery.ts +120 -0
  287. package/src/useIsFetching.ts +34 -0
  288. package/src/useMutation.ts +170 -0
  289. package/src/useMutationState.ts +74 -0
  290. package/src/usePrefetchInfiniteQuery.tsx +44 -0
  291. package/src/usePrefetchQuery.tsx +35 -0
  292. package/src/useQueries.ts +85 -2
  293. package/src/useQuery.ts +186 -0
  294. package/src/useSuspenseInfiniteQuery.ts +56 -0
  295. package/src/useSuspenseQueries.ts +196 -2
  296. package/src/useSuspenseQuery.ts +47 -0
@@ -1,6 +1,176 @@
1
1
  import { UseMutationOptions, UseMutationResult } from "./types.cjs";
2
2
  import { DefaultError, QueryClient } from "@tanstack/query-core";
3
3
  //#region src/useMutation.d.ts
4
+ /**
5
+ * Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects.
6
+ * `useMutation` is the hook for that.
7
+ *
8
+ * @see {@link mutationOptions} to share these options across multiple `useMutation` call sites.
9
+ * @param options - The {@link UseMutationOptions} to use — everything you can pass to `useMutation`.
10
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
11
+ * be used.
12
+ * @returns `mutate`/`mutateAsync` also accept per-call `onSuccess`/`onError`/`onSettled` callbacks as a second
13
+ * argument, useful for triggering call-site side effects (e.g. navigation) without coupling them to the shared
14
+ * mutation definition. If you make multiple requests, `onSuccess` will fire only after the latest call you've
15
+ * made.
16
+ *
17
+ * @example
18
+ * ```tsx
19
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
20
+ *
21
+ * function AddTodo() {
22
+ * const queryClient = useQueryClient()
23
+ *
24
+ * const addMutation = useMutation({
25
+ * mutationFn: addTodo,
26
+ * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
27
+ * })
28
+ *
29
+ * return (
30
+ * <button
31
+ * onClick={() =>
32
+ * addMutation.mutate('Item', {
33
+ * onError: (error) => console.error('Failed to add item:', error),
34
+ * })
35
+ * }
36
+ * >
37
+ * Add
38
+ * </button>
39
+ * )
40
+ * }
41
+ * ```
42
+ *
43
+ * @example
44
+ * Rendering the mutation's own state, rather than just firing it off:
45
+ * ```tsx
46
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
47
+ *
48
+ * function AddTodo() {
49
+ * const queryClient = useQueryClient()
50
+ *
51
+ * const addMutation = useMutation({
52
+ * mutationFn: addTodo,
53
+ * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
54
+ * })
55
+ *
56
+ * return (
57
+ * <div>
58
+ * {addMutation.isPending ? (
59
+ * 'Adding todo...'
60
+ * ) : (
61
+ * <>
62
+ * {addMutation.isError ? (
63
+ * <div>An error occurred: {addMutation.error.message}</div>
64
+ * ) : null}
65
+ * <button onClick={() => addMutation.mutate('Item')}>Add</button>
66
+ * </>
67
+ * )}
68
+ * </div>
69
+ * )
70
+ * }
71
+ * ```
72
+ *
73
+ * @example
74
+ * Optimistic update via `onMutate`, rolling back on `onError`:
75
+ * ```tsx
76
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
77
+ *
78
+ * function AddTodo() {
79
+ * const queryClient = useQueryClient()
80
+ *
81
+ * const addMutation = useMutation({
82
+ * mutationFn: addTodo,
83
+ * onMutate: async (newTodo) => {
84
+ * await queryClient.cancelQueries({ queryKey: ['todos'] })
85
+ * const previousTodos = queryClient.getQueryData<Array<string>>(['todos'])
86
+ *
87
+ * queryClient.setQueryData<Array<string>>(['todos'], (old) => [
88
+ * ...(old ?? []),
89
+ * newTodo,
90
+ * ])
91
+ *
92
+ * // Passed to `onError` as `context` if the mutation fails.
93
+ * return { previousTodos }
94
+ * },
95
+ * onError: (_err, _newTodo, context) => {
96
+ * queryClient.setQueryData(['todos'], context?.previousTodos)
97
+ * },
98
+ * onSettled: () => {
99
+ * queryClient.invalidateQueries({ queryKey: ['todos'] })
100
+ * },
101
+ * })
102
+ *
103
+ * return (
104
+ * <button onClick={() => addMutation.mutate('Item')}>Add</button>
105
+ * )
106
+ * }
107
+ * ```
108
+ *
109
+ * @example
110
+ * Callbacks passed per call to `mutate` only fire for the last call — `mutateAsync` gives you a
111
+ * promise per call instead, so you can wait for all of them:
112
+ * ```tsx
113
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
114
+ *
115
+ * function AddTodos() {
116
+ * const queryClient = useQueryClient()
117
+ *
118
+ * const addMutation = useMutation({
119
+ * mutationFn: addTodo,
120
+ * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
121
+ * })
122
+ *
123
+ * async function handleAddAll(todos: Array<string>) {
124
+ * try {
125
+ * await Promise.all(todos.map((todo) => addMutation.mutateAsync(todo)))
126
+ * } catch (error) {
127
+ * console.error('Failed to add todos:', error)
128
+ * }
129
+ * }
130
+ *
131
+ * return (
132
+ * <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>
133
+ * Add all
134
+ * </button>
135
+ * )
136
+ * }
137
+ * ```
138
+ *
139
+ * @example
140
+ * If some of the mutations above can fail independently of the others, and you want to know which ones
141
+ * did — rather than losing that information the moment the first one rejects — swap `Promise.all` for
142
+ * `Promise.allSettled`:
143
+ * ```tsx
144
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
145
+ *
146
+ * function AddTodos() {
147
+ * const queryClient = useQueryClient()
148
+ *
149
+ * const addMutation = useMutation({
150
+ * mutationFn: addTodo,
151
+ * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
152
+ * })
153
+ *
154
+ * async function handleAddAll(todos: Array<string>) {
155
+ * const results = await Promise.allSettled(
156
+ * todos.map((todo) => addMutation.mutateAsync(todo)),
157
+ * )
158
+ *
159
+ * results.forEach((result, index) => {
160
+ * if (result.status === 'rejected') {
161
+ * console.error(`Failed to add "${todos[index]}":`, result.reason)
162
+ * }
163
+ * })
164
+ * }
165
+ *
166
+ * return (
167
+ * <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>
168
+ * Add all
169
+ * </button>
170
+ * )
171
+ * }
172
+ * ```
173
+ */
4
174
  declare function useMutation<TData = unknown, TError = DefaultError, TVariables = void, TOnMutateResult = unknown>(options: UseMutationOptions<TData, TError, TVariables, TOnMutateResult>, queryClient?: QueryClient): UseMutationResult<TData, TError, TVariables, TOnMutateResult>;
5
175
  //#endregion
6
176
  export { useMutation };
@@ -1 +1 @@
1
- {"version":3,"file":"useMutation.d.cts","names":[],"sources":["../../src/useMutation.ts"],"mappings":";;;iBAmBgB,YACd,iBACA,SAAS,cACT,mBACA,2BAEA,SAAS,mBAAmB,OAAO,QAAQ,YAAY,kBACvD,cAAc,cACb,kBAAkB,OAAO,QAAQ,YAAY"}
1
+ {"version":3,"file":"useMutation.d.cts","names":[],"sources":["../../src/useMutation.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6LgB,YACd,iBACA,SAAS,cACT,mBACA,2BAEA,SAAS,mBAAmB,OAAO,QAAQ,YAAY,kBACvD,cAAc,cACb,kBAAkB,OAAO,QAAQ,YAAY"}
@@ -1,6 +1,176 @@
1
1
  import { UseMutationOptions, UseMutationResult } from "./types.js";
2
2
  import { DefaultError, QueryClient } from "@tanstack/query-core";
3
3
  //#region src/useMutation.d.ts
4
+ /**
5
+ * Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects.
6
+ * `useMutation` is the hook for that.
7
+ *
8
+ * @see {@link mutationOptions} to share these options across multiple `useMutation` call sites.
9
+ * @param options - The {@link UseMutationOptions} to use — everything you can pass to `useMutation`.
10
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
11
+ * be used.
12
+ * @returns `mutate`/`mutateAsync` also accept per-call `onSuccess`/`onError`/`onSettled` callbacks as a second
13
+ * argument, useful for triggering call-site side effects (e.g. navigation) without coupling them to the shared
14
+ * mutation definition. If you make multiple requests, `onSuccess` will fire only after the latest call you've
15
+ * made.
16
+ *
17
+ * @example
18
+ * ```tsx
19
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
20
+ *
21
+ * function AddTodo() {
22
+ * const queryClient = useQueryClient()
23
+ *
24
+ * const addMutation = useMutation({
25
+ * mutationFn: addTodo,
26
+ * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
27
+ * })
28
+ *
29
+ * return (
30
+ * <button
31
+ * onClick={() =>
32
+ * addMutation.mutate('Item', {
33
+ * onError: (error) => console.error('Failed to add item:', error),
34
+ * })
35
+ * }
36
+ * >
37
+ * Add
38
+ * </button>
39
+ * )
40
+ * }
41
+ * ```
42
+ *
43
+ * @example
44
+ * Rendering the mutation's own state, rather than just firing it off:
45
+ * ```tsx
46
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
47
+ *
48
+ * function AddTodo() {
49
+ * const queryClient = useQueryClient()
50
+ *
51
+ * const addMutation = useMutation({
52
+ * mutationFn: addTodo,
53
+ * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
54
+ * })
55
+ *
56
+ * return (
57
+ * <div>
58
+ * {addMutation.isPending ? (
59
+ * 'Adding todo...'
60
+ * ) : (
61
+ * <>
62
+ * {addMutation.isError ? (
63
+ * <div>An error occurred: {addMutation.error.message}</div>
64
+ * ) : null}
65
+ * <button onClick={() => addMutation.mutate('Item')}>Add</button>
66
+ * </>
67
+ * )}
68
+ * </div>
69
+ * )
70
+ * }
71
+ * ```
72
+ *
73
+ * @example
74
+ * Optimistic update via `onMutate`, rolling back on `onError`:
75
+ * ```tsx
76
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
77
+ *
78
+ * function AddTodo() {
79
+ * const queryClient = useQueryClient()
80
+ *
81
+ * const addMutation = useMutation({
82
+ * mutationFn: addTodo,
83
+ * onMutate: async (newTodo) => {
84
+ * await queryClient.cancelQueries({ queryKey: ['todos'] })
85
+ * const previousTodos = queryClient.getQueryData<Array<string>>(['todos'])
86
+ *
87
+ * queryClient.setQueryData<Array<string>>(['todos'], (old) => [
88
+ * ...(old ?? []),
89
+ * newTodo,
90
+ * ])
91
+ *
92
+ * // Passed to `onError` as `context` if the mutation fails.
93
+ * return { previousTodos }
94
+ * },
95
+ * onError: (_err, _newTodo, context) => {
96
+ * queryClient.setQueryData(['todos'], context?.previousTodos)
97
+ * },
98
+ * onSettled: () => {
99
+ * queryClient.invalidateQueries({ queryKey: ['todos'] })
100
+ * },
101
+ * })
102
+ *
103
+ * return (
104
+ * <button onClick={() => addMutation.mutate('Item')}>Add</button>
105
+ * )
106
+ * }
107
+ * ```
108
+ *
109
+ * @example
110
+ * Callbacks passed per call to `mutate` only fire for the last call — `mutateAsync` gives you a
111
+ * promise per call instead, so you can wait for all of them:
112
+ * ```tsx
113
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
114
+ *
115
+ * function AddTodos() {
116
+ * const queryClient = useQueryClient()
117
+ *
118
+ * const addMutation = useMutation({
119
+ * mutationFn: addTodo,
120
+ * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
121
+ * })
122
+ *
123
+ * async function handleAddAll(todos: Array<string>) {
124
+ * try {
125
+ * await Promise.all(todos.map((todo) => addMutation.mutateAsync(todo)))
126
+ * } catch (error) {
127
+ * console.error('Failed to add todos:', error)
128
+ * }
129
+ * }
130
+ *
131
+ * return (
132
+ * <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>
133
+ * Add all
134
+ * </button>
135
+ * )
136
+ * }
137
+ * ```
138
+ *
139
+ * @example
140
+ * If some of the mutations above can fail independently of the others, and you want to know which ones
141
+ * did — rather than losing that information the moment the first one rejects — swap `Promise.all` for
142
+ * `Promise.allSettled`:
143
+ * ```tsx
144
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
145
+ *
146
+ * function AddTodos() {
147
+ * const queryClient = useQueryClient()
148
+ *
149
+ * const addMutation = useMutation({
150
+ * mutationFn: addTodo,
151
+ * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
152
+ * })
153
+ *
154
+ * async function handleAddAll(todos: Array<string>) {
155
+ * const results = await Promise.allSettled(
156
+ * todos.map((todo) => addMutation.mutateAsync(todo)),
157
+ * )
158
+ *
159
+ * results.forEach((result, index) => {
160
+ * if (result.status === 'rejected') {
161
+ * console.error(`Failed to add "${todos[index]}":`, result.reason)
162
+ * }
163
+ * })
164
+ * }
165
+ *
166
+ * return (
167
+ * <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>
168
+ * Add all
169
+ * </button>
170
+ * )
171
+ * }
172
+ * ```
173
+ */
4
174
  declare function useMutation<TData = unknown, TError = DefaultError, TVariables = void, TOnMutateResult = unknown>(options: UseMutationOptions<TData, TError, TVariables, TOnMutateResult>, queryClient?: QueryClient): UseMutationResult<TData, TError, TVariables, TOnMutateResult>;
5
175
  //#endregion
6
176
  export { useMutation };
@@ -1 +1 @@
1
- {"version":3,"file":"useMutation.d.ts","names":[],"sources":["../../src/useMutation.ts"],"mappings":";;;iBAmBgB,YACd,iBACA,SAAS,cACT,mBACA,2BAEA,SAAS,mBAAmB,OAAO,QAAQ,YAAY,kBACvD,cAAc,cACb,kBAAkB,OAAO,QAAQ,YAAY"}
1
+ {"version":3,"file":"useMutation.d.ts","names":[],"sources":["../../src/useMutation.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6LgB,YACd,iBACA,SAAS,cACT,mBACA,2BAEA,SAAS,mBAAmB,OAAO,QAAQ,YAAY,kBACvD,cAAc,cACb,kBAAkB,OAAO,QAAQ,YAAY"}
@@ -3,6 +3,176 @@ import { useSyncExternalStore } from "./utils.js";
3
3
  import { MutationObserver, noop, notifyManager, shouldThrowError } from "@tanstack/query-core";
4
4
  import { useCallback, useEffect, useState } from "preact/hooks";
5
5
  //#region src/useMutation.ts
6
+ /**
7
+ * Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects.
8
+ * `useMutation` is the hook for that.
9
+ *
10
+ * @see {@link mutationOptions} to share these options across multiple `useMutation` call sites.
11
+ * @param options - The {@link UseMutationOptions} to use — everything you can pass to `useMutation`.
12
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
13
+ * be used.
14
+ * @returns `mutate`/`mutateAsync` also accept per-call `onSuccess`/`onError`/`onSettled` callbacks as a second
15
+ * argument, useful for triggering call-site side effects (e.g. navigation) without coupling them to the shared
16
+ * mutation definition. If you make multiple requests, `onSuccess` will fire only after the latest call you've
17
+ * made.
18
+ *
19
+ * @example
20
+ * ```tsx
21
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
22
+ *
23
+ * function AddTodo() {
24
+ * const queryClient = useQueryClient()
25
+ *
26
+ * const addMutation = useMutation({
27
+ * mutationFn: addTodo,
28
+ * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
29
+ * })
30
+ *
31
+ * return (
32
+ * <button
33
+ * onClick={() =>
34
+ * addMutation.mutate('Item', {
35
+ * onError: (error) => console.error('Failed to add item:', error),
36
+ * })
37
+ * }
38
+ * >
39
+ * Add
40
+ * </button>
41
+ * )
42
+ * }
43
+ * ```
44
+ *
45
+ * @example
46
+ * Rendering the mutation's own state, rather than just firing it off:
47
+ * ```tsx
48
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
49
+ *
50
+ * function AddTodo() {
51
+ * const queryClient = useQueryClient()
52
+ *
53
+ * const addMutation = useMutation({
54
+ * mutationFn: addTodo,
55
+ * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
56
+ * })
57
+ *
58
+ * return (
59
+ * <div>
60
+ * {addMutation.isPending ? (
61
+ * 'Adding todo...'
62
+ * ) : (
63
+ * <>
64
+ * {addMutation.isError ? (
65
+ * <div>An error occurred: {addMutation.error.message}</div>
66
+ * ) : null}
67
+ * <button onClick={() => addMutation.mutate('Item')}>Add</button>
68
+ * </>
69
+ * )}
70
+ * </div>
71
+ * )
72
+ * }
73
+ * ```
74
+ *
75
+ * @example
76
+ * Optimistic update via `onMutate`, rolling back on `onError`:
77
+ * ```tsx
78
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
79
+ *
80
+ * function AddTodo() {
81
+ * const queryClient = useQueryClient()
82
+ *
83
+ * const addMutation = useMutation({
84
+ * mutationFn: addTodo,
85
+ * onMutate: async (newTodo) => {
86
+ * await queryClient.cancelQueries({ queryKey: ['todos'] })
87
+ * const previousTodos = queryClient.getQueryData<Array<string>>(['todos'])
88
+ *
89
+ * queryClient.setQueryData<Array<string>>(['todos'], (old) => [
90
+ * ...(old ?? []),
91
+ * newTodo,
92
+ * ])
93
+ *
94
+ * // Passed to `onError` as `context` if the mutation fails.
95
+ * return { previousTodos }
96
+ * },
97
+ * onError: (_err, _newTodo, context) => {
98
+ * queryClient.setQueryData(['todos'], context?.previousTodos)
99
+ * },
100
+ * onSettled: () => {
101
+ * queryClient.invalidateQueries({ queryKey: ['todos'] })
102
+ * },
103
+ * })
104
+ *
105
+ * return (
106
+ * <button onClick={() => addMutation.mutate('Item')}>Add</button>
107
+ * )
108
+ * }
109
+ * ```
110
+ *
111
+ * @example
112
+ * Callbacks passed per call to `mutate` only fire for the last call — `mutateAsync` gives you a
113
+ * promise per call instead, so you can wait for all of them:
114
+ * ```tsx
115
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
116
+ *
117
+ * function AddTodos() {
118
+ * const queryClient = useQueryClient()
119
+ *
120
+ * const addMutation = useMutation({
121
+ * mutationFn: addTodo,
122
+ * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
123
+ * })
124
+ *
125
+ * async function handleAddAll(todos: Array<string>) {
126
+ * try {
127
+ * await Promise.all(todos.map((todo) => addMutation.mutateAsync(todo)))
128
+ * } catch (error) {
129
+ * console.error('Failed to add todos:', error)
130
+ * }
131
+ * }
132
+ *
133
+ * return (
134
+ * <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>
135
+ * Add all
136
+ * </button>
137
+ * )
138
+ * }
139
+ * ```
140
+ *
141
+ * @example
142
+ * If some of the mutations above can fail independently of the others, and you want to know which ones
143
+ * did — rather than losing that information the moment the first one rejects — swap `Promise.all` for
144
+ * `Promise.allSettled`:
145
+ * ```tsx
146
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
147
+ *
148
+ * function AddTodos() {
149
+ * const queryClient = useQueryClient()
150
+ *
151
+ * const addMutation = useMutation({
152
+ * mutationFn: addTodo,
153
+ * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
154
+ * })
155
+ *
156
+ * async function handleAddAll(todos: Array<string>) {
157
+ * const results = await Promise.allSettled(
158
+ * todos.map((todo) => addMutation.mutateAsync(todo)),
159
+ * )
160
+ *
161
+ * results.forEach((result, index) => {
162
+ * if (result.status === 'rejected') {
163
+ * console.error(`Failed to add "${todos[index]}":`, result.reason)
164
+ * }
165
+ * })
166
+ * }
167
+ *
168
+ * return (
169
+ * <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>
170
+ * Add all
171
+ * </button>
172
+ * )
173
+ * }
174
+ * ```
175
+ */
6
176
  function useMutation(options, queryClient) {
7
177
  const client = useQueryClient(queryClient);
8
178
  const [observer] = useState(() => new MutationObserver(client, options));
@@ -1 +1 @@
1
- {"version":3,"file":"useMutation.js","names":[],"sources":["../../src/useMutation.ts"],"sourcesContent":["import {\n MutationObserver,\n noop,\n notifyManager,\n shouldThrowError,\n} from '@tanstack/query-core'\nimport type { DefaultError, QueryClient } from '@tanstack/query-core'\nimport { useCallback, useEffect, useState } from 'preact/hooks'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport type {\n UseMutateFunction,\n UseMutationOptions,\n UseMutationResult,\n} from './types'\nimport { useSyncExternalStore } from './utils'\n\n// HOOK\n\nexport function useMutation<\n TData = unknown,\n TError = DefaultError,\n TVariables = void,\n TOnMutateResult = unknown,\n>(\n options: UseMutationOptions<TData, TError, TVariables, TOnMutateResult>,\n queryClient?: QueryClient,\n): UseMutationResult<TData, TError, TVariables, TOnMutateResult> {\n const client = useQueryClient(queryClient)\n\n const [observer] = useState(\n () =>\n new MutationObserver<TData, TError, TVariables, TOnMutateResult>(\n client,\n options,\n ),\n )\n\n useEffect(() => {\n observer.setOptions(options)\n }, [observer, options])\n\n const result = useSyncExternalStore(\n useCallback(\n (onStoreChange) =>\n observer.subscribe(notifyManager.batchCalls(onStoreChange)),\n [observer],\n ),\n () => observer.getCurrentResult(),\n )\n\n const mutate = useCallback<\n UseMutateFunction<TData, TError, TVariables, TOnMutateResult>\n >(\n (\n ...args: Parameters<\n UseMutateFunction<TData, TError, TVariables, TOnMutateResult>\n >\n ) => {\n observer.mutate(args[0] as TVariables, args[1]).catch(noop)\n },\n [observer],\n )\n\n if (\n result.error &&\n shouldThrowError(observer.options.throwOnError, [result.error])\n ) {\n throw result.error\n }\n\n return { ...result, mutate, mutateAsync: result.mutate }\n}\n"],"mappings":";;;;;AAmBA,SAAgB,YAMd,SACA,aAC+D;CAC/D,MAAM,SAAS,eAAe,WAAW;CAEzC,MAAM,CAAC,YAAY,eAEf,IAAI,iBACF,QACA,OACF,CACJ;CAEA,gBAAgB;EACd,SAAS,WAAW,OAAO;CAC7B,GAAG,CAAC,UAAU,OAAO,CAAC;CAEtB,MAAM,SAAS,qBACb,aACG,kBACC,SAAS,UAAU,cAAc,WAAW,aAAa,CAAC,GAC5D,CAAC,QAAQ,CACX,SACM,SAAS,iBAAiB,CAClC;CAEA,MAAM,SAAS,aAIX,GAAG,SAGA;EACH,SAAS,OAAO,KAAK,IAAkB,KAAK,EAAE,CAAC,CAAC,MAAM,IAAI;CAC5D,GACA,CAAC,QAAQ,CACX;CAEA,IACE,OAAO,SACP,iBAAiB,SAAS,QAAQ,cAAc,CAAC,OAAO,KAAK,CAAC,GAE9D,MAAM,OAAO;CAGf,OAAO;EAAE,GAAG;EAAQ;EAAQ,aAAa,OAAO;CAAO;AACzD"}
1
+ {"version":3,"file":"useMutation.js","names":[],"sources":["../../src/useMutation.ts"],"sourcesContent":["import {\n MutationObserver,\n noop,\n notifyManager,\n shouldThrowError,\n} from '@tanstack/query-core'\nimport type { DefaultError, QueryClient } from '@tanstack/query-core'\nimport { useCallback, useEffect, useState } from 'preact/hooks'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport type {\n UseMutateFunction,\n UseMutationOptions,\n UseMutationResult,\n} from './types'\nimport { useSyncExternalStore } from './utils'\n\n// HOOK\n\n/**\n * Unlike queries, mutations are typically used to create/update/delete data or perform server side-effects.\n * `useMutation` is the hook for that.\n *\n * @see {@link mutationOptions} to share these options across multiple `useMutation` call sites.\n * @param options - The {@link UseMutationOptions} to use — everything you can pass to `useMutation`.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns `mutate`/`mutateAsync` also accept per-call `onSuccess`/`onError`/`onSettled` callbacks as a second\n * argument, useful for triggering call-site side effects (e.g. navigation) without coupling them to the shared\n * mutation definition. If you make multiple requests, `onSuccess` will fire only after the latest call you've\n * made.\n *\n * @example\n * ```tsx\n * import { useMutation, useQueryClient } from '@tanstack/preact-query'\n *\n * function AddTodo() {\n * const queryClient = useQueryClient()\n *\n * const addMutation = useMutation({\n * mutationFn: addTodo,\n * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),\n * })\n *\n * return (\n * <button\n * onClick={() =>\n * addMutation.mutate('Item', {\n * onError: (error) => console.error('Failed to add item:', error),\n * })\n * }\n * >\n * Add\n * </button>\n * )\n * }\n * ```\n *\n * @example\n * Rendering the mutation's own state, rather than just firing it off:\n * ```tsx\n * import { useMutation, useQueryClient } from '@tanstack/preact-query'\n *\n * function AddTodo() {\n * const queryClient = useQueryClient()\n *\n * const addMutation = useMutation({\n * mutationFn: addTodo,\n * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),\n * })\n *\n * return (\n * <div>\n * {addMutation.isPending ? (\n * 'Adding todo...'\n * ) : (\n * <>\n * {addMutation.isError ? (\n * <div>An error occurred: {addMutation.error.message}</div>\n * ) : null}\n * <button onClick={() => addMutation.mutate('Item')}>Add</button>\n * </>\n * )}\n * </div>\n * )\n * }\n * ```\n *\n * @example\n * Optimistic update via `onMutate`, rolling back on `onError`:\n * ```tsx\n * import { useMutation, useQueryClient } from '@tanstack/preact-query'\n *\n * function AddTodo() {\n * const queryClient = useQueryClient()\n *\n * const addMutation = useMutation({\n * mutationFn: addTodo,\n * onMutate: async (newTodo) => {\n * await queryClient.cancelQueries({ queryKey: ['todos'] })\n * const previousTodos = queryClient.getQueryData<Array<string>>(['todos'])\n *\n * queryClient.setQueryData<Array<string>>(['todos'], (old) => [\n * ...(old ?? []),\n * newTodo,\n * ])\n *\n * // Passed to `onError` as `context` if the mutation fails.\n * return { previousTodos }\n * },\n * onError: (_err, _newTodo, context) => {\n * queryClient.setQueryData(['todos'], context?.previousTodos)\n * },\n * onSettled: () => {\n * queryClient.invalidateQueries({ queryKey: ['todos'] })\n * },\n * })\n *\n * return (\n * <button onClick={() => addMutation.mutate('Item')}>Add</button>\n * )\n * }\n * ```\n *\n * @example\n * Callbacks passed per call to `mutate` only fire for the last call — `mutateAsync` gives you a\n * promise per call instead, so you can wait for all of them:\n * ```tsx\n * import { useMutation, useQueryClient } from '@tanstack/preact-query'\n *\n * function AddTodos() {\n * const queryClient = useQueryClient()\n *\n * const addMutation = useMutation({\n * mutationFn: addTodo,\n * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),\n * })\n *\n * async function handleAddAll(todos: Array<string>) {\n * try {\n * await Promise.all(todos.map((todo) => addMutation.mutateAsync(todo)))\n * } catch (error) {\n * console.error('Failed to add todos:', error)\n * }\n * }\n *\n * return (\n * <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>\n * Add all\n * </button>\n * )\n * }\n * ```\n *\n * @example\n * If some of the mutations above can fail independently of the others, and you want to know which ones\n * did — rather than losing that information the moment the first one rejects — swap `Promise.all` for\n * `Promise.allSettled`:\n * ```tsx\n * import { useMutation, useQueryClient } from '@tanstack/preact-query'\n *\n * function AddTodos() {\n * const queryClient = useQueryClient()\n *\n * const addMutation = useMutation({\n * mutationFn: addTodo,\n * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),\n * })\n *\n * async function handleAddAll(todos: Array<string>) {\n * const results = await Promise.allSettled(\n * todos.map((todo) => addMutation.mutateAsync(todo)),\n * )\n *\n * results.forEach((result, index) => {\n * if (result.status === 'rejected') {\n * console.error(`Failed to add \"${todos[index]}\":`, result.reason)\n * }\n * })\n * }\n *\n * return (\n * <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>\n * Add all\n * </button>\n * )\n * }\n * ```\n */\nexport function useMutation<\n TData = unknown,\n TError = DefaultError,\n TVariables = void,\n TOnMutateResult = unknown,\n>(\n options: UseMutationOptions<TData, TError, TVariables, TOnMutateResult>,\n queryClient?: QueryClient,\n): UseMutationResult<TData, TError, TVariables, TOnMutateResult> {\n const client = useQueryClient(queryClient)\n\n const [observer] = useState(\n () =>\n new MutationObserver<TData, TError, TVariables, TOnMutateResult>(\n client,\n options,\n ),\n )\n\n useEffect(() => {\n observer.setOptions(options)\n }, [observer, options])\n\n const result = useSyncExternalStore(\n useCallback(\n (onStoreChange) =>\n observer.subscribe(notifyManager.batchCalls(onStoreChange)),\n [observer],\n ),\n () => observer.getCurrentResult(),\n )\n\n const mutate = useCallback<\n UseMutateFunction<TData, TError, TVariables, TOnMutateResult>\n >(\n (\n ...args: Parameters<\n UseMutateFunction<TData, TError, TVariables, TOnMutateResult>\n >\n ) => {\n observer.mutate(args[0] as TVariables, args[1]).catch(noop)\n },\n [observer],\n )\n\n if (\n result.error &&\n shouldThrowError(observer.options.throwOnError, [result.error])\n ) {\n throw result.error\n }\n\n return { ...result, mutate, mutateAsync: result.mutate }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6LA,SAAgB,YAMd,SACA,aAC+D;CAC/D,MAAM,SAAS,eAAe,WAAW;CAEzC,MAAM,CAAC,YAAY,eAEf,IAAI,iBACF,QACA,OACF,CACJ;CAEA,gBAAgB;EACd,SAAS,WAAW,OAAO;CAC7B,GAAG,CAAC,UAAU,OAAO,CAAC;CAEtB,MAAM,SAAS,qBACb,aACG,kBACC,SAAS,UAAU,cAAc,WAAW,aAAa,CAAC,GAC5D,CAAC,QAAQ,CACX,SACM,SAAS,iBAAiB,CAClC;CAEA,MAAM,SAAS,aAIX,GAAG,SAGA;EACH,SAAS,OAAO,KAAK,IAAkB,KAAK,EAAE,CAAC,CAAC,MAAM,IAAI;CAC5D,GACA,CAAC,QAAQ,CACX;CAEA,IACE,OAAO,SACP,iBAAiB,SAAS,QAAQ,cAAc,CAAC,OAAO,KAAK,CAAC,GAE9D,MAAM,OAAO;CAGf,OAAO;EAAE,GAAG;EAAQ;EAAQ,aAAa,OAAO;CAAO;AACzD"}
@@ -4,6 +4,25 @@ const require_utils = require("./utils.cjs");
4
4
  let _tanstack_query_core = require("@tanstack/query-core");
5
5
  let preact_hooks = require("preact/hooks");
6
6
  //#region src/useMutationState.ts
7
+ /**
8
+ * `useIsMutating` is an optional hook that returns the `number` of mutations that your application is fetching
9
+ * (useful for app-wide loading indicators).
10
+ *
11
+ * @param filters - The {@link MutationFilters} to narrow down the matched mutations.
12
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
13
+ * be used.
14
+ * @returns Will be the `number` of the mutations that your application is currently fetching.
15
+ *
16
+ * @example
17
+ * ```tsx
18
+ * import { useIsMutating } from '@tanstack/preact-query'
19
+ *
20
+ * // How many mutations are fetching?
21
+ * const isMutating = useIsMutating()
22
+ * // How many mutations matching the posts prefix are fetching?
23
+ * const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })
24
+ * ```
25
+ */
7
26
  function useIsMutating(filters, queryClient) {
8
27
  const client = require_QueryClientProvider.useQueryClient(queryClient);
9
28
  return useMutationState({ filters: {
@@ -14,6 +33,61 @@ function useIsMutating(filters, queryClient) {
14
33
  function getResult(mutationCache, options) {
15
34
  return mutationCache.findAll(options.filters).map((mutation) => options.select ? options.select(mutation) : mutation.state);
16
35
  }
36
+ /**
37
+ * `useMutationState` is a hook that gives you access to all mutations in the `MutationCache`. You can pass
38
+ * `filters` ({@link MutationFilters}) to narrow down your mutations, and `select` to transform the mutation
39
+ * state.
40
+ *
41
+ * @param options - The `filters` to narrow down matched mutations, and an optional `select` to transform the
42
+ * mutation state.
43
+ * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will
44
+ * be used.
45
+ * @returns Will be an Array of whatever `select` returns for each matching mutation.
46
+ *
47
+ * @example
48
+ * Get all variables of all running mutations:
49
+ * ```tsx
50
+ * import { useMutationState } from '@tanstack/preact-query'
51
+ *
52
+ * const variables = useMutationState({
53
+ * filters: { status: 'pending' },
54
+ * select: (mutation) => mutation.state.variables,
55
+ * })
56
+ * ```
57
+ *
58
+ * @example
59
+ * Get all data for specific mutations via the `mutationKey`:
60
+ * ```tsx
61
+ * import { useMutation, useMutationState } from '@tanstack/preact-query'
62
+ *
63
+ * const mutationKey = ['posts']
64
+ *
65
+ * // Some mutation that we want to get the state for
66
+ * const mutation = useMutation({
67
+ * mutationKey,
68
+ * mutationFn: createPosts,
69
+ * })
70
+ *
71
+ * const data = useMutationState({
72
+ * // this mutation key needs to match the mutation key of the given mutation (see above)
73
+ * filters: { mutationKey },
74
+ * select: (mutation) => mutation.state.data,
75
+ * })
76
+ * ```
77
+ *
78
+ * @example
79
+ * Access the latest mutation data via the `mutationKey`. Each invocation of `mutate` adds a new entry to the
80
+ * mutation cache for `gcTime` milliseconds — check the last item that `useMutationState` returns to get the
81
+ * latest invocation:
82
+ * ```tsx
83
+ * const data = useMutationState({
84
+ * filters: { mutationKey: ['posts'] },
85
+ * select: (mutation) => mutation.state.data,
86
+ * })
87
+ *
88
+ * const latest = data[data.length - 1]
89
+ * ```
90
+ */
17
91
  function useMutationState(options = {}, queryClient) {
18
92
  const mutationCache = require_QueryClientProvider.useQueryClient(queryClient).getMutationCache();
19
93
  const optionsRef = (0, preact_hooks.useRef)(options);
@@ -1 +1 @@
1
- {"version":3,"file":"useMutationState.cjs","names":["useQueryClient","useRef","useSyncExternalStore","useCallback","replaceEqualDeep"],"sources":["../../src/useMutationState.ts"],"sourcesContent":["import { notifyManager, replaceEqualDeep } from '@tanstack/query-core'\nimport type {\n Mutation,\n MutationCache,\n MutationFilters,\n MutationState,\n QueryClient,\n} from '@tanstack/query-core'\nimport { useCallback, useEffect, useRef } from 'preact/hooks'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport { useSyncExternalStore } from './utils'\n\nexport function useIsMutating(\n filters?: MutationFilters,\n queryClient?: QueryClient,\n): number {\n const client = useQueryClient(queryClient)\n return useMutationState(\n { filters: { ...filters, status: 'pending' } },\n client,\n ).length\n}\n\ntype MutationTypeFromResult<TResult> = [TResult] extends [\n MutationState<\n infer TData,\n infer TError,\n infer TVariables,\n infer TOnMutateResult\n >,\n]\n ? Mutation<TData, TError, TVariables, TOnMutateResult>\n : Mutation\n\ntype MutationStateOptions<\n TResult = MutationState,\n TMutation extends Mutation<any, any, any, any> =\n MutationTypeFromResult<TResult>,\n> = {\n filters?: MutationFilters\n select?: (mutation: TMutation) => TResult\n}\n\nfunction getResult<\n TResult = MutationState,\n TMutation extends Mutation<any, any, any, any> =\n MutationTypeFromResult<TResult>,\n>(\n mutationCache: MutationCache,\n options: MutationStateOptions<TResult, TMutation>,\n): Array<TResult> {\n return mutationCache\n .findAll(options.filters)\n .map(\n (mutation): TResult =>\n (options.select\n ? options.select(mutation as TMutation)\n : mutation.state) as TResult,\n )\n}\n\nexport function useMutationState<\n TResult = MutationState,\n TMutation extends Mutation<any, any, any, any> =\n MutationTypeFromResult<TResult>,\n>(\n options: MutationStateOptions<TResult, TMutation> = {},\n queryClient?: QueryClient,\n): Array<TResult> {\n const mutationCache = useQueryClient(queryClient).getMutationCache()\n const optionsRef = useRef(options)\n const result = useRef<Array<TResult>>(null)\n if (result.current === null) {\n result.current = getResult(mutationCache, options)\n }\n\n useEffect(() => {\n optionsRef.current = options\n })\n\n return useSyncExternalStore(\n useCallback(\n (onStoreChange) =>\n mutationCache.subscribe(() => {\n const nextResult = replaceEqualDeep(\n result.current,\n getResult(mutationCache, optionsRef.current),\n )\n if (result.current !== nextResult) {\n result.current = nextResult\n notifyManager.schedule(onStoreChange)\n }\n }),\n [mutationCache],\n ),\n () => result.current,\n )!\n}\n"],"mappings":";;;;;;AAaA,SAAgB,cACd,SACA,aACQ;CACR,MAAM,SAASA,4BAAAA,eAAe,WAAW;CACzC,OAAO,iBACL,EAAE,SAAS;EAAE,GAAG;EAAS,QAAQ;CAAU,EAAE,GAC7C,MACF,CAAC,CAAC;AACJ;AAsBA,SAAS,UAKP,eACA,SACgB;CAChB,OAAO,cACJ,QAAQ,QAAQ,OAAO,CAAC,CACxB,KACE,aACE,QAAQ,SACL,QAAQ,OAAO,QAAqB,IACpC,SAAS,KACjB;AACJ;AAEA,SAAgB,iBAKd,UAAoD,CAAC,GACrD,aACgB;CAChB,MAAM,gBAAgBA,4BAAAA,eAAe,WAAW,CAAC,CAAC,iBAAiB;CACnE,MAAM,cAAA,GAAaC,aAAAA,OAAAA,CAAO,OAAO;CACjC,MAAM,UAAA,GAASA,aAAAA,OAAAA,CAAuB,IAAI;CAC1C,IAAI,OAAO,YAAY,MACrB,OAAO,UAAU,UAAU,eAAe,OAAO;CAGnD,CAAA,GAAA,aAAA,UAAA,OAAgB;EACd,WAAW,UAAU;CACvB,CAAC;CAED,OAAOC,cAAAA,sBAAAA,GACLC,aAAAA,YAAAA,EACG,kBACC,cAAc,gBAAgB;EAC5B,MAAM,cAAA,GAAaC,qBAAAA,iBAAAA,CACjB,OAAO,SACP,UAAU,eAAe,WAAW,OAAO,CAC7C;EACA,IAAI,OAAO,YAAY,YAAY;GACjC,OAAO,UAAU;GACjB,qBAAA,cAAc,SAAS,aAAa;EACtC;CACF,CAAC,GACH,CAAC,aAAa,CAChB,SACM,OAAO,OACf;AACF"}
1
+ {"version":3,"file":"useMutationState.cjs","names":["useQueryClient","useRef","useSyncExternalStore","useCallback","replaceEqualDeep"],"sources":["../../src/useMutationState.ts"],"sourcesContent":["import { notifyManager, replaceEqualDeep } from '@tanstack/query-core'\nimport type {\n Mutation,\n MutationCache,\n MutationFilters,\n MutationState,\n QueryClient,\n} from '@tanstack/query-core'\nimport { useCallback, useEffect, useRef } from 'preact/hooks'\n\nimport { useQueryClient } from './QueryClientProvider'\nimport { useSyncExternalStore } from './utils'\n\n/**\n * `useIsMutating` is an optional hook that returns the `number` of mutations that your application is fetching\n * (useful for app-wide loading indicators).\n *\n * @param filters - The {@link MutationFilters} to narrow down the matched mutations.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns Will be the `number` of the mutations that your application is currently fetching.\n *\n * @example\n * ```tsx\n * import { useIsMutating } from '@tanstack/preact-query'\n *\n * // How many mutations are fetching?\n * const isMutating = useIsMutating()\n * // How many mutations matching the posts prefix are fetching?\n * const isMutatingPosts = useIsMutating({ mutationKey: ['posts'] })\n * ```\n */\nexport function useIsMutating(\n filters?: MutationFilters,\n queryClient?: QueryClient,\n): number {\n const client = useQueryClient(queryClient)\n return useMutationState(\n { filters: { ...filters, status: 'pending' } },\n client,\n ).length\n}\n\ntype MutationTypeFromResult<TResult> = [TResult] extends [\n MutationState<\n infer TData,\n infer TError,\n infer TVariables,\n infer TOnMutateResult\n >,\n]\n ? Mutation<TData, TError, TVariables, TOnMutateResult>\n : Mutation\n\ntype MutationStateOptions<\n TResult = MutationState,\n TMutation extends Mutation<any, any, any, any> =\n MutationTypeFromResult<TResult>,\n> = {\n filters?: MutationFilters\n select?: (mutation: TMutation) => TResult\n}\n\nfunction getResult<\n TResult = MutationState,\n TMutation extends Mutation<any, any, any, any> =\n MutationTypeFromResult<TResult>,\n>(\n mutationCache: MutationCache,\n options: MutationStateOptions<TResult, TMutation>,\n): Array<TResult> {\n return mutationCache\n .findAll(options.filters)\n .map(\n (mutation): TResult =>\n (options.select\n ? options.select(mutation as TMutation)\n : mutation.state) as TResult,\n )\n}\n\n/**\n * `useMutationState` is a hook that gives you access to all mutations in the `MutationCache`. You can pass\n * `filters` ({@link MutationFilters}) to narrow down your mutations, and `select` to transform the mutation\n * state.\n *\n * @param options - The `filters` to narrow down matched mutations, and an optional `select` to transform the\n * mutation state.\n * @param queryClient - Use this to use a custom `QueryClient`. Otherwise, the one from the nearest context will\n * be used.\n * @returns Will be an Array of whatever `select` returns for each matching mutation.\n *\n * @example\n * Get all variables of all running mutations:\n * ```tsx\n * import { useMutationState } from '@tanstack/preact-query'\n *\n * const variables = useMutationState({\n * filters: { status: 'pending' },\n * select: (mutation) => mutation.state.variables,\n * })\n * ```\n *\n * @example\n * Get all data for specific mutations via the `mutationKey`:\n * ```tsx\n * import { useMutation, useMutationState } from '@tanstack/preact-query'\n *\n * const mutationKey = ['posts']\n *\n * // Some mutation that we want to get the state for\n * const mutation = useMutation({\n * mutationKey,\n * mutationFn: createPosts,\n * })\n *\n * const data = useMutationState({\n * // this mutation key needs to match the mutation key of the given mutation (see above)\n * filters: { mutationKey },\n * select: (mutation) => mutation.state.data,\n * })\n * ```\n *\n * @example\n * Access the latest mutation data via the `mutationKey`. Each invocation of `mutate` adds a new entry to the\n * mutation cache for `gcTime` milliseconds — check the last item that `useMutationState` returns to get the\n * latest invocation:\n * ```tsx\n * const data = useMutationState({\n * filters: { mutationKey: ['posts'] },\n * select: (mutation) => mutation.state.data,\n * })\n *\n * const latest = data[data.length - 1]\n * ```\n */\nexport function useMutationState<\n TResult = MutationState,\n TMutation extends Mutation<any, any, any, any> =\n MutationTypeFromResult<TResult>,\n>(\n options: MutationStateOptions<TResult, TMutation> = {},\n queryClient?: QueryClient,\n): Array<TResult> {\n const mutationCache = useQueryClient(queryClient).getMutationCache()\n const optionsRef = useRef(options)\n const result = useRef<Array<TResult>>(null)\n if (result.current === null) {\n result.current = getResult(mutationCache, options)\n }\n\n useEffect(() => {\n optionsRef.current = options\n })\n\n return useSyncExternalStore(\n useCallback(\n (onStoreChange) =>\n mutationCache.subscribe(() => {\n const nextResult = replaceEqualDeep(\n result.current,\n getResult(mutationCache, optionsRef.current),\n )\n if (result.current !== nextResult) {\n result.current = nextResult\n notifyManager.schedule(onStoreChange)\n }\n }),\n [mutationCache],\n ),\n () => result.current,\n )!\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAgB,cACd,SACA,aACQ;CACR,MAAM,SAASA,4BAAAA,eAAe,WAAW;CACzC,OAAO,iBACL,EAAE,SAAS;EAAE,GAAG;EAAS,QAAQ;CAAU,EAAE,GAC7C,MACF,CAAC,CAAC;AACJ;AAsBA,SAAS,UAKP,eACA,SACgB;CAChB,OAAO,cACJ,QAAQ,QAAQ,OAAO,CAAC,CACxB,KACE,aACE,QAAQ,SACL,QAAQ,OAAO,QAAqB,IACpC,SAAS,KACjB;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,iBAKd,UAAoD,CAAC,GACrD,aACgB;CAChB,MAAM,gBAAgBA,4BAAAA,eAAe,WAAW,CAAC,CAAC,iBAAiB;CACnE,MAAM,cAAA,GAAaC,aAAAA,OAAAA,CAAO,OAAO;CACjC,MAAM,UAAA,GAASA,aAAAA,OAAAA,CAAuB,IAAI;CAC1C,IAAI,OAAO,YAAY,MACrB,OAAO,UAAU,UAAU,eAAe,OAAO;CAGnD,CAAA,GAAA,aAAA,UAAA,OAAgB;EACd,WAAW,UAAU;CACvB,CAAC;CAED,OAAOC,cAAAA,sBAAAA,GACLC,aAAAA,YAAAA,EACG,kBACC,cAAc,gBAAgB;EAC5B,MAAM,cAAA,GAAaC,qBAAAA,iBAAAA,CACjB,OAAO,SACP,UAAU,eAAe,WAAW,OAAO,CAC7C;EACA,IAAI,OAAO,YAAY,YAAY;GACjC,OAAO,UAAU;GACjB,qBAAA,cAAc,SAAS,aAAa;EACtC;CACF,CAAC,GACH,CAAC,aAAa,CAChB,SACM,OAAO,OACf;AACF"}