Wiring up abort controller on RTKQ

[checkDaResume]

Hi all,

I kindly will like to ask a question about how abort control may be wired up with RTKQ. I understand that both base query and endpoint query have a signal API which I could tap into. However, I don't know where I will instantiate an abort controller and how would likely fire the abort command. My scenario is such that, should there be no token supplied to my auth slice via state then the fetch should be cancelled when an attempt to load this component occurs. Since signal is available on both baseQuery and endpoint query I will appreciate if someone could kindly explain the use case scenario for both. A sample of my code is here:

export const massAPI = createApi({
    reducerPath: 'massAPI',
    baseQuery: fetchBaseQuery({
        baseUrl: 'http://localhost:3000/data/',
        prepareHeaders: (header, {getState}) => {
            const token = getState().users.user.token
            if(token){
                header.set('Authorization', `Bearer ${token}`)
            }else{

            }
            header.set('Content-Type', 'application/json')
            return header
        },
       // signal: <- "Access to signal here"
    }),
    endpoints: (builder)=>({
        getData: builder.query({
            query: (date) => ({
                url: `detail/${date}`,
                method: 'GET',
               // signal: <-"Access to signal here"
            }),
        })

Thanks in advance. Cheers.

[phryneas]

signal is already passed in - and you should not tinker with that. You can call .cancel() on your submitted query, but not add a new signal overriding the internal one.

Realistically I think it's the wrong tool for what you are doing here tbh. Because at that point the request is pretty much already done.

If you want to instantly return an error when there is no token in state yet, then better wrap your baseQuery and just return an early error there.

[phryneas]

const [updateUser] = api.endpoints.updateUser.useMutation()


const updating = updateUser("foo")
// oh no, I changed my mind!
updating.abort()

Honestly, it's an absolute edge case.

There is generally very little value in aborting a request once it has started - the server has received it anyways, it will also continue processing it.

[checkDaResume]

LOL @phryneas thanks so much. You are a very good teacher. I appreciate you patience explaining this concept and find the comment on the code 💯 . This is exactly what I was trying to get from it. I will go forward and use the concept of wrapping baseQuery. Thanks again.

[checkDaResume]

It seems I might have another reason why I was considering the .abort() idea. So its established that it is a better idea to wrap the baseQuery for reauthorization based on 401 or 403. However, if the user is logged-out then the query endpoint still keep firing on refresh / remount of component, it doesn't seem obvious a way to handle that promise. In the past (i.e. before I moved to RTKQ), I would send fetch request and then should there be no token supplied (i.e. no user), I will abort the fetch. With the mutation endpoints (like you have shown above), it seems relatively straight forward to call the.cancel() around some logic. However, with query endpoints, it doesn't appear that the endpoint methods are exposed by the hook. Let me illustrate what I mean:

      [updateUser, {data, isLoading, isSuccess, ...etc}] = useUpdateUserMutation() <---- I have access to 'updateUser'
      [getUser, {data, isLoading, isSuccess, ....etc}] = useGetUserQuery() <---- I do NOT have access to 'getUser'

Of course, the issue I am having may just be an outright weakness in the logic for my component but I just like to make sure I am having the right approach. At the moment the data fetch is continuously firing even when the user is logged-out.

[phryneas]

You can always write your endpoint to provide a "unauthorized" tag on a 403 response and invalidate that on login.

[checkDaResume]

Brilliant. Thanks for the tip.

[khaledebdelli]

@checkDaResume https://redux-toolkit.js.org/api/createAsyncThunk#canceling-while-running