Allow async tree walkers?

[strogonoff]

Example use case: I’m reading object data from an async source. I could optimize initial load time by only reading data for top-level nodes at first. Then, when a node is opened, I would fetch child node data by querying my async source—however, that means the walker must be asynchronous.

The key point I think is potential await iter.next() around here. Tree computer might then have to become async as well, and there would need to be some logic for handling delayed opening of nodes (with some sort of “is loading” boolean prop?).

I wonder whether async tree walkers are on the radar, or perhaps I’m missing some way of addressing this challenge that doesn’t require asynchronous walkers🤔

[strogonoff]

On second thought, I think it should be possible within react-vtree as is: e.g. I could start fetching data when node is expanded, then once it’s finished update my structure with newly received child node data and run recomputeTree() with refresh. Going to see if that would allow for good UX.

[Lodin]

Hi @strogonoff, sorry for long delay.

According to the react-vtree idea, all the data changes should be done outside of the tree component. After the data fetching is over, you have to update the treeWalker function (if you use hooks, it is possible with useCallback with your data variable as deps), and the tree traversing will be done again building the tree with the new data. To start the data fetching simply add the fetching function to the each node withing the treeWalker and call it in the Node component.

I'm going to prepare an example for it, so it may be more descriptive. I'll publish it here as well.

[strogonoff]

Understood. That’s the idea I arrived at in the end: when node is expanded, start data query somewhere else and pass isLoading to node component in meantime, then once data is fetched remove isLoading, update tree structure with new data, and recomputeTree.

If I finish this component I’m building with react-vtree soon enough, I’ll try to contribute an example as well…