Abort Fetch API Requests using AbortController

[@colbyfayock]

Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course

[@rahulpagidimarri4677]

Hi Thankyou for the video in this case for each render in useEffect you have created new AbortController instance ,Simple before making a fetch call can't we just call abort() method there ? Once we call that method it cancels the previous api request right ? Please correct me if I'm missing something Thanks

[@colbyfayock]

@@rahulpagidimarri4677 hey not totally following the question about what you're trying to do. whats the use case of what you're trying to achieve?

[@JasonLayton]

Finally! Someone demonstrated how to do it outside of a useEffect. This was so difficult to find, great tutorial. Thank you!

[@colbyfayock]

no problem!!

[@maddytyagi8988]

being serious you are amazing, it’s after 2 days of constant search . i got my answer

[@RefuelTheRocket]

Thank you colleague, you really helped me, i spend a day trying to understand, how it works, and with ur video i finally done it!

[@colbyfayock]

You're welcome. Glad it helped

[@jawyor-k3t]

Great demonstration Colby, as always. The example project is on spot in terms of illustrating the issue and the solution. I have one question. As I understood, the AbortController cancels requests that are initiated but have not been completed yet. So, let's assume fetch returns responses pretty quickly in my connection. Does this mean that I have to type letters quickly for abortcontroller to cancel? And if I type slowly all the previous letters are going to get through. I know you mentioned throttling and stuff at the end, that's probably the solution. I was just wondering about AbortController

[@colbyfayock]

yeah - that's absolutely right. if there's no active request, we can't really cancel it. that's why i had to add the setTimeout inside of the API endpoint because it was too fast, though you could use the Network Tab throttling to potentially see this effect too when testing

[@JonatanKruszewski]

Love your style in how you explain. Neat, clear. Subscribed.

[@colbyfayock]

thank you!!

[@bandekhoda7801]

Very useful! Previously I didn't know how to implement an AbortController in a handler function because of the reasons you listed, so I always just defaulted to using useEffect with the cleanup function being controller.abort LOL

[@colbyfayock]

haha glad it helped!

[@jsde_coder3234]

really helped me out today. Thank you for this video!

[@colbyfayock]

awesome no problem!

[@hardikcc]

Thanks Colby, this was a great help.

[@colbyfayock]

no problem!

[@Elator11777]

This looks nice, however, in a real production envirionment, you'd never have a search function inside of your component, what if it is imported from utils? How do you handle the abort requests in it? Can you pass refs to an imported function?

[@SyedNaqviwork]

very well explained you just earned a sub

[@colbyfayock]

thank you!

[@tchatchabr]

Is it a good approach to create a custom hook for abortController and then use it in any component that we need it?

[@colbyfayock]

it probably would make sense for the whole request to be a custom hook as opposed to just the controller

[@antoninogargiulo2308]

Great video! What if I have an error boundary (Next.js), and I don't want it to be triggered by cancelled request? Should I check the type of the error catched in the catch block?

[@colbyfayock]

did the cancelled request trigger the error boundary? i dont remember having that issue in my code wrapped in a try/catch: github.com/colbyfayock/my-abort-requests/blob/main/src/components/Search/Search.tsx perhaps if you show me the code i can get a better idea to try to reproduce and see

[@rigbyb]

Thanks, helped me understand it :)

[@colbyfayock]

no problem!

[@rg-s8x]

Great explanation, however, on a lighter note, for simple use case like the input key debouncing is a better option.

[@colbyfayock]

best to do both :)

[@rg-s8x]

@@colbyfayock agree!

[@serkanakman9945]

Thanks a lot!

[@colbyfayock]

np!

[@sankaranarayanankm7049]

which is better cleanup of useEffect or abort controller??

[@colbyfayock]

hey im not totally following your question - but i believe aborting in a useEffect cleanup function would be a good pattern to prevent the request from continuing

[@terryellis333]

Does this work for cancelling put reqeusts also, or just fetch? I'm having difficulty getitng it to cancel a PUT

[@colbyfayock]

seemed to work for me! d.pr/i/hDNmgf i tested by simply updating my test API route to PUT: github.com/colbyfayock/my-abort-requests/blob/main/src/app/api/search/route.ts#L5 and the method on the fetch: github.com/colbyfayock/my-abort-requests/blob/main/src/components/Search/Search.tsx#L35

[@terryellis333]

@@colbyfayock Ok thanks; yea trying to figure out why this controller.abort isn't actually cancelling anything for me.

[@colbyfayock]

@@terryellis333is it possible the request is completing before it has a chance to cancel? on my local machine i had to add a timeout for testing purposes

[@terryellis333]

@@colbyfayock Well what's happening is, our web app is doing puts after every field of a form (no submit button :( ) and they're stacking up... and of course we have a race condition. I followed your example and set up an abort controller using a ref; then we're doing an await on a call that does an axios put to store the data and I'm passing in the abort controller to set the signal. I was expecting the first call to get cancelled, instead both complete with a 200 :(

[@colbyfayock]

@@terryellis333got it okay, im not familiar with how this works with Axios, potentially an issue there? but you might have some luck additionally adding throttling on the requests, to prevent the requests from occurring in the first place. that way you're avoiding sending too many requests, but if requests do trigger too quickly still due to differing factors, you have the abortcontroller to manage the cancellation

[@irfansaeedkhan7242]

wow , thanks man, i was searching for something same but when user clicks multiple links to different pages, i want it to abort all others and just focus on the last one, also if person is fetching multiple apis data it should about all and only fetch the last one in react/nextjs app, i am unable to do that or simply logic how to do it in whole application at globa,l level

[@colbyfayock]

glad it helped! for doing something globally you would need to be making all requests through some kind of single queue that's accessible globally

[@Shawn-Mosher]

Couldn’t you use debounce so it’s only fired once when the user stops typing?

[@colbyfayock]

totally! i mention that in there. or maybe i mentioned throttle as opposed to denounce, but generally, yeah. being able to combine the two would likely be the best bet between having a responsive enough UI and still managing the async requests getting fired out

[@devT44]

The error we're getting here is same as CancelledError in axios?

[@colbyfayock]

unfamiliar with axios's handling

[@JavascriptForEverything]

nice one

[@colbyfayock]

Thanks!

[@akylbekrysbekov]

but i think we can solve this problem with debounce

[@colbyfayock]

I think I mention this in the video but the right solution would be to have both for the use case

[@ken2ker495]

can you give me the api of pixar movie , please ? :>

[@colbyfayock]

hey unfortunately it's not a public API, its just an endpoint that i made that searches a static JSON file. you can find that code here and spin it up though! github.com/colbyfayock/my-abort-requests/blob/main/src/app/api/search/route.ts