add timeout option to fetchBaseQuery

Author: Lenz Weber

packages/toolkit/src/createAsyncThunk.ts

@@ -24,6 +24,7 @@ export type BaseThunkAPI<
   extra: E
   requestId: string
   signal: AbortSignal
+  abort: (reason?: string) => void
   rejectWithValue: IsUnknown<
     RejectedMeta,
     (value: RejectedValue) => RejectWithValue<RejectedValue, RejectedMeta>,
@@ -608,6 +609,7 @@ If you want to use the AbortController to react to \`abort\` events, please cons
                 extra,
                 requestId,
                 signal: abortController.signal,
+                abort,
                 rejectWithValue: ((
                   value: RejectedValue,
                   meta?: RejectedMeta

packages/toolkit/src/query/baseQueryTypes.ts

@@ -3,6 +3,7 @@ import type { MaybePromise, UnwrapPromise } from './tsHelpers'
 
 export interface BaseQueryApi {
   signal: AbortSignal
+  abort: (reason?: string) => void
   dispatch: ThunkDispatch<any, any, any>
   getState: () => unknown
   extra: unknown

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

@@ -261,7 +261,15 @@ export function buildThunks<
     ThunkApiMetaConfig & { state: RootState<any, string, ReducerPath> }
   > = async (
     arg,
-    { signal, rejectWithValue, fulfillWithValue, dispatch, getState, extra }
+    {
+      signal,
+      abort,
+      rejectWithValue,
+      fulfillWithValue,
+      dispatch,
+      getState,
+      extra,
+    }
   ) => {
     const endpointDefinition = endpointDefinitions[arg.endpointName]
 
@@ -274,6 +282,7 @@ export function buildThunks<
       let result: QueryReturnValue
       const baseQueryApi = {
         signal,
+        abort,
         dispatch,
         getState,
         extra,

packages/toolkit/src/query/fetchBaseQuery.ts

@@ -25,6 +25,7 @@ export interface FetchArgs extends CustomRequestInit {
   body?: any
   responseHandler?: ResponseHandler
   validateStatus?: (response: Response, body: any) => boolean
+  timeout?: number
 }
 
 /**
@@ -88,6 +89,15 @@ export type FetchBaseQueryError =
       data: string
       error: string
     }
+  | {
+      /**
+       * * `"TIMEOUT_ERROR"`:
+       *   Request timed out
+       **/
+      status: 'TIMEOUT_ERROR'
+      data?: undefined
+      error: string
+    }
   | {
       /**
        * * `"CUSTOM_ERROR"`:
@@ -123,6 +133,7 @@ export type FetchBaseQueryArgs = {
     init?: RequestInit | undefined
   ) => Promise<Response>
   paramsSerializer?: (params: Record<string, any>) => string
+  timeout?: number
 } & RequestInit
 
 export type FetchBaseQueryMeta = { request: Request; response?: Response }
@@ -168,6 +179,7 @@ export function fetchBaseQuery({
   prepareHeaders = (x) => x,
   fetchFn = defaultFetchFn,
   paramsSerializer,
+  timeout: defaultTimeout,
   ...baseFetchOptions
 }: FetchBaseQueryArgs = {}): BaseQueryFn<
   string | FetchArgs,
@@ -192,6 +204,7 @@ export function fetchBaseQuery({
       params = undefined,
       responseHandler = 'json' as const,
       validateStatus = defaultValidateStatus,
+      timeout = defaultTimeout,
       ...rest
     } = typeof arg == 'string' ? { url: arg } : arg
     let config: RequestInit = {
@@ -236,11 +249,26 @@ export function fetchBaseQuery({
     const requestClone = request.clone()
     meta = { request: requestClone }
 
-    let response
+    let response,
+      timedOut = false,
+      timeoutId =
+        timeout &&
+        setTimeout(() => {
+          timedOut = true
+          api.abort()
+        }, timeout)
     try {
       response = await fetchFn(request)
     } catch (e) {
-      return { error: { status: 'FETCH_ERROR', error: String(e) }, meta }
+      return {
+        error: {
+          status: timedOut ? 'TIMEOUT_ERROR' : 'FETCH_ERROR',
+          error: String(e),
+        },
+        meta,
+      }
+    } finally {
+      if (timeoutId) clearTimeout(timeoutId)
     }
     const responseClone = response.clone()
 

packages/toolkit/src/query/tests/createApi.test.ts

@@ -310,6 +310,7 @@ describe('endpoint definition typings', () => {
     const commonBaseQueryApi = {
       dispatch: expect.any(Function),
       endpoint: expect.any(String),
+      abort: expect.any(Function),
       extra: undefined,
       forced: expect.any(Boolean),
       getState: expect.any(Function),
@@ -352,6 +353,7 @@ describe('endpoint definition typings', () => {
             endpoint: expect.any(String),
             getState: expect.any(Function),
             signal: expect.any(Object),
+            abort: expect.any(Function),
             forced: expect.any(Boolean),
             type: expect.any(String),
           },
@@ -364,6 +366,7 @@ describe('endpoint definition typings', () => {
             endpoint: expect.any(String),
             getState: expect.any(Function),
             signal: expect.any(Object),
+            abort: expect.any(Function),
             forced: expect.any(Boolean),
             type: expect.any(String),
           },
@@ -376,6 +379,7 @@ describe('endpoint definition typings', () => {
             endpoint: expect.any(String),
             getState: expect.any(Function),
             signal: expect.any(Object),
+            abort: expect.any(Function),
             // forced: undefined,
             type: expect.any(String),
           },
@@ -388,6 +392,7 @@ describe('endpoint definition typings', () => {
             endpoint: expect.any(String),
             getState: expect.any(Function),
             signal: expect.any(Object),
+            abort: expect.any(Function),
             // forced: undefined,
             type: expect.any(String),
           },

packages/toolkit/src/query/tests/errorHandling.test.tsx

@@ -36,8 +36,12 @@ const failQueryOnce = rest.get('/query', (_, req, ctx) =>
 describe('fetchBaseQuery', () => {
   let commonBaseQueryApiArgs: BaseQueryApi = {} as any
   beforeEach(() => {
+    const abortController = new AbortController()
     commonBaseQueryApiArgs = {
-      signal: new AbortController().signal,
+      signal: abortController.signal,
+      abort: (reason) =>
+        //@ts-ignore
+        abortController.abort(reason),
       dispatch: storeRef.store.dispatch,
       getState: storeRef.store.getState,
       extra: undefined,

packages/toolkit/src/query/tests/fetchBaseQuery.test.tsx

@@ -1,6 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit'
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
-import { setupApiStore } from './helpers'
+import { setupApiStore, waitMs } from './helpers'
 import { server } from './mocks/server'
 // @ts-ignore
 import nodeFetch from 'node-fetch'
@@ -76,8 +76,12 @@ type RootState = ReturnType<typeof storeRef.store.getState>
 
 let commonBaseQueryApi: BaseQueryApi = {} as any
 beforeEach(() => {
+  let abortController = new AbortController()
   commonBaseQueryApi = {
-    signal: new AbortController().signal,
+    signal: abortController.signal,
+    abort: (reason) =>
+      // @ts-ignore
+      abortController.abort(reason),
     dispatch: storeRef.store.dispatch,
     getState: storeRef.store.getState,
     extra: undefined,
@@ -513,11 +517,15 @@ describe('fetchBaseQuery', () => {
     test('prepareHeaders is able to select from a state', async () => {
       let request: any
 
-      const doRequest = async () =>
-        baseQuery(
+      const doRequest = async () => {
+        const abortController = new AbortController()
+        return baseQuery(
           { url: '/echo' },
           {
-            signal: new AbortController().signal,
+            signal: abortController.signal,
+            abort: (reason) =>
+              // @ts-ignore
+              abortController.abort(reason),
             dispatch: storeRef.store.dispatch,
             getState: storeRef.store.getState,
             extra: undefined,
@@ -526,6 +534,7 @@ describe('fetchBaseQuery', () => {
           },
           {}
         )
+      }
 
       ;({ data: request } = await doRequest())
 
@@ -563,11 +572,15 @@ describe('fetchBaseQuery', () => {
         getTokenSilently: async () => 'fakeToken',
       }
 
-      const doRequest = async () =>
-        baseQuery(
+      const doRequest = async () => {
+        const abortController = new AbortController()
+        return baseQuery(
           { url: '/echo' },
           {
-            signal: new AbortController().signal,
+            signal: abortController.signal,
+            abort: (reason) =>
+              // @ts-ignore
+              abortController.abort(reason),
             dispatch: storeRef.store.dispatch,
             getState: storeRef.store.getState,
             extra: fakeAuth0Client,
@@ -577,6 +590,7 @@ describe('fetchBaseQuery', () => {
           },
           {}
         )
+      }
 
       await doRequest()
 
@@ -709,4 +723,29 @@ describe('still throws on completely unexpected errors', () => {
     expect(req).toBeInstanceOf(Promise)
     await expect(req).rejects.toBe(error)
   })
+
+  test('timeout behaviour', async () => {
+    jest.useFakeTimers()
+    let result: any
+    server.use(
+      rest.get('https://example.com/empty', (req, res, ctx) =>
+        res.once(
+          ctx.delay(3000),
+          ctx.json({ ...req, headers: req.headers.all() })
+        )
+      )
+    )
+    Promise.resolve(
+      baseQuery({ url: '/empty', timeout: 2000 }, commonBaseQueryApi, {})
+    ).then((r) => {
+      result = r
+    })
+    await waitMs()
+    jest.runAllTimers()
+    await waitMs()
+    expect(result?.error).toEqual({
+      status: 'TIMEOUT_ERROR',
+      error: 'AbortError: The user aborted a request.',
+    })
+  })
 })