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

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

Author: raoufswe

src/core/types.ts

@@ -564,7 +564,17 @@ export type MutateFunction<
   options?: MutateOptions<TData, TError, TVariables, TContext>
 ) => Promise<TData>
 
-export interface MutationObserverResult<
+export type MutateAsyncFunction<
+  TData = unknown,
+  TError = unknown,
+  TVariables = void,
+  TContext = unknown
+> = (
+  variables: TVariables,
+  options?: MutateOptions<TData, TError, TVariables, TContext>
+) => Promise<TData>
+
+export interface MutationObserverBaseResult<
   TData = unknown,
   TError = unknown,
   TVariables = void,
@@ -575,9 +585,81 @@ export interface MutationObserverResult<
   isLoading: boolean
   isSuccess: boolean
   mutate: MutateFunction<TData, TError, TVariables, TContext>
+  mutateAsync: MutateAsyncFunction<TData, TError, TVariables, TContext>
   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,8 +2,7 @@ import { RetryValue, RetryDelayValue } from '../core/retryer'
 import {
   InfiniteQueryObserverOptions,
   InfiniteQueryObserverResult,
-  MutateOptions,
-  MutationStatus,
+  MutationObserverResult,
   MutationKey,
   QueryObserverOptions,
   QueryObserverResult,
@@ -99,44 +98,16 @@ export interface UseMutationOptions<
   useErrorBoundary?: boolean
 }
 
-export type UseMutateFunction<
+export type UseBaseMutationResult<
   TData = unknown,
   TError = unknown,
-  TVariables = void,
-  TContext = unknown
-> = (
-  variables: TVariables,
-  options?: MutateOptions<TData, TError, TVariables, TContext>
-) => void
-
-export type UseMutateAsyncFunction<
-  TData = unknown,
-  TError = unknown,
-  TVariables = void,
+  TVariables = unknown,
   TContext = unknown
-> = (
-  variables: TVariables,
-  options?: MutateOptions<TData, TError, TVariables, TContext>
-) => Promise<TData>
+> = MutationObserverResult<TData, TError, TVariables, TContext>
 
-export interface UseMutationResult<
+export type UseMutationResult<
   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>
-  mutateAsync: UseMutateAsyncFunction<TData, TError, TVariables, TContext>
-  reset: () => void
-  status: MutationStatus
-  variables: TVariables | undefined
-}
+> = 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) {