Can I use tanstack router apis to populate a treeview ?

[stevebeauge]

Hi,

I'm evaluating tanstack router to build a new application, which has the following requirements (very simplified):

The left side of the application will contains a treeview.
The user can pick a company from a company picker. The picked company is added as a root node of the treeview.
The company node can be expanded to show both a headquarter node and agency nodes.
Such nodes can also be expanded to show a year node. Every year node can be expanded to show orders of the years,... and so on.

Because I don't want to load the whole database in memory, every node children must be dynamically retrieved when the node is expanded.

Thanks to tanstack router, I can build all pages using routes /pick, /company/$id, /company/$id/$agency/$year, and so on.

So my question is: since the treeview and the route tree will share most of the structure, is there any good way to handle the scenario?

I think about these solutions:

• have a dedicated treeview state management. Use api to retrieve the minimal required data (title, Id) to populate the treeview on demand. Use tanstack router own data fetching to retrieve the whole data with "full" record. This will have potentially two request for the same data
• use react query to load the same data for both treeview and detailed pages, relying on the cache to not load twice the same data. This will produces only one request, but will full details even if only the treeview will consume it
• access tanstack router context apis to read data of the route to populate my treeview on demand (not sure if it's actually feasible).

Do you have any thoughts, regarding my hypothesis, or even any other solution?

Thanks!