fix(UseMutationResult): MutationState type should be more specific, to allow narrowing to match useQuery

fix(UseMutationResult): unify result type between core and react

fix(UseMutationResult): revert back mutateAsync to core/types

Author: raoufswe

src/core/mutationObserver.ts

@@ -137,7 +137,7 @@ export class MutationObserver<
       isIdle: state.status === 'idle',
       mutate: this.mutate,
       reset: this.reset,
-    }
+    } as MutationObserverResult<TData, TError, TVariables, TContext>
   }
 
   private notify(options: NotifyOptions) {

src/core/types.ts

@@ -564,7 +564,7 @@ export type MutateFunction<
   options?: MutateOptions<TData, TError, TVariables, TContext>
 ) => Promise<TData>
 
-export interface MutationObserverResult<
+export interface MutationObserverBaseResult<
   TData = unknown,
   TError = unknown,
   TVariables = void,
@@ -578,6 +578,77 @@ export interface MutationObserverResult<
   reset: () => void
 }
 
+export interface MutationObserverIdleResult<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown
+> extends MutationObserverBaseResult<TData, TError, TVariables, TContext> {
+  data: undefined
+  error: null
+  isError: false
+  isIdle: true
+  isLoading: false
+  isSuccess: false
+  status: 'idle'
+}
+
+export interface MutationObserverLoadingResult<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown
+> extends MutationObserverBaseResult<TData, TError, TVariables, TContext> {
+  data: undefined
+  error: null
+  isError: false
+  isIdle: false
+  isLoading: true
+  isSuccess: false
+  status: 'loading'
+}
+
+export interface MutationObserverErrorResult<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown
+> extends MutationObserverBaseResult<TData, TError, TVariables, TContext> {
+  data: undefined
+  error: TError
+  isError: true
+  isIdle: false
+  isLoading: false
+  isSuccess: false
+  status: 'error'
+}
+
+export interface MutationObserverSuccessResult<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown
+> extends MutationObserverBaseResult<TData, TError, TVariables, TContext> {
+  data: TData
+  error: null
+  isError: false
+  isIdle: false
+  isLoading: false
+  isSuccess: true
+  status: 'success'
+}
+
+export type MutationObserverResult<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown
+> =
+  | MutationObserverIdleResult<TData, TError, TVariables, TContext>
+  | MutationObserverLoadingResult<TData, TError, TVariables, TContext>
+  | MutationObserverErrorResult<TData, TError, TVariables, TContext>
+  | MutationObserverSuccessResult<TData, TError, TVariables, TContext>
+
 export interface DefaultOptions<TError = unknown> {
   queries?: QueryObserverOptions<unknown, TError>
   mutations?: MutationObserverOptions<unknown, TError, unknown, unknown>

src/react/types.ts

@@ -2,13 +2,13 @@ import { RetryValue, RetryDelayValue } from '../core/retryer'
 import {
   InfiniteQueryObserverOptions,
   InfiniteQueryObserverResult,
-  MutateOptions,
-  MutationStatus,
+  MutationObserverResult,
   MutationKey,
   QueryObserverOptions,
   QueryObserverResult,
   QueryKey,
   MutationFunction,
+  MutateOptions,
 } from '../core/types'
 
 export interface UseBaseQueryOptions<
@@ -99,16 +99,6 @@ export interface UseMutationOptions<
   useErrorBoundary?: boolean
 }
 
-export type UseMutateFunction<
-  TData = unknown,
-  TError = unknown,
-  TVariables = void,
-  TContext = unknown
-> = (
-  variables: TVariables,
-  options?: MutateOptions<TData, TError, TVariables, TContext>
-) => void
-
 export type UseMutateAsyncFunction<
   TData = unknown,
   TError = unknown,
@@ -119,24 +109,18 @@ export type UseMutateAsyncFunction<
   options?: MutateOptions<TData, TError, TVariables, TContext>
 ) => Promise<TData>
 
-export interface UseMutationResult<
+export type UseBaseMutationResult<
   TData = unknown,
   TError = unknown,
   TVariables = unknown,
   TContext = unknown
-> {
-  context: TContext | undefined
-  data: TData | undefined
-  error: TError | null
-  failureCount: number
-  isError: boolean
-  isIdle: boolean
-  isLoading: boolean
-  isPaused: boolean
-  isSuccess: boolean
-  mutate: UseMutateFunction<TData, TError, TVariables, TContext>
+> = MutationObserverResult<TData, TError, TVariables, TContext> & {
   mutateAsync: UseMutateAsyncFunction<TData, TError, TVariables, TContext>
-  reset: () => void
-  status: MutationStatus
-  variables: TVariables | undefined
 }
+
+export type UseMutationResult<
+  TData = unknown,
+  TError = unknown,
+  TVariables = unknown,
+  TContext = unknown
+> = UseBaseMutationResult<TData, TError, TVariables, TContext>

src/react/useMutation.ts

@@ -4,12 +4,8 @@ import { notifyManager } from '../core/notifyManager'
 import { noop, parseMutationArgs } from '../core/utils'
 import { MutationObserver } from '../core/mutationObserver'
 import { useQueryClient } from './QueryClientProvider'
-import {
-  UseMutateFunction,
-  UseMutationOptions,
-  UseMutationResult,
-} from './types'
-import { MutationFunction, MutationKey } from '../core/types'
+import { UseMutationOptions, UseMutationResult } from './types'
+import { MutateFunction, MutationFunction, MutationKey } from '../core/types'
 
 // HOOK
 
@@ -97,9 +93,9 @@ export function useMutation<
   }, [])
 
   const mutate = React.useCallback<
-    UseMutateFunction<TData, TError, TVariables, TContext>
+    MutateFunction<TData, TError, TVariables, TContext>
   >((variables, mutateOptions) => {
-    obsRef.current!.mutate(variables, mutateOptions).catch(noop)
+    return obsRef.current!.mutate(variables, mutateOptions).catch(noop)
   }, [])
 
   if (currentResult.error && obsRef.current.options.useErrorBoundary) {