Added 'SafePromise' branded Promises for createAsyncThunk

packages/toolkit/src/createAsyncThunk.ts

@@ -11,6 +11,7 @@ import type {
   Id,
   IsAny,
   IsUnknown,
+  SafePromise,
   TypeGuard,
 } from './tsHelpers'
 import { nanoid } from './nanoid'
@@ -242,7 +243,7 @@ export type AsyncThunkAction<
   dispatch: GetDispatch<ThunkApiConfig>,
   getState: () => GetState<ThunkApiConfig>,
   extra: GetExtra<ThunkApiConfig>
-) => Promise<
+) => SafePromise<
   | ReturnType<AsyncThunkFulfilledActionCreator<Returned, ThunkArg>>
   | ReturnType<AsyncThunkRejectedActionCreator<ThunkArg, ThunkApiConfig>>
 > & {
@@ -676,7 +677,7 @@ export const createAsyncThunk = /* @__PURE__ */ (() => {
           }
           return finalAction
         })()
-        return Object.assign(promise as Promise<any>, {
+        return Object.assign(promise as SafePromise<any>, {
           abort,
           requestId,
           arg,

packages/toolkit/src/index.ts

@@ -203,6 +203,6 @@ export { combineSlices } from './combineSlices'
 
 export type { WithSlice } from './combineSlices'
 
-export type { ExtractDispatchExtensions as TSHelpersExtractDispatchExtensions } from './tsHelpers'
+export type { ExtractDispatchExtensions as TSHelpersExtractDispatchExtensions, SafePromise } from './tsHelpers'
 
 export { formatProdErrorMessage } from './formatProdErrorMessage'

packages/toolkit/src/query/core/buildInitiate.ts

@@ -21,6 +21,8 @@ import type { QueryResultSelectorResult } from './buildSelectors'
 import type { Dispatch } from 'redux'
 import { isNotNullish } from '../utils/isNotNullish'
 import { countObjectKeys } from '../utils/countObjectKeys'
+import type { SafePromise } from '../../tsHelpers'
+import { asSafePromise } from '../../tsHelpers'
 
 declare module './module' {
   export interface ApiEndpointQuery<
@@ -60,7 +62,7 @@ type StartQueryActionCreator<
 
 export type QueryActionCreatorResult<
   D extends QueryDefinition<any, any, any, any>
-> = Promise<QueryResultSelectorResult<D>> & {
+> = SafePromise<QueryResultSelectorResult<D>> & {
   arg: QueryArgFrom<D>
   requestId: string
   subscriptionOptions: SubscriptionOptions | undefined
@@ -90,7 +92,7 @@ type StartMutationActionCreator<
 
 export type MutationActionCreatorResult<
   D extends MutationDefinition<any, any, any, any>
-> = Promise<
+> = SafePromise<
   | { data: ResultTypeFrom<D> }
   | {
       error:
@@ -335,7 +337,7 @@ You must add the middleware for RTK-Query to function correctly!`
         const selectFromState = () => selector(getState())
 
         const statePromise: QueryActionCreatorResult<any> = Object.assign(
-          forceQueryFn
+          (forceQueryFn
             ? // a query has been forced (upsertQueryData)
               // -> we want to resolve it once data has been written with the data that will be written
               thunkResult.then(selectFromState)
@@ -345,7 +347,9 @@ You must add the middleware for RTK-Query to function correctly!`
               Promise.resolve(stateAfter)
             : // query just started or one is already in flight
               // -> wait for the running query, then resolve with data from after that
-              Promise.all([runningQuery, thunkResult]).then(selectFromState),
+              Promise.all([runningQuery, thunkResult]).then(
+                selectFromState
+              )) as SafePromise<any>,
           {
             arg,
             requestId,
@@ -421,10 +425,10 @@ You must add the middleware for RTK-Query to function correctly!`
         const thunkResult = dispatch(thunk)
         middlewareWarning(dispatch)
         const { requestId, abort, unwrap } = thunkResult
-        const returnValuePromise = thunkResult
-          .unwrap()
-          .then((data) => ({ data }))
-          .catch((error) => ({ error }))
+        const returnValuePromise = asSafePromise(
+          thunkResult.unwrap().then((data) => ({ data })),
+          (error) => ({ error })
+        )
 
         const reset = () => {
           dispatch(removeMutationResult({ requestId, fixedCacheKey }))

packages/toolkit/src/tsHelpers.ts

@@ -207,3 +207,21 @@ export type Tail<T extends any[]> = T extends [any, ...infer Tail]
   : never
 
 export type UnknownIfNonSpecific<T> = {} extends T ? unknown : T
+
+/**
+ * A Promise that will never reject.
+ * @see https://github.com/reduxjs/redux-toolkit/issues/4101
+ */
+export type SafePromise<T> = Promise<T> & {
+  __linterBrands: 'SafePromise'
+}
+
+/**
+ * Properly wraps a Promise as a {@link SafePromise} with .catch(fallback).
+ */
+export function asSafePromise<Resolved, Rejected>(
+  promise: Promise<Resolved>,
+  fallback: (error: unknown) => Rejected
+) {
+  return promise.catch(fallback) as SafePromise<Resolved | Rejected>
+}