fix(UseMutationResult): MutationState type allows type narrowing to match useQuery (TanStack#2620)

Author: raoufswe

src/core/mutationObserver.ts

@@ -4,6 +4,7 @@ import type { QueryClient } from './queryClient'
 import { Subscribable } from './subscribable'
 import type {
   MutateOptions,
+  MutationObserverBaseResult,
   MutationObserverResult,
   MutationObserverOptions,
 } from './types'
@@ -129,7 +130,12 @@ export class MutationObserver<
       ? this.currentMutation.state
       : getDefaultState<TData, TError, TVariables, TContext>()
 
-    this.currentResult = {
+    const result: MutationObserverBaseResult<
+      TData,
+      TError,
+      TVariables,
+      TContext
+    > = {
       ...state,
       isLoading: state.status === 'loading',
       isSuccess: state.status === 'success',
@@ -138,6 +144,13 @@ export class MutationObserver<
       mutate: this.mutate,
       reset: this.reset,
     }
+
+    this.currentResult = result as MutationObserverResult<
+      TData,
+      TError,
+      TVariables,
+      TContext
+    >
   }
 
   private notify(options: NotifyOptions) {

src/core/types.ts

@@ -567,7 +567,7 @@ export type MutateFunction<
   options?: MutateOptions<TData, TError, TVariables, TContext>
 ) => Promise<TData>
 
-export interface MutationObserverResult<
+export interface MutationObserverBaseResult<
   TData = unknown,
   TError = unknown,
   TVariables = void,
@@ -581,6 +581,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<
@@ -119,24 +119,21 @@ 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>
-  mutateAsync: UseMutateAsyncFunction<TData, TError, TVariables, TContext>
-  reset: () => void
-  status: MutationStatus
-  variables: TVariables | undefined
-}
+> = Override<
+  MutationObserverResult<TData, TError, TVariables, TContext>,
+  { mutate: UseMutateFunction<TData, TError, TVariables, TContext> }
+> & { mutateAsync: UseMutateAsyncFunction<TData, TError, TVariables, TContext> }
+
+export type UseMutationResult<
+  TData = unknown,
+  TError = unknown,
+  TVariables = unknown,
+  TContext = unknown
+> = UseBaseMutationResult<TData, TError, TVariables, TContext>
+
+type Override<A, B> = { [K in keyof A]: K extends keyof B ? B[K] : A[K] }