Tree structures

[JeremyBradshaw7]

I haven't tried using this library yet, but am considering trying it out. We currently use Redux and it's common that we mirror server state in our global state, so this library is worthy of consideration to make things easier.

We often fetch tree structures from our server and persist in redux by flattening out the structure, then construct as a tree again on injecting via mapStateToProps into components. The flattened structure makes it easy to update any node in the tree in isolation in an immutable way.

We also deserialise all back-end structures into type-safe front-end structures (we use Typescript and declare models using interfaces).

If we moved to React Query:

a) Are there any known pitfalls in deserialising back-end json tree structures into typed tree structures via React Query? I haven't seen any deserialisation in the examples even for array data, let alone tree data.

b) Do the mutation controls of React Query make it easy to update nodes in isolation anywhere in the tree? Would be good to see an example.

[vago]

+1 I am also interested in knowing how one would approach with large tree-like payload from server.

[sergiodxa]

Answer A:
I have been using RQ to fetch large JSON tree structures without issues. It's the same as in Redux, call res.json() from your fetch response and that's all. JS is really fast at that (note: my larges payload were a few mb of data, like ~3mb).

Answer B:
They don't, the useMutation let you wrap any function to run against your server and define something to run before (onMutate) so you could optimistically update it. You can there use any lib that could help you update deep entities of a tree so you can implement optimistic updates, for the function you run against the server it's usually something doing a fetch call.