@tanstack/preact-query 5.102.4 → 5.102.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/legacy/QueryErrorResetBoundary.cjs +11 -9
- package/build/legacy/QueryErrorResetBoundary.cjs.map +1 -1
- package/build/legacy/QueryErrorResetBoundary.d.cts +11 -9
- package/build/legacy/QueryErrorResetBoundary.d.cts.map +1 -1
- package/build/legacy/QueryErrorResetBoundary.d.ts +11 -9
- package/build/legacy/QueryErrorResetBoundary.d.ts.map +1 -1
- package/build/legacy/QueryErrorResetBoundary.js +11 -9
- package/build/legacy/QueryErrorResetBoundary.js.map +1 -1
- package/build/legacy/useInfiniteQuery.cjs.map +1 -1
- package/build/legacy/useInfiniteQuery.d.cts +28 -24
- package/build/legacy/useInfiniteQuery.d.cts.map +1 -1
- package/build/legacy/useInfiniteQuery.d.ts +28 -24
- package/build/legacy/useInfiniteQuery.d.ts.map +1 -1
- package/build/legacy/useInfiniteQuery.js.map +1 -1
- package/build/legacy/useIsFetching.cjs +14 -0
- package/build/legacy/useIsFetching.cjs.map +1 -1
- package/build/legacy/useIsFetching.d.cts +14 -0
- package/build/legacy/useIsFetching.d.cts.map +1 -1
- package/build/legacy/useIsFetching.d.ts +14 -0
- package/build/legacy/useIsFetching.d.ts.map +1 -1
- package/build/legacy/useIsFetching.js +14 -0
- package/build/legacy/useIsFetching.js.map +1 -1
- package/build/legacy/useMutation.cjs +104 -1
- package/build/legacy/useMutation.cjs.map +1 -1
- package/build/legacy/useMutation.d.cts +104 -1
- package/build/legacy/useMutation.d.cts.map +1 -1
- package/build/legacy/useMutation.d.ts +104 -1
- package/build/legacy/useMutation.d.ts.map +1 -1
- package/build/legacy/useMutation.js +104 -1
- package/build/legacy/useMutation.js.map +1 -1
- package/build/legacy/useQuery.cjs.map +1 -1
- package/build/legacy/useQuery.d.cts +54 -2
- package/build/legacy/useQuery.d.cts.map +1 -1
- package/build/legacy/useQuery.d.ts +54 -2
- package/build/legacy/useQuery.d.ts.map +1 -1
- package/build/legacy/useQuery.js.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.cjs +16 -8
- package/build/legacy/useSuspenseInfiniteQuery.cjs.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.d.cts +16 -8
- package/build/legacy/useSuspenseInfiniteQuery.d.cts.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.d.ts +16 -8
- package/build/legacy/useSuspenseInfiniteQuery.d.ts.map +1 -1
- package/build/legacy/useSuspenseInfiniteQuery.js +16 -8
- package/build/legacy/useSuspenseInfiniteQuery.js.map +1 -1
- package/build/legacy/useSuspenseQueries.cjs.map +1 -1
- package/build/legacy/useSuspenseQueries.d.cts +74 -6
- package/build/legacy/useSuspenseQueries.d.cts.map +1 -1
- package/build/legacy/useSuspenseQueries.d.ts +74 -6
- package/build/legacy/useSuspenseQueries.d.ts.map +1 -1
- package/build/legacy/useSuspenseQueries.js.map +1 -1
- package/build/legacy/useSuspenseQuery.cjs +4 -0
- package/build/legacy/useSuspenseQuery.cjs.map +1 -1
- package/build/legacy/useSuspenseQuery.d.cts +4 -0
- package/build/legacy/useSuspenseQuery.d.cts.map +1 -1
- package/build/legacy/useSuspenseQuery.d.ts +4 -0
- package/build/legacy/useSuspenseQuery.d.ts.map +1 -1
- package/build/legacy/useSuspenseQuery.js +4 -0
- package/build/legacy/useSuspenseQuery.js.map +1 -1
- package/build/modern/QueryErrorResetBoundary.cjs +11 -9
- package/build/modern/QueryErrorResetBoundary.cjs.map +1 -1
- package/build/modern/QueryErrorResetBoundary.d.cts +11 -9
- package/build/modern/QueryErrorResetBoundary.d.cts.map +1 -1
- package/build/modern/QueryErrorResetBoundary.d.ts +11 -9
- package/build/modern/QueryErrorResetBoundary.d.ts.map +1 -1
- package/build/modern/QueryErrorResetBoundary.js +11 -9
- package/build/modern/QueryErrorResetBoundary.js.map +1 -1
- package/build/modern/useInfiniteQuery.cjs.map +1 -1
- package/build/modern/useInfiniteQuery.d.cts +28 -24
- package/build/modern/useInfiniteQuery.d.cts.map +1 -1
- package/build/modern/useInfiniteQuery.d.ts +28 -24
- package/build/modern/useInfiniteQuery.d.ts.map +1 -1
- package/build/modern/useInfiniteQuery.js.map +1 -1
- package/build/modern/useIsFetching.cjs +14 -0
- package/build/modern/useIsFetching.cjs.map +1 -1
- package/build/modern/useIsFetching.d.cts +14 -0
- package/build/modern/useIsFetching.d.cts.map +1 -1
- package/build/modern/useIsFetching.d.ts +14 -0
- package/build/modern/useIsFetching.d.ts.map +1 -1
- package/build/modern/useIsFetching.js +14 -0
- package/build/modern/useIsFetching.js.map +1 -1
- package/build/modern/useMutation.cjs +104 -1
- package/build/modern/useMutation.cjs.map +1 -1
- package/build/modern/useMutation.d.cts +104 -1
- package/build/modern/useMutation.d.cts.map +1 -1
- package/build/modern/useMutation.d.ts +104 -1
- package/build/modern/useMutation.d.ts.map +1 -1
- package/build/modern/useMutation.js +104 -1
- package/build/modern/useMutation.js.map +1 -1
- package/build/modern/useQuery.cjs.map +1 -1
- package/build/modern/useQuery.d.cts +54 -2
- package/build/modern/useQuery.d.cts.map +1 -1
- package/build/modern/useQuery.d.ts +54 -2
- package/build/modern/useQuery.d.ts.map +1 -1
- package/build/modern/useQuery.js.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.cjs +16 -8
- package/build/modern/useSuspenseInfiniteQuery.cjs.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.d.cts +16 -8
- package/build/modern/useSuspenseInfiniteQuery.d.cts.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.d.ts +16 -8
- package/build/modern/useSuspenseInfiniteQuery.d.ts.map +1 -1
- package/build/modern/useSuspenseInfiniteQuery.js +16 -8
- package/build/modern/useSuspenseInfiniteQuery.js.map +1 -1
- package/build/modern/useSuspenseQueries.cjs.map +1 -1
- package/build/modern/useSuspenseQueries.d.cts +74 -6
- package/build/modern/useSuspenseQueries.d.cts.map +1 -1
- package/build/modern/useSuspenseQueries.d.ts +74 -6
- package/build/modern/useSuspenseQueries.d.ts.map +1 -1
- package/build/modern/useSuspenseQueries.js.map +1 -1
- package/build/modern/useSuspenseQuery.cjs +4 -0
- package/build/modern/useSuspenseQuery.cjs.map +1 -1
- package/build/modern/useSuspenseQuery.d.cts +4 -0
- package/build/modern/useSuspenseQuery.d.cts.map +1 -1
- package/build/modern/useSuspenseQuery.d.ts +4 -0
- package/build/modern/useSuspenseQuery.d.ts.map +1 -1
- package/build/modern/useSuspenseQuery.js +4 -0
- package/build/modern/useSuspenseQuery.js.map +1 -1
- package/package.json +3 -3
- package/src/QueryErrorResetBoundary.tsx +11 -9
- package/src/useInfiniteQuery.ts +28 -24
- package/src/useIsFetching.ts +14 -0
- package/src/useMutation.ts +104 -1
- package/src/useQuery.ts +54 -2
- package/src/useSuspenseInfiniteQuery.ts +16 -8
- package/src/useSuspenseQueries.ts +74 -6
- 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
|
|
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":"
|
|
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
|
|
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":"
|
|
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
|
|
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":"
|
|
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
|
|
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":"
|
|
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":";;;;
|
|
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"}
|