Single Fetch: proxy request signal through on interrupted loader calls (

#9738)

.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

packages/remix-react/single-fetch.tsx

@@ -192,12 +192,13 @@ function singleFetchLoaderStrategy(
       m.resolve(async (handler): Promise<HandlerResult> => {
         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