How To Set A Timeout For fetchBaseQuery

[vanenshi]

This might be a really stupid question, but how can I declare a timeout for query or mutation?

I am coming from axios, there was an option to declare a default timeout and manually change it for each endpoint. but on the fetchBaseQuery, I had to use the AbortController to declare a timeout.

I wonder if there is a simpler way to do this?

[phryneas]

Hmm, by wrapping fetchBaseQuery:

const baseBq = fetchBaseQuery(options);
const baseQuery = (
    args: string | FetchArgs,
    api: BaseQueryApi,
    extraOptions: { timeout?: number }) => {
    return Promise.race([
      baseBq(args, api, extraOptions),
      new Promise(resolve => setTimeout(() => resolve({ error: "timed out" }), extraOptions.timeout ?? 10000)
    ])
}

[vanenshi]

I guess so
This is a really helpful feature. can I request you to add this out the box to the fetchBaseQuery? I can help you out with it

[phryneas]

This will be in with #2143 in a future version.

[wootencl]

Possibly silly question but is there a way to get this to work with TS? Seems to be an issue with Promise.race... returning the type of Promise<unknown> (understandably). Was looking at casting the return value as QueryReturnType<...> but seems to cause some unintended side effects. Could also just wait on that PR being merged so no biggie if it's more effort than it's worth.

[wootencl]

Safely disregard the above. Ended up augmenting fetch to handle timeout at the API level (didn't need it at the per endpoint level). Used this for reference.

[Yxn16a]

you can use this way if you would want to put timeout to an endpoint or to a basequery and when you apply it to the basequery, it is applied to all endpoints. if no timeout is applied anywhere, there will not be a default one. I hope this helps.
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'

export const api = createApi({
// Set a default timeout of 10 seconds
baseQuery: fetchBaseQuery({ baseUrl: '/api/', timeout: 10000 }),
endpoints: (builder) => ({
getUsers: builder.query({
query: () => ({
url: users,
// Example: we know the users endpoint is really fast because it's always cached.
// We can assume if its over > 1000ms, something is wrong and we should abort the request.
timeout: 1000,
}),
}),
}),
})

you can read more here https://redux-toolkit.js.org/rtk-query/api/fetchBaseQuery#adding-a-custom-timeout-to-requests

[bravo-stack]

I believe this is the most suitable way to achieve that result.
Thanks for the added link reference.