admin/shop-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adapt useMutationWithToast to react-query v5 callback signatures

Browse Source
This commit is contained in:
Kirill
2026-05-27 21:30:42 +05:00
parent 7642edc154
commit d254c3c813
2 changed files with 23 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/shared/lib/__tests__/use-mutation-with-toast.test.tsx
+14 -12
View File
@@ -21,47 +21,49 @@ describe('useMutationWithToast', () => {
})
it('shows success notification on success with successMessage', async () => {
const mutationFn = vi.fn().mockResolvedValue({ ok: true })
const mutationFn = (): Promise<{ ok: boolean }> => Promise.resolve({ ok: true })
const { result } = renderHook(() => useMutationWithToast({ mutationFn, successMessage: 'Done!' }), {
wrapper: createWrapper(),
})
result.current.mutate()
;(result.current.mutate as () => void)()
await waitFor(() => expect(result.current.isSuccess).toBe(true))
expect(addNotification).toHaveBeenCalledWith({ type: 'success', message: 'Done!' })
})
it('does NOT show success notification without successMessage', async () => {
const mutationFn = vi.fn().mockResolvedValue({ ok: true })
const mutationFn = (): Promise<{ ok: boolean }> => Promise.resolve({ ok: true })
const { result } = renderHook(() => useMutationWithToast({ mutationFn }), { wrapper: createWrapper() })
result.current.mutate()
;(result.current.mutate as () => void)()
await waitFor(() => expect(result.current.isSuccess).toBe(true))
expect(addNotification).not.toHaveBeenCalled()
})
it('shows error notification on mutation error', async () => {
const mutationFn = vi.fn().mockRejectedValue(new Error('Boom'))
const err = new Error('Boom')
const mutationFn = (): Promise<never> => Promise.reject(err)
const { result } = renderHook(() => useMutationWithToast({ mutationFn }), { wrapper: createWrapper() })
result.current.mutate()
;(result.current.mutate as () => void)()
await waitFor(() => expect(result.current.isError).toBe(true))
expect(addNotification).toHaveBeenCalledWith({ type: 'error', message: 'Boom' })
})
it('calls user-provided onSuccess callback', async () => {
const onSuccess = vi.fn()
const mutationFn = vi.fn().mockResolvedValue({ ok: true })
const onSuccess: (data: { ok: boolean }, variables: void, onMutateResult: unknown, mutationContext: unknown) => void = vi.fn()
const mutationFn = (): Promise<{ ok: boolean }> => Promise.resolve({ ok: true })
const { result } = renderHook(() => useMutationWithToast({ mutationFn, onSuccess, successMessage: 'OK' }), {
wrapper: createWrapper(),
})
result.current.mutate()
;(result.current.mutate as () => void)()
await waitFor(() => expect(result.current.isSuccess).toBe(true))
expect(onSuccess).toHaveBeenCalled()
})
it('calls user-provided onError callback', async () => {
const onError = vi.fn()
const mutationFn = vi.fn().mockRejectedValue(new Error('fail'))
const onError: (error: Error, variables: void, onMutateResult: unknown, mutationContext: unknown) => void = vi.fn()
const err = new Error('fail')
const mutationFn = (): Promise<never> => Promise.reject(err)
const { result } = renderHook(() => useMutationWithToast({ mutationFn, onError }), { wrapper: createWrapper() })
result.current.mutate()
;(result.current.mutate as () => void)()
await waitFor(() => expect(result.current.isError).toBe(true))
expect(onError).toHaveBeenCalled()
})
client/src/shared/lib/use-mutation-with-toast.ts
+9 -9
View File
@@ -1,32 +1,32 @@
import { useMutation, type UseMutationOptions } from '@tanstack/react-query'
import { useMutation, type MutationFunctionContext, type UseMutationOptions } from '@tanstack/react-query'
import { addNotification } from '../model/notification'
import { getApiErrorMessage } from './get-api-error-message'
type MutationWithToastOptions<TData, TError, TVariables, TContext> = UseMutationOptions<
type MutationWithToastOptions<TData, TError, TVariables, TOnMutateResult> = UseMutationOptions<
TData,
TError,
TVariables,
TContext
TOnMutateResult
> & {
successMessage?: string
}
export function useMutationWithToast<TData = unknown, TError = unknown, TVariables = void, TContext = unknown>(
options: MutationWithToastOptions<TData, TError, TVariables, TContext>,
export function useMutationWithToast<TData = unknown, TError = unknown, TVariables = void, TOnMutateResult = unknown>(
options: MutationWithToastOptions<TData, TError, TVariables, TOnMutateResult>,
) {
const { successMessage, onSuccess, onError, ...mutationOptions } = options
return useMutation({
...mutationOptions,
onSuccess: (data, variables, context) => {
onSuccess: (data: TData, variables: TVariables, onMutateResult: TOnMutateResult, mutationContext: MutationFunctionContext) => {
if (successMessage) {
addNotification({ type: 'success', message: successMessage })
}
onSuccess?.(data, variables, context)
onSuccess?.(data, variables, onMutateResult, mutationContext)
},
onError: (error, variables, context) => {
onError: (error: TError, variables: TVariables, onMutateResult: TOnMutateResult | undefined, mutationContext: MutationFunctionContext) => {
addNotification({ type: 'error', message: getApiErrorMessage(error) })
onError?.(error, variables, context)
onError?.(error, variables, onMutateResult, mutationContext)
},
})
}