Handle fetchers

.changeset/real-adults-protect.md

@@ -0,0 +1,9 @@
+---
+"react-router": minor
+---
+
+Add `fetcherKey` as a parameter to `patchRoutesOnNavigation`
+
+- In framework mode, Lazy Route Discovery will now detect manifest version mismatches after a new deploy
+- On navigations to undiscovered routes, this mismatch will trigger a document reload of the destination path
+- On `fetcher` calls to undiscovered routes, this mismatch will trigger a document reload of the current path

packages/react-router/lib/dom/ssr/fog-of-war.ts

@@ -78,13 +78,13 @@ export function getPatchRoutesOnNavigationFunction(
     return undefined;
   }
 
-  return async ({ path, patch, signal }) => {
+  return async ({ path, patch, signal, fetcherKey }) => {
     if (discoveredPaths.has(path)) {
       return;
     }
     await fetchAndApplyManifestPatches(
       [path],
-      true,
+      fetcherKey ? window.location.href : path,
       manifest,
       routeModules,
       ssr,
@@ -150,7 +150,7 @@ export function useFogOFWarDiscovery(
       try {
         await fetchAndApplyManifestPatches(
           lazyPaths,
-          false,
+          null,
           manifest,
           routeModules,
           ssr,
@@ -185,7 +185,7 @@ export function useFogOFWarDiscovery(
 
 export async function fetchAndApplyManifestPatches(
   paths: string[],
-  reloadOnVersionMismatch: boolean,
+  errorReloadPath: string | null,
   manifest: AssetsManifest,
   routeModules: RouteModules,
   ssr: boolean,
@@ -220,22 +220,22 @@ export async function fetchAndApplyManifestPatches(
       res.status === 204 &&
       res.headers.has("X-Remix-Reload-Document")
     ) {
-      if (reloadOnVersionMismatch) {
-        // TODO: If this was a fetcher call we don't want to navigate - can we
-        // detect and hard reload instead?
-        window.location.href = paths[0];
+      if (errorReloadPath) {
+        // This will hard reload the destination path on navigations, or the
+        // current path on fetcher calls
+        window.location.href = errorReloadPath;
         throw new Error("Detected manifest version mismatch, reloading...");
       } else {
         // No-op during eager route discovery so we will trigger a hard reload
         // of the destination during the next navigation instead of reloading
-        // while the user is sitting on the current page.  Works almost seamlessly
-        // on navigations, but may be slightly more disruptive on fetcher calls.
-        // Still better than the `React.useContext` error that occurs without
-        // this detection though...
+        // while the user is sitting on the current page.  Slightly more
+        // disruptive on fetcher calls because we reload the current page, but
+        // it's better than the `React.useContext` error that occurs without
+        // this detection.
         console.warn(
           "Detected a manifest version mismatch during eager route discovery. " +
-            "The next navigation will result in a new document navigation to sync " +
-            "up with the latest manifest."
+            "The next navigation/fetch to an undiscovered route will result in " +
+            "a new document navigation to sync up with the latest manifest."
         );
         return;
       }

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

@@ -2225,7 +2225,8 @@ export function createRouter(init: RouterInit): Router {
       let discoverResult = await discoverRoutes(
         requestMatches,
         path,
-        fetchRequest.signal
+        fetchRequest.signal,
+        key
       );
 
       if (discoverResult.type === "aborted") {
@@ -2509,7 +2510,8 @@ export function createRouter(init: RouterInit): Router {
       let discoverResult = await discoverRoutes(
         matches,
         path,
-        fetchRequest.signal
+        fetchRequest.signal,
+        key
       );
 
       if (discoverResult.type === "aborted") {
@@ -3168,7 +3170,8 @@ export function createRouter(init: RouterInit): Router {
   async function discoverRoutes(
     matches: AgnosticDataRouteMatch[],
     pathname: string,
-    signal: AbortSignal
+    signal: AbortSignal,
+    fetcherKey?: string
   ): Promise<DiscoverRoutesResult> {
     if (!patchRoutesOnNavigationImpl) {
       return { type: "success", matches };
@@ -3184,6 +3187,7 @@ export function createRouter(init: RouterInit): Router {
           signal,
           path: pathname,
           matches: partialMatches,
+          fetcherKey,
           patch: (routeId, children) => {
             if (signal.aborted) return;
             patchRoutesImpl(

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

@@ -285,6 +285,7 @@ export type AgnosticPatchRoutesOnNavigationFunctionArgs<
   signal: AbortSignal;
   path: string;
   matches: M[];
+  fetcherKey: string | undefined;
   patch: (routeId: string | null, children: O[]) => void;
 };