Improve fetchBaseQuery default headers handling (#5112)

* Handle formData headers properly

* Add some additional tests from other issues

* Add handling for `accept` headers

Author: markerikson

packages/toolkit/src/query/fetchBaseQuery.ts

@@ -105,6 +105,13 @@ function stripUndefined(obj: any) {
   return copy
 }
 
+// Only set the content-type to json if appropriate. Will not be true for FormData, ArrayBuffer, Blob, etc.
+const isJsonifiable = (body: any) =>
+  typeof body === 'object' &&
+  (isPlainObject(body) ||
+    Array.isArray(body) ||
+    typeof body.toJSON === 'function')
+
 export type FetchBaseQueryArgs = {
   baseUrl?: string
   prepareHeaders?: (
@@ -252,21 +259,36 @@ export function fetchBaseQuery({
         extraOptions,
       })) || headers
 
-    // Only set the content-type to json if appropriate. Will not be true for FormData, ArrayBuffer, Blob, etc.
-    const isJsonifiable = (body: any) =>
-      typeof body === 'object' &&
-      (isPlainObject(body) ||
-        Array.isArray(body) ||
-        typeof body.toJSON === 'function')
+    const bodyIsJsonifiable = isJsonifiable(config.body)
+
+    // Remove content-type for non-jsonifiable bodies to let the browser set it automatically
+    // Exception: keep content-type for string bodies as they might be intentional (text/plain, text/html, etc.)
+    if (
+      config.body != null &&
+      !bodyIsJsonifiable &&
+      typeof config.body !== 'string'
+    ) {
+      config.headers.delete('content-type')
+    }
 
-    if (!config.headers.has('content-type') && isJsonifiable(config.body)) {
+    if (!config.headers.has('content-type') && bodyIsJsonifiable) {
       config.headers.set('content-type', jsonContentType)
     }
 
-    if (isJsonifiable(config.body) && isJsonContentType(config.headers)) {
+    if (bodyIsJsonifiable && isJsonContentType(config.headers)) {
       config.body = JSON.stringify(config.body, jsonReplacer)
     }
 
+    // Set Accept header based on responseHandler if not already set
+    if (!config.headers.has('accept')) {
+      if (responseHandler === 'json') {
+        config.headers.set('accept', 'application/json')
+      } else if (responseHandler === 'text') {
+        config.headers.set('accept', 'text/plain, text/html, */*')
+      }
+      // For 'content-type' responseHandler, don't set Accept (let server decide)
+    }
+
     if (params) {
       const divider = ~url.indexOf('?') ? '&' : '?'
       const query = paramsSerializer

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

@@ -35,7 +35,7 @@ import { userEvent } from '@testing-library/user-event'
 import type { SyncScreen } from '@testing-library/react-render-stream/pure'
 import { createRenderStream } from '@testing-library/react-render-stream/pure'
 import { HttpResponse, http, delay } from 'msw'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import type { InfiniteQueryResultFlags } from '../core/buildSelectors'
 
 // Just setup a temporary in-memory counter for tests that `getIncrementedAmount`.
@@ -1586,6 +1586,80 @@ describe('hooks tests', () => {
       expect(screen.queryByText('Request was aborted')).toBeNull()
     })
 
+    // Based on issue #5079, which I couldn't reproduce but we might as well capture
+    test('useLazyQuery calling abort() multiple times does not throw an error', async () => {
+      const user = userEvent.setup()
+
+      // Create a fresh API instance with fetchBaseQuery and timeout, matching the user's example
+      const timeoutApi = createApi({
+        reducerPath: 'timeoutApi',
+        baseQuery: fetchBaseQuery({
+          baseUrl: 'https://example.com',
+          timeout: 5000,
+        }),
+        endpoints: (builder) => ({
+          getData: builder.query<string, void>({
+            query: () => ({ url: '/data/' }),
+          }),
+        }),
+      })
+
+      const timeoutStoreRef = setupApiStore(timeoutApi as any, undefined, {
+        withoutTestLifecycles: true,
+      })
+
+      // Set up a mock handler for the endpoint
+      server.use(
+        http.get('https://example.com/data/', async () => {
+          await delay(100)
+          return HttpResponse.json('test data')
+        }),
+      )
+
+      function Component() {
+        const [trigger] = timeoutApi.endpoints.getData.useLazyQuery()
+        const abortRef = useRef<(() => void) | undefined>(undefined)
+        const [errorMsg, setErrorMsg] = useState('')
+
+        const handleChange = () => {
+          // Abort any previous request
+          abortRef.current?.()
+
+          // Trigger new request
+          const result = trigger()
+
+          // Store abort function for next call
+          abortRef.current = () => {
+            try {
+              result.abort()
+            } catch (err: any) {
+              setErrorMsg(err.message)
+            }
+          }
+        }
+
+        return (
+          <div>
+            <input data-testid="input" onChange={handleChange} />
+            <div data-testid="error">{errorMsg}</div>
+          </div>
+        )
+      }
+
+      render(<Component />, { wrapper: timeoutStoreRef.wrapper })
+
+      const input = screen.getByTestId('input')
+
+      // Trigger multiple rapid changes that will call abort() multiple times
+      await user.type(input, 'abc')
+
+      // Wait a bit to ensure any errors would have been caught
+      await waitMs(200)
+
+      // Should not have any error messages
+      expect(screen.getByTestId('error').textContent).toBe('')
+    })
+
     test('unwrapping the useLazyQuery trigger result does not throw on ConditionError and instead returns the aggregate error', async () => {
       function User() {
         const [getUser, { data, error }] =

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

@@ -2,6 +2,7 @@ import { setupApiStore } from '@internal/tests/utils/helpers'
 import { createApi } from '../core'
 import type { SubscriptionSelectors } from '../core/buildMiddleware/types'
 import { fakeBaseQuery } from '../fakeBaseQuery'
+import { delay } from '@internal/utils'
 
 let calls = 0
 const api = createApi({
@@ -14,6 +15,14 @@ const api = createApi({
         return { data }
       },
     }),
+    incrementKeep0: build.query<number, void>({
+      async queryFn() {
+        const data = calls++
+        await delay(10)
+        return { data }
+      },
+      keepUnusedDataFor: 0,
+    }),
     failing: build.query<void, void>({
       async queryFn() {
         await Promise.resolve()
@@ -86,6 +95,19 @@ describe('calling initiate without a cache entry, with subscribe: false still re
     })
   })
 
+  test('successful query with keepUnusedDataFor: 0', async () => {
+    const { store, api } = storeRef
+    calls = 0
+    const promise = store.dispatch(
+      api.endpoints.incrementKeep0.initiate(undefined, { subscribe: false }),
+    )
+    expect(isRequestSubscribed('increment(undefined)', promise.requestId)).toBe(
+      false,
+    )
+
+    await expect(promise.unwrap()).resolves.toBe(0)
+  })
+
   test('rejected query', async () => {
     const { store, api } = storeRef
     calls = 0

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

@@ -712,6 +712,7 @@ describe('additional transformResponse behaviors', () => {
       meta: {
         request: {
           headers: {
+            accept: 'application/json',
             'content-type': 'application/json',
           },
         },
@@ -733,7 +734,9 @@ describe('additional transformResponse behaviors', () => {
       value: 'success',
       meta: {
         request: {
-          headers: {},
+          headers: {
+            accept: 'application/json',
+          },
         },
         response: {
           headers: {