@tanstack/preact-query 5.102.4 → 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 (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
@@ -30,7 +30,45 @@ let preact_hooks = require("preact/hooks");
30
30
  * })
31
31
  *
32
32
  * return (
33
- * <button onClick={() => addMutation.mutate('Item')}>Add</button>
33
+ * <button
34
+ * onClick={() =>
35
+ * addMutation.mutate('Item', {
36
+ * onError: (error) => console.error('Failed to add item:', error),
37
+ * })
38
+ * }
39
+ * >
40
+ * Add
41
+ * </button>
42
+ * )
43
+ * }
44
+ * ```
45
+ *
46
+ * @example
47
+ * Rendering the mutation's own state, rather than just firing it off:
48
+ * ```tsx
49
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
50
+ *
51
+ * function AddTodo() {
52
+ * const queryClient = useQueryClient()
53
+ *
54
+ * const addMutation = useMutation({
55
+ * mutationFn: addTodo,
56
+ * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
57
+ * })
58
+ *
59
+ * return (
60
+ * <div>
61
+ * {addMutation.isPending ? (
62
+ * 'Adding todo...'
63
+ * ) : (
64
+ * <>
65
+ * {addMutation.isError ? (
66
+ * <div>An error occurred: {addMutation.error.message}</div>
67
+ * ) : null}
68
+ * <button onClick={() => addMutation.mutate('Item')}>Add</button>
69
+ * </>
70
+ * )}
71
+ * </div>
34
72
  * )
35
73
  * }
36
74
  * ```
@@ -70,6 +108,71 @@ let preact_hooks = require("preact/hooks");
70
108
  * )
71
109
  * }
72
110
  * ```
111
+ *
112
+ * @example
113
+ * Callbacks passed per call to `mutate` only fire for the last call — `mutateAsync` gives you a
114
+ * promise per call instead, so you can wait for all of them:
115
+ * ```tsx
116
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
117
+ *
118
+ * function AddTodos() {
119
+ * const queryClient = useQueryClient()
120
+ *
121
+ * const addMutation = useMutation({
122
+ * mutationFn: addTodo,
123
+ * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
124
+ * })
125
+ *
126
+ * async function handleAddAll(todos: Array<string>) {
127
+ * try {
128
+ * await Promise.all(todos.map((todo) => addMutation.mutateAsync(todo)))
129
+ * } catch (error) {
130
+ * console.error('Failed to add todos:', error)
131
+ * }
132
+ * }
133
+ *
134
+ * return (
135
+ * <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>
136
+ * Add all
137
+ * </button>
138
+ * )
139
+ * }
140
+ * ```
141
+ *
142
+ * @example
143
+ * If some of the mutations above can fail independently of the others, and you want to know which ones
144
+ * did — rather than losing that information the moment the first one rejects — swap `Promise.all` for
145
+ * `Promise.allSettled`:
146
+ * ```tsx
147
+ * import { useMutation, useQueryClient } from '@tanstack/preact-query'
148
+ *
149
+ * function AddTodos() {
150
+ * const queryClient = useQueryClient()
151
+ *
152
+ * const addMutation = useMutation({
153
+ * mutationFn: addTodo,
154
+ * onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
155
+ * })
156
+ *
157
+ * async function handleAddAll(todos: Array<string>) {
158
+ * const results = await Promise.allSettled(
159
+ * todos.map((todo) => addMutation.mutateAsync(todo)),
160
+ * )
161
+ *
162
+ * results.forEach((result, index) => {
163
+ * if (result.status === 'rejected') {
164
+ * console.error(`Failed to add "${todos[index]}":`, result.reason)
165
+ * }
166
+ * })
167
+ * }
168
+ *
169
+ * return (
170
+ * <button onClick={() => handleAddAll(['Todo 1', 'Todo 2', 'Todo 3'])}>
171
+ * Add all
172
+ * </button>
173
+ * )
174
+ * }
175
+ * ```
73
176
  */
