Persistent / Cached Route(r) Context

[adnanbrq]

In TanStack/Router, there are two types of contexts: Router-level and Route-level contexts. However, only the initially provided Router context remains persistent. An application could benefit if dynamically added context values could also be persisted.

---

Let me explain a problem I’m currently facing.

I heavily rely on Server Functions, which are secured by middleware. This middleware redirects visitors to an authentication page if no session is present or, if unauthorized, to the homepage.

The issue is that I also need to restrict access to certain pages for unauthenticated or unauthorized visitors. My approach is to check whether a visitor has the required permissions. User permissions are available at context.roles, which is set in a layout route using the beforeLoad function. As described in the documentation, beforeLoad is the recommended way to provide context specific to child components/routes. However, whenever a visitor navigates to a different page, all roles and permissions are re-fetched.

I would like to implement a caching mechanism for route(r) contexts to avoid repeatedly fetching data. While I understand the importance of working with the latest dataset, I’d like a feature similar to loaders, where data can be marked as stale after a specific duration. This would allow contexts to retain their values for a set period before being refreshed.

[schiller-manuel]

if you need caching there, why not use query for that?

[adnanbrq]

How would Query help me with that when I need to check the visitors rights in beforeLoad? I don't have access to the data there to avoid rendering the page. I also do not want to trigger the loader of a route if there is no permission at all.

[schiller-manuel]

you can use query outside of react using e.g. queryClient.fetchQuery() etc.

[adnanbrq]

Sure, I could use queryClient.fetchQuery, but this wouldn’t solve the problem. When the queryFn (a Server Function) throws a redirect, it causes issues on the client side. The client ends up with hydration errors because the query returns undefined, leading to a flicker.

Additionally, the router won’t proceed to the loader function correctly. Instead, it encounters errors, renders the page, and only then triggers the redirect—resulting in a poor user experience.

---

There’s a DIY Auth example demonstrating how to protect pages from unauthorized access. However, that solution also triggers requests on every preload and every visit, which is not ideal.