search

minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.
MIT License
516 stars 69 forks source link

Add Lazy Loading Ability #213

Open fero46 opened 10 months ago

fero46 commented 10 months ago

Description

This pull request introduces a minor change that enhances the Treeview component by adding lazy loading capabilities. This change does not disrupt the existing codebase and provides the ability to load child nodes dynamically when needed. The primary idea behind this commit is to determine whether a node has children and, when opening a subnode, update the external item list on behalf of the parent ID. This update is particularly useful when using a query mechanism, such as useQuery, for fetching data.

The following code snippet demonstrates how this change can be implemented:

const { data, isSuccess, status } = useQuery({
    queryKey: ["treeview", name, nodeId],
    queryFn: () => {
         ///... call required nodes
      }
    },
    staleTime: Infinity,
});

By utilizing this approach, the nodeId can be used to fetch the required data for the specific node, and subsequently, the tree nodes inside react-dnd-treeview can be updated. This ensures that the tree remains up-to-date with the latest nodes, improving overall performance and user experience.

minop1205 commented 9 months ago

@fero46 Thank you for your cooperation!

I have one question. If I fetch data with useQuery and then move a child node to another node by drag and drop, I would expect inconsistencies between the result of useQuery and the actual tree state, what is the possible solution to this inconsistency?