Using beforeLoad to inject data into context for deeply nested routes has performance issues

[ashar-nadeem-lumi]

In our application, we have routes that are pretty deeply nested that need access to the context from the parent routes.

For example, consider the following:
https://example.com/dashboard/users/$userId/cars/$carId/parts/$partId

The leaf route (/$partId) is it's own page with an index route. It does not get anything rendered from layout routes from any of the parents. In this page, we may want to render a title that says John Doe-Toyota Corolla-Lug Nut.

To do this, we are currently fetching the relevant data in each parent. /dashboard/users/$userId gets the user object and injects it into the context for itself and children. $carId does the same for itself, etc. This works great and makes our data access very simple. No need to have util files with fetcher functions or anything else. Simply call the api client on the beforeLoad of the parent and get access to it everywhere.

However, this is very unperformant. On the parts page, every time you click a new part in the table, it fetches:

• /users All users
• /users/$userId More info on that one user
• /users/$userId/cars All cars for that user
• /users/$userId/cars/$carId More info on that car
• /users/$userId/cars/$carId/parts All parts for that car
• /users/$userId/cars/$carId/parts/$partId More info for that part

All this in addition to any auth checks, etc. done in /dashboard. Is there no way to cache data in beforeLoad? Or any other pattern which makes accessing data like this easier and more performant? The Tanstack Router documents lack an example like this where data is deeply nested and access to data from very high up in the tree may be needed at the bottom.