Merge pull request #4628 from andrejpavlovic/fix/timeout-on-createApi…

…-endpoint-should-throw-TIMEOUT_ERROR Fix `AbortError` being triggered incorrectly on `createApi` endpoint timeout
reduxjs · Sep 24, 2024 · eb11019 · eb11019
2 parents f009cc9 + d9a9106
commit eb11019
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 3 deletions.
diff --git a/packages/toolkit/src/query/fetchBaseQuery.ts b/packages/toolkit/src/query/fetchBaseQuery.ts
@@ -213,7 +213,7 @@ export function fetchBaseQuery({
     )
   }
   return async (arg, api) => {
-    const { signal, getState, extra, endpoint, forced, type } = api
+    const { getState, extra, endpoint, forced, type } = api
     let meta: FetchBaseQueryMeta | undefined
     let {
       url,
@@ -224,6 +224,14 @@ export function fetchBaseQuery({
       timeout = defaultTimeout,
       ...rest
     } = typeof arg == 'string' ? { url: arg } : arg
+
+    let abortController: AbortController | undefined, signal = api.signal
+    if (timeout) {
+      abortController = new AbortController()
+      api.signal.addEventListener('abort', abortController.abort)
+      signal = abortController.signal
+    }
+
     let config: RequestInit = {
       ...baseFetchOptions,
       signal,
@@ -272,10 +280,10 @@ export function fetchBaseQuery({
     let response,
       timedOut = false,
       timeoutId =
-        timeout &&
+        abortController &&
         setTimeout(() => {
           timedOut = true
-          api.abort()
+          abortController!.abort()
         }, timeout)
     try {
       response = await fetchFn(request)
@@ -289,6 +297,7 @@ export function fetchBaseQuery({
       }
     } finally {
       if (timeoutId) clearTimeout(timeoutId)
+      abortController?.signal.removeEventListener('abort', abortController.abort)
     }
     const responseClone = response.clone()
 

diff --git a/packages/toolkit/src/query/tests/createApi.test.ts b/packages/toolkit/src/query/tests/createApi.test.ts
@@ -1147,3 +1147,38 @@ describe('custom serializeQueryArgs per endpoint', () => {
     })
   })
 })
+
+describe('timeout behavior', () => {
+  test('triggers TIMEOUT_ERROR', async () => {
+    const api = createApi({
+      baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com', timeout: 5 }),
+      endpoints: (build) => ({
+        query: build.query<unknown, void>({
+          query: () => '/success',
+        }),
+      }),
+    })
+
+    const storeRef = setupApiStore(api, undefined, {
+      withoutTestLifecycles: true,
+    })
+
+    server.use(
+      http.get(
+        'https://example.com/success',
+        async () => {
+          await delay(10)
+          return HttpResponse.json({ value: 'failed' }, { status: 500 })
+        },
+        { once: true },
+      ),
+    )
+
+    const result = await storeRef.store.dispatch(api.endpoints.query.initiate())
+
+    expect(result?.error).toEqual({
+      status: 'TIMEOUT_ERROR',
+      error: expect.stringMatching(/^AbortError:/),
+    })
+  })
+})