Short circuit dataStrategy post processing on aborted requests (#13521)

Author: brophdawg11

.changeset/twenty-snakes-love.md

@@ -0,0 +1,7 @@
+---
+"react-router": patch
+---
+
+Short circuit post-processing on aborted `dataStrategy` requests
+
+- This resolves non-user-facing console errors of the form `Cannot read properties of undefined (reading 'result')`

integration/single-fetch-test.ts

@@ -3263,6 +3263,63 @@ test.describe("single-fetch", () => {
       expect(urls[0].endsWith("/fetch.data?_routes=routes%2Ffetch")).toBe(true);
       expect(urls[1].endsWith("/parent/b.data")).toBe(true);
     });
+
+    test("Aborted fetcher loads don't cause console errors", async ({
+      page,
+    }) => {
+      let fixture = await createFixture({
+        files: {
+          ...files,
+          "app/routes/_index.tsx": js`
+            import { Form, redirect, useFetcher } from "react-router";
+
+            export function action() {
+              return redirect("/other");
+            }
+
+            export default function Page() {
+              const fetcher = useFetcher();
+              const isPending = fetcher.state !== "idle";
+
+              return (
+                <>
+                  <button id="fetch" onClick={() => fetcher.load("/fetch")}>
+                    {isPending ? "Loading..." : "First load data"}
+                  </button>
+                  <Form method="POST">
+                    <button type="submit">Then submit before load ends</button>
+                  </Form>
+                </>
+              );
+            }
+          `,
+          "app/routes/other.tsx": js`
+            export default function Component() {
+              return <p id="other">Other</p>;
+            }
+          `,
+          "app/routes/fetch.tsx": js`
+            export async function loader() {
+              await new Promise((r) => setTimeout(r, 10000));
+              return 'nope';
+            }
+          `,
+        },
+      });
+      let appFixture = await createAppFixture(fixture);
+      let app = new PlaywrightFixture(appFixture, page);
+
+      // Capture console logs and uncaught errors
+      let msgs: string[] = [];
+      page.on("console", (msg) => msgs.push(msg.text()));
+      page.on("pageerror", (error) => msgs.push(error.message));
+
+      await app.goto("/", true);
+      app.clickElement("#fetch");
+      await app.clickSubmitButton("/?index");
+      await page.waitForSelector("#other");
+      expect(msgs).toEqual([]);
+    });
   });
 
   test.describe("prefetching", () => {

packages/react-router/__tests__/router/revalidate-test.ts

@@ -1112,8 +1112,12 @@ describe("router.revalidate", () => {
       revalidation: "idle",
       loaderData: { root: "ROOT**" },
     });
+    // The interrupted revalidation hooks into the next completed navigation
+    // so it reflects the end state value
     expect(revalidationValue).toBe("ROOT**");
-    expect(navigationValue).toBe("ROOT**");
+    // The interim navigation gets interrupted and ends while the router still
+    // reflects the original value
+    expect(navigationValue).toBe("ROOT");
     expect(navigationValue2).toBe("ROOT**");
 
     // no-op
@@ -1126,7 +1130,7 @@ describe("router.revalidate", () => {
       loaderData: { root: "ROOT**" },
     });
     expect(revalidationValue).toBe("ROOT**");
-    expect(navigationValue).toBe("ROOT**");
+    expect(navigationValue).toBe("ROOT");
     expect(navigationValue2).toBe("ROOT**");
   });
 });

packages/react-router/lib/router/router.ts

@@ -2864,6 +2864,10 @@ export function createRouter(init: RouterInit): Router {
       return dataResults;
     }
 
+    if (request.signal.aborted) {
+      return dataResults;
+    }
+
     for (let [routeId, result] of Object.entries(results)) {
       if (isRedirectDataStrategyResult(result)) {
         let response = result.result as Response;