@tanstack/react-router 0.0.1-beta.280 → 0.0.1-beta.281

package/build/types/Matches.d.ts

@@ -26,6 +26,7 @@ export interface RouteMatch<TRouteTree extends AnyRoute = AnyRoute, TRouteId ext
     abortController: AbortController;
     cause: 'preload' | 'enter' | 'stay';
     loaderDeps: RouteById<TRouteTree, TRouteId>['types']['loaderDeps'];
+    invalid: boolean;
 }
 export type AnyRouteMatch = RouteMatch<any, any>;
 export declare function Matches(): React.JSX.Element;

package/build/types/route.d.ts

@@ -34,6 +34,7 @@ export type ParamsFallback<TPath extends string, TParams> = unknown extends TPar
 export type BaseRouteOptions<TParentRoute extends AnyRoute = AnyRoute, TCustomId extends string = string, TPath extends string = string, TSearchSchema extends Record<string, any> = {}, TFullSearchSchema extends Record<string, any> = TSearchSchema, TParams extends AnyPathParams = {}, TAllParams = ParamsFallback<TPath, TParams>, TRouteContext extends RouteContext = RouteContext, TAllContext extends Record<string, any> = AnyContext, TLoaderDeps extends Record<string, any> = {}, TLoaderData extends any = unknown> = RoutePathOptions<TCustomId, TPath> & {
     getParentRoute: () => TParentRoute;
     validateSearch?: SearchSchemaValidator<TSearchSchema>;
+    shouldReload?: boolean | ((match: LoaderFnContext<TAllParams, TFullSearchSchema, TAllContext, TRouteContext>) => any);
 } & (keyof PickRequired<RouteContext> extends never ? {
     beforeLoad?: BeforeLoadFn<TFullSearchSchema, TParentRoute, TAllParams, TRouteContext>;
 } : {

package/build/types/router.d.ts

@@ -162,16 +162,13 @@ export declare class Router<TRouteTree extends AnyRoute = AnyRoute, TDehydrated
     commitLocation: ({ startTransition, ...next }: ParsedLocation & CommitLocationOptions) => Promise<void>;
     buildAndCommitLocation: ({ replace, resetScroll, startTransition, ...rest }?: BuildNextOptions & CommitLocationOptions) => Promise<void>;
     navigate: NavigateFn<TRouteTree>;
-    loadMatches: ({ checkLatest, matches, preload, invalidate, }: {
+    loadMatches: ({ checkLatest, matches, preload, }: {
         checkLatest: () => Promise<void> | undefined;
         matches: AnyRouteMatch[];
         preload?: boolean | undefined;
-        invalidate?: boolean | undefined;
     }) => Promise<RouteMatch[]>;
-    invalidate: () => Promise<void>;
-    load: (opts?: {
-        invalidate?: boolean;
-    }) => Promise<void>;
+    invalidate: () => void;
+    load: () => Promise<void>;
     preloadRoute: (navigateOpts?: ToOptions<TRouteTree>) => Promise<RouteMatch<AnyRoute, any>[]>;
     matchRoute: MatchRouteFn<TRouteTree>;
     injectHtml: (html: string | (() => Promise<string> | string)) => Promise<void>;

package/build/umd/index.development.js

@@ -2326,7 +2326,8 @@
           abortController: new AbortController(),
           fetchCount: 0,
           cause,
-          loaderDeps
+          loaderDeps,
+          invalid: false
         };
 
         // Regardless of whether we're reusing an existing match or creating
@@ -2529,8 +2530,7 @@
     loadMatches = async ({
       checkLatest,
       matches,
-      preload,
-      invalidate
+      preload
     }) => {
       let latestPromise;
       let firstBadMatchIndex;
@@ -2645,24 +2645,27 @@
           const pendingMs = route.options.pendingMs ?? this.options.defaultPendingMs;
           const pendingMinMs = route.options.pendingMinMs ?? this.options.defaultPendingMinMs;
           const shouldPending = !preload && pendingMs && (route.options.pendingComponent ?? this.options.defaultPendingComponent);
+          const loaderContext = {
+            params: match.params,
+            deps: match.loaderDeps,
+            preload: !!preload,
+            parentMatchPromise,
+            abortController: match.abortController,
+            context: match.context,
+            location: this.state.location,
+            navigate: opts => this.navigate({
+              ...opts,
+              from: match.pathname
+            }),
+            cause: preload ? 'preload' : match.cause
+          };
           const fetch = async () => {
             if (match.isFetching) {
               loadPromise = getRouteMatch(this.state, match.id)?.loadPromise;
             } else {
-              const loaderContext = {
-                params: match.params,
-                deps: match.loaderDeps,
-                preload: !!preload,
-                parentMatchPromise,
-                abortController: match.abortController,
-                context: match.context,
-                location: this.state.location,
-                navigate: opts => this.navigate({
-                  ...opts,
-                  from: match.pathname
-                }),
-                cause: preload ? 'preload' : match.cause
-              };
+              // If the user doesn't want the route to reload, just
+              // resolve with the existing loader data
+
               if (match.fetchCount && match.status === 'success') {
                 resolve();
               }
@@ -2729,14 +2732,15 @@
           const age = Date.now() - match.updatedAt;
           let staleAge = preload ? route.options.preloadStaleTime ?? this.options.defaultPreloadStaleTime ?? 30_000 // 30 seconds for preloads by default
           : route.options.staleTime ?? this.options.defaultStaleTime ?? 0;
-          if (match.status === 'success') {
-            // Background Fetching, no need to wait
-            if (age > staleAge) {
-              fetch();
-            }
-          } else {
-            // Critical Fetching, we need to await
 
+          // Default to reloading the route all the time
+          let shouldReload;
+          const shouldReloadOption = route.options.shouldReload;
+
+          // Allow shouldReload to get the last say,
+          // if provided.
+          shouldReload = typeof shouldReloadOption === 'function' ? shouldReloadOption(loaderContext) : shouldReloadOption;
+          if (match.status !== 'success') {
             // If we need to potentially show the pending component,
             // start a timer to show it after the pendingMs
             if (shouldPending) {
@@ -2751,7 +2755,12 @@
                 resolve();
               });
             }
+
+            // Critical Fetching, we need to await
             await fetch();
+          } else if (match.invalid || (shouldReload ?? age > staleAge)) {
+            // Background Fetching, no need to wait
+            fetch();
           }
           resolve();
         }));
@@ -2759,10 +2768,20 @@
       await Promise.all(matchPromises);
       return matches;
     };
-    invalidate = () => this.load({
-      invalidate: true
-    });
-    load = async opts => {
+    invalidate = () => {
+      const invalidate = d => ({
+        ...d,
+        invalid: true
+      });
+      this.__store.setState(s => ({
+        ...s,
+        matches: s.matches.map(invalidate),
+        cachedMatches: s.cachedMatches.map(invalidate),
+        pendingMatches: s.pendingMatches?.map(invalidate)
+      }));
+      this.load();
+    };
+    load = async () => {
       const promise = new Promise(async (resolve, reject) => {
         const next = this.latestLocation;
         const prevLocation = this.state.resolvedLocation;
@@ -2813,8 +2832,7 @@
             // Load the matches
             await this.loadMatches({
               matches: pendingMatches,
-              checkLatest: () => this.checkLatest(promise),
-              invalidate: opts?.invalidate
+              checkLatest: () => this.checkLatest(promise)
             });
           } catch (err) {
             // swallow this error, since we'll display the