74
177
  function useMutation(options, queryClient) {
75
178
  const client = require_QueryClientProvider.useQueryClient(queryClient);
@@ -1 +1 @@
1
- {"version":3,"file":"useMutation.cjs","names":["useQueryClient","useState","MutationObserver","useSyncExternalStore","useCallback","notifyManager","noop","shouldThrowError"],"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 onClick={() => addMutation.mutate('Item')}>Add</button>\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 */\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA,SAAgB,YAMd,SACA,aAC+D;CAC/D,MAAM,SAASA,4BAAAA,eAAe,WAAW;CAEzC,MAAM,CAAC,aAAA,GAAYC,aAAAA,SAAAA,OAEf,IAAIC,qBAAAA,iBACF,QACA,OACF,CACJ;CAEA,CAAA,GAAA,aAAA,UAAA,OAAgB;EACd,SAAS,WAAW,OAAO;CAC7B,GAAG,CAAC,UAAU,OAAO,CAAC;CAEtB,MAAM,SAASC,cAAAA,sBAAAA,GACbC,aAAAA,YAAAA,EACG,kBACC,SAAS,UAAUC,qBAAAA,cAAc,WAAW,aAAa,CAAC,GAC5D,CAAC,QAAQ,CACX,SACM,SAAS,iBAAiB,CAClC;CAEA,MAAM,UAAA,GAASD,aAAAA,YAAAA,EAIX,GAAG,SAGA;EACH,SAAS,OAAO,KAAK,IAAkB,KAAK,EAAE,CAAC,CAAC,MAAME,qBAAAA,IAAI;CAC5D,GACA,CAAC,QAAQ,CACX;CAEA,IACE,OAAO,UAAA,GACPC,qBAAAA,iBAAAA,CAAiB,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.cjs","names":["useQueryClient","useState","MutationObserver","useSyncExternalStore","useCallback","notifyManager","noop","shouldThrowError"],"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,SAASA,4BAAAA,eAAe,WAAW;CAEzC,MAAM,CAAC,aAAA,GAAYC,aAAAA,SAAAA,OAEf,IAAIC,qBAAAA,iBACF,QACA,OACF,CACJ;CAEA,CAAA,GAAA,aAAA,UAAA,OAAgB;EACd,SAAS,WAAW,OAAO;CAC7B,GAAG,CAAC,UAAU,OAAO,CAAC;CAEtB,MAAM,SAASC,cAAAA,sBAAAA,GACbC,aAAAA,YAAAA,EACG,kBACC,SAAS,UAAUC,qBAAAA,cAAc,WAAW,aAAa,CAAC,GAC5D,CAAC,QAAQ,CACX,SACM,SAAS,iBAAiB,CAClC;CAEA,MAAM,UAAA,GAASD,aAAAA,YAAAA,EAIX,GAAG,SAGA;EACH,SAAS,OAAO,KAAK,IAAkB,KAAK,EAAE,CAAC,CAAC,MAAME,qBAAAA,IAAI;CAC5D,GACA,CAAC,QAAQ,CACX;CAEA,IACE,OAAO,UAAA,GACPC,qBAAAA,iBAAAA,CAAiB,SAAS,QAAQ,cAAc,CAAC,OAAO,KAAK,CAAC,GAE9D,MAAM,OAAO;CAGf,OAAO;EAAE,GAAG;EAAQ;EAAQ,aAAa,OAAO;CAAO;AACzD"}
@@ -27,7 +27,45 @@ import { DefaultError, QueryClient } from "@tanstack/query-core";
27
27
  * })
28
28
  *
29
29
  * return (
30
- * <button onClick={() => addMutation.mutate('Item')}>Add</button>
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>
31
69
  * )
32
70
  * }
33
71
  * ```
@@ -67,6 +105,71 @@ import { DefaultError, QueryClient } from "@tanstack/query-core";
67
105
  * )
68
106
  * }
69
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
+ * ```
70
173
  */
71
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>;
72
175
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"useMutation.d.cts","names":[],"sources":["../../src/useMutation.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAsFgB,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"}
@@ -27,7 +27,45 @@ import { DefaultError, QueryClient } from "@tanstack/query-core";
27
27
  * })
28
28
  *
29
29
  * return (
30
- * <button onClick={() => addMutation.mutate('Item')}>Add</button>
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>
31
69
  * )
32
70
  * }
33
71
  * ```
@@ -67,6 +105,71 @@ import { DefaultError, QueryClient } from "@tanstack/query-core";
67
105
  * )
68
106
  * }
69
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
+ * ```
70
173
  */
71
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>;
72
175
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"useMutation.d.ts","names":[],"sources":["../../src/useMutation.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAsFgB,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"}
@@ -29,7 +29,45 @@ import { useCallback, useEffect, useState } from "preact/hooks";
29
29
  * })
30
30
  *
31
31
  * return (
32
- * <button onClick={() => addMutation.mutate('Item')}>Add</button>
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>
33
71
  * )
34
72
  * }
35
73
  * ```
@@ -69,6 +107,71 @@ import { useCallback, useEffect, useState } from "preact/hooks";
69
107
  * )
70
108
  * }
71
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
+ * ```
72
175
  */
73
176
  function useMutation(options, queryClient) {
74
177
  const client = useQueryClient(queryClient);
@@ -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\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 onClick={() => addMutation.mutate('Item')}>Add</button>\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 */\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA,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"}
@@ -1 +1 @@
1
- {"version":3,"file":"useQuery.cjs","names":["useBaseQuery","QueryObserver"],"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,OAAOA,qBAAAA,aAAa,SAASC,qBAAAA,eAAe,WAAW;AACzD"}
1
+ {"version":3,"file":"useQuery.cjs","names":["useBaseQuery","QueryObserver"],"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,OAAOA,qBAAAA,aAAa,SAASC,qBAAAA,eAAe,WAAW;AACzD"}