How to resolve references for composed models

[vvitto]

In my application i would like to separate some UI specific views/actions from my business models. For example a have a 'Book' model. This model contains some attributes like: 'price', 'publish_date', and so on.

const BookModel  = types.model({
    id: types.identifier,
    price: types.number,
    published_date: types.string,
    ... and other
}).actions((self) => ({
    rate: flow(function* rate(mark) {
     // send API request to rate the book
    });
})

All these attributes are 'business specific'. I store such model instances in the model called 'DataStore', so i can get access to the business models just by reference from any places (for example from some page store).

I would like to add some UI specific states/actions/views to such business model (but keep them separately, probably i will have another UI specific model in some other places) . For example i have a table component on the page, and i would like to pass 'data' prop inside it. There are cases when rows in table can change it's view depends on some business rules. For example if price of the book is bigger than 15$ we need to display some text inside tooltip, if bigger than 30$ than another text and so on.

So idea is to create some 'ui specific' model:

const TableItem = types.compose(BookModel, types.model({
   isSelected: types.boolean,
   qty: types.number,
   ....
}).views((self) => ({
   get tooltipText() {
       if(self.price.number >= 15.0) {
           return 'some text'
       } else if (self.price.number >= 30.0 ) {
          return 'another text';
       }
   }
}).actions((self) => ({
    toggleSelection() {
        self.isSelected = !self.isSelected
    },
    // and other...
}));

In my app i have a page store:

const BooksListPageModel = types.model({
   tableData: types.array(types.reference(TableItem))
}).actions((self) => ({
   fetchData() {
    // i just put ids in self.tableData
   }
});

I put fetched data in my DataStore, and ids in page store, and getting them by references. But because TableItem is another type mst can't resolve reference to the BookModel.

I see that it's not how mst works, but probably there is a good similar way how i can reach it. Maybe i just missed something in the documentation :)

[EmilTholin]

Hi @vvitto!

Very interesting. The first thing that comes to mind for me is do you really want types.reference(TableItem) to resolve to a BookModel instance? If it would work that way, you would not be able to reliably use views etc. from TableItem (e.g. tooltipText in your example).

[vvitto]

do you really want types.reference(TableItem) to resolve to a BookModel instance?

It would be the best possible solution for me, but i understand that's not how mst works and i need to create an instance of TableItem somewhere in the tree.
So i changed my BooksListPageModel to:

const BooksListPageModel = types.model({
   tableData: types.array(TableItem)
}).actions((self) => ({
   fetchData() {
    // some fetch logic
    // then some logic to create instance of BookModel and puting it in DataStore
    // and then 
    self.tableData = response.data.map((book) => TableItem.create({ bookId: book.id })
   }
});

Also i changed my TableItem model to:

const TableItem = types.compose(BookModel, types.model({
    ... other ui attributes
    bookId: types.reference(BookModel)
}).views((self) => ({
    get book() {
         return self.book;
    }
}).views((self) => ({
    // and now i can use reference to the BookModel to make some formatting logic
    get prettyPrice() {
        return prettyPrice(self.book.price); // or any other logic, for example adding $ symbol.
    }
})

Actually i'm ok with such solution, but i'm afraid that it can lead to a lot of boilerplate with self.tableData = response.data.map((book) => TableItem.create({ bookId: book.id }) because some pages may use 4 - 7 business models.

Also want to know your opinion about such approach of separating UI and business models, maybe i'm doing something wrong at all :)

[EmilTholin]

Composing models is great for many use cases, but since you seem to be after the Book instances I think a reference might be a better fit here.

You could then do something like this:

const BookModel = types
  .model({
    id: types.identifier,
    price: types.number,
    published_date: types.string,
    // ...
  })
  .actions((self) => ({
    rate: flow(function* rate(mark) {
      // send API request to rate the book
    }),
  }));

const TableItem = types
  .model({
    book: types.reference(BookModel),
    isSelected: types.boolean,
    qty: types.number,
    // ...
  })
  .views((self) => ({
    get tooltipText() {
      if (self.book.price.number >= 15.0) {
        return "some text";
      } else if (self.book.price.number >= 30.0) {
        return "another text";
      }
    },
  }))
  .actions((self) => ({
    toggleSelection() {
      self.isSelected = !self.isSelected;
    },
    // ...
  }));