How can I automatically abort all ongoing (in-flight) API requests when the user navigates to a different route in Next.js? #87228
-
SummaryI'm not using Axios or any other request library — I have my own small fetch wrapper. Is there a recommended pattern in Next.js for managing this? Additional informationNo response ExampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
I guess here you mean requests initiated by users, and not by the framework, or through the framework. I think the easiest, in terms of maintenance and readability is aborting the signal on clean up phase (useEffect, etc), per case. Consider a fetch happening on a shared layout, you likely don't want to discard that one, it depends on use case. I am also making the assumption that we are talking about Client/Browser originated fetch calls. If you are within a Server Component, I think there's no way to tell from within the rendering pass, if the socket has been closed by the client 🤔 - In a Route Handler you can though, in the incoming request there's a signal property you can check to see if the client cancelled. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for the quick response! I was mainly referring to I have a scenario where For Example:
async function fetchData() {
const urls = Array.from({ length: 10 }, () => fetch("https://test.com/api/test"));
const results = await Promise.all(urls);
return results;
}
export default async function Page1() {
const data = await fetchData();
return (
<div>
<h1>Page 1</h1>
<p>Triggered 10 API calls</p>
</div>
);
}
export default function Page1() {
return (
<div>
<h1>Page 1</h1>
<p>No API calls here</p>
</div>
);
}
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<Link href="/page-1">Page 1</Link>
<Link href="/page-2">Page 2</Link>
{children}
</body>
</html>
);
} |
Beta Was this translation helpful? Give feedback.
-
|
Yeah exactly, I don't think there's a reliable, if any, way to cancel these right now. In a Route Handler you can though. I think there are some reasons to keep the model simple and predictable in terms of rendering, but likely not what you wanna hear right now. |
Beta Was this translation helpful? Give feedback.
-
|
Okay, thank you for the clarification! |
Beta Was this translation helpful? Give feedback.
Yeah exactly, I don't think there's a reliable, if any, way to cancel these right now. In a Route Handler you can though. I think there are some reasons to keep the model simple and predictable in terms of rendering, but likely not what you wanna hear right now.