Abort controller usage example

[tcvetkoska]

I need to use the abort controller and upgrade the fetch holder with it, I am trying to follow the doc but I could not find a way how to resolve it. Does someone has any suggestion or idea? @markerikson @phryneas

[markerikson]

@tcvetkoska I'm afraid your question really isn't clear. What are you trying to do? Can you show some code?

[tcvetkoska]

@markerikson I want to use the AbortController in the createApi function, I was looking at this part of documentation. The case that I want to implement is when we have multiple same requests sent, and still waiting for the responses(they are in pending state), to abort the previous ones and leave just the last one

[phryneas]

// on top of file
let lastThunk = undefined


// to trigger in your event handler
if (lastThunk) lastThunk.cancel()
lastThunk = dispatch(myThunk())
lastThunk.then(() => { lastThunk = undefined })

something like this?

[tcvetkoska]

@phryneas thanks for the answer, sorry for the late responding :( , I think yes I tried something as this in my view but it shows that cancel()/ abort() is not a function. I am using the fetchBaseQuery as a client inside of my createApi endpoint.
Also I tried with thunk using the fetch as client (and createSlice as a reducer function) but I think I am doing something wrong again :/. This is the part of the documentation I was also trying to referencing of https://redux-toolkit.js.org/api/createAsyncThunk#canceling-while-running . But I am not quite sure what I need to add in the thunk/ or createApi end point part (I already found that I can access to the signal using the _queryApi but really have no idea how to reuse it) . Or if it's possible to implement the whole logic using the createApi client

[phryneas]

So, please narrow this down. My code above is for createAsyncThunk and will only cancel the signal - you still have to pass the signal, which is part of the thunkApi into your fetch call.

If you want to do something similar with createApi, that would work very differently. But I have to ask: what would you want to do there? There is no real value in cancelling an outgoing request - the request is already sent to the server, the server has already started to process it and you probably won't be able to cancel it on the server side. So all that would happen would be that your request goes into an error state. Just let that request run, it will go into the cache and if it is not used within 60 seconds it will be removed from the cache.

[tcvetkoska]

I would like to use createApi for every single FE-BE interaction to be honest if it's possible. And the need for the abort controller is following: you have run some query (that is costing more time) and right after that one you are running another one (that is faster than the previous) so I would need to have only the results from the latest query shown, I don't really care anymore about the results of the previous query.

[phryneas]

RTK Query will only show you the result of the thing you are actually querying for, so if you make a request for page 2 and then a request for page 3, both results will go into cache, but you will only see page 3.

You do not need an AbortController for that.

An older result will never overwrite a newer result.