diff --git a/.changeset/fluffy-ways-bathe.md b/.changeset/fluffy-ways-bathe.md new file mode 100644 index 00000000000..16cbe962953 --- /dev/null +++ b/.changeset/fluffy-ways-bathe.md @@ -0,0 +1,5 @@ +--- +"@remix-run/react": patch +--- + +Single Fetch: Proxy `request.signal` through `dataStrategy` for `loader` calls to fix cancellation diff --git a/packages/remix-react/single-fetch.tsx b/packages/remix-react/single-fetch.tsx index 880ce796b87..1543dab05cf 100644 --- a/packages/remix-react/single-fetch.tsx +++ b/packages/remix-react/single-fetch.tsx @@ -192,12 +192,13 @@ function singleFetchLoaderStrategy( m.resolve(async (handler): Promise => { let result: unknown; let url = stripIndexParam(singleFetchUrl(request.url)); + let init = await createRequestInit(request); // When a route has a client loader, it calls it's singular server loader if (manifest.routes[m.route.id].hasClientLoader) { result = await handler(async () => { url.searchParams.set("_routes", m.route.id); - let { data } = await fetchAndDecode(url); + let { data } = await fetchAndDecode(url, init); return unwrapSingleFetchResults( data as SingleFetchResults, m.route.id @@ -214,7 +215,7 @@ function singleFetchLoaderStrategy( matches.filter((m) => m.shouldLoad).map((m) => m.route), url ); - singleFetchPromise = fetchAndDecode(url).then( + singleFetchPromise = fetchAndDecode(url, init).then( ({ data }) => data as SingleFetchResults ); } @@ -307,7 +308,7 @@ export function singleFetchUrl(reqUrl: URL | string) { return url; } -async function fetchAndDecode(url: URL, init?: RequestInit) { +async function fetchAndDecode(url: URL, init: RequestInit) { let res = await fetch(url, init); // Don't do a hard check against the header here. We'll get `text/x-turbo` // when we have a running server, but if folks want to prerender `.data` files