Detect and handle partial dataStrategy results (#14627)

Author: brophdawg11

.changeset/violet-needles-impress.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Handle `dataStrategy` implementations that return insufficient result sets by adding errors for routes without any available result

packages/react-router/__tests__/dom/data-browser-router-test.tsx

@@ -7,6 +7,7 @@ import {
 } from "@testing-library/react";
 import * as React from "react";
 import type {
+  DataStrategyResult,
   ErrorResponse,
   Fetcher,
   Location,
@@ -420,6 +421,78 @@ function testDomRouter(
           </div>"
         `);
       });
+
+      it("clears the HydrateFallback when dataStrategy returns partial results during hydration", async () => {
+        let dfd = createDeferred<Record<string, DataStrategyResult>>();
+        let router = createTestRouter(
+          [
+            {
+              id: "root",
+              path: "/",
+              loader: true,
+              HydrateFallback: () => "Loading...",
+              Component: () => (
+                <>
+                  <h1>Root:{useLoaderData()}</h1>
+                  <Outlet />
+                </>
+              ),
+              ErrorBoundary: () => {
+                let error = useRouteError();
+                return (
+                  <pre>
+                    Root:
+                    {error instanceof Error ? error.message : (error as string)}
+                  </pre>
+                );
+              },
+              children: [
+                {
+                  id: "index",
+                  index: true,
+                  loader: true,
+                  Component: () => <h2>Index:{useLoaderData()}</h2>,
+                  ErrorBoundary: () => (
+                    <pre>Index:{useRouteError() as string}</pre>
+                  ),
+                },
+              ],
+            },
+          ],
+          {
+            dataStrategy: () => dfd.promise,
+          },
+        );
+        let { container } = render(<RouterProvider router={router} />);
+
+        expect(getHtml(container)).toMatchInlineSnapshot(`
+          "<div>
+            Loading...
+          </div>"
+        `);
+
+        // Resolve data strategy with only an error at the index route but nothing
+        // for the root route
+        await dfd.resolve({
+          index: {
+            type: "error",
+            result: "INDEX ERROR",
+          },
+        });
+        await tick();
+        await tick();
+
+        // The router stubs in an error for the root route to get out of
+        // displaying the HydrateFallback
+        expect(getHtml(container)).toMatchInlineSnapshot(`
+          "<div>
+            <pre>
+              Root:
+              No result returned from dataStrategy for route root
+            </pre>
+          </div>"
+        `);
+      });
     });
 
     describe("navigations", () => {

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

@@ -3042,6 +3042,32 @@ export function createRouter(init: RouterInit): Router {
       return dataResults;
     }
 
+    // Stub errors where needed if they skipped returning data for routes
+    // above a route which returned an error.  This is a problem if we don't
+    // already have data (or errors) for the ancestor route because we won't be
+    // able to render through that route in order to get down to the actual error
+    // returned on the descendant route
+    if (!isMutationMethod(request.method)) {
+      for (let match of matches) {
+        if (results[match.route.id]?.type === ResultType.error) {
+          break;
+        }
+        if (
+          !results.hasOwnProperty(match.route.id) &&
+          !state.loaderData.hasOwnProperty(match.route.id) &&
+          (!state.errors || !state.errors.hasOwnProperty(match.route.id)) &&
+          match.shouldCallHandler()
+        ) {
+          results[match.route.id] = {
+            type: ResultType.error,
+            result: new Error(
+              `No result returned from dataStrategy for route ${match.route.id}`,
+            ),
+          };
+        }
+      }
+    }
+
     for (let [routeId, result] of Object.entries(results)) {
       if (isRedirectDataStrategyResult(result)) {
         let response = result.result as Response;