Problem with rehydrating a tree structure in mobx-persist

Question

I am having issues hydrating a store which contains a tree data structure consisting of TreeNode objects. I am using following library: https://github.com/pinqy520/mobx-persist

The problem is that the instances get hydrated as objects instead of TreeNodes. My guess is (after reading https://github.com/pinqy520/mobx-persist/issues/25) that I can't use a class definition for persist within the class itself, but I am not sure if this is really the cause.

Thats my TreeNode class:

export default class TreeNode {

    @persist id = Math.random();
    @persist @observable title = "Root";
    @persist @observable collapsed = false; // if node should be shown opened
    @persist('list', TreeNode) @observable childNodes  = []; // <- should this work?
    ...

Any hints wellcome!

Answer 1

I think the problem is that the TreeNode class is not serializable and think that Mobx has the @serializable decorator. And as Self-referencing decorators work in Babel 5.x and Typescript so probably you can do as below:

@persist @serializable(list(object(TreeNode))) @observable childNodes = [];

or maybe without @persist, I have not tested