Skip to content

Conversation

@fero46
Copy link

@fero46 fero46 commented Oct 20, 2023

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
Copy link
Owner

minop1205 commented Oct 31, 2023

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants