types.compose and lifecycle methods

[mortmoe]

Question

I'm working on a project using types.compose to combine several models into one. Specifically we have some smaller models we call Traits that we compose into larger ones. For example a trait could be "Noteable" that lets another model, for example a Project, an Employee or a Media-model, get a list of notes attached to it and some methods to load and handle this. (This corresponds to traits in a Laravel back-end). Works great but I have a question about how lifecycle methods are handled when using compose. Take the following example:

const Note = types.model('note', {
  id: types.identifierNumber
  description: types.string
  ... some other properties
})

const Notable = types.model({
  notes: types.optional(types.array(Note), [])
}).actions(self => ({
   afterCreate(){
     console.log("After create in Notable")
   },
   testMethod(){
     console.log("Testmethod in Noteable")
   },
   ...some other actions
})).views(self => ({
   ...some views
})

const Project = types.compose(types.model({
  id: types.identifierNumber
  ... some other properties
}).actions(self => ({
   afterCreate(){
     console.log("After create in Project")
   },
   testMethod(){
     console.log("Testmethod in Project")
   },
    ...some other actions
})).views(self => ({
   ...some views
}), Noteable).named('project')

To me it seems like BOTH afterCreates are run, but calling testMethod on an instance of project will only run the testMethod from Noteable. Will this always be the case, also for the other lifecycle methods? How would I go about having the testMethod from Project called?

[EmilTholin]

Hi @mortmoe!

You could use the approach outlined in the Simulate inheritance by using type composition part of the documentation and save a reference to the "super" testMethod and call that manually in testMethod in Noteable:

import { types } from "mobx-state-tree";

const Note = types.model("note", {
  id: types.identifierNumber,
  description: types.string
});

const Noteable = types
  .model({
    notes: types.optional(types.array(Note), [])
  })
  .actions((self) => {
    const superTestMethod = self.testMethod;

    return {
      afterCreate() {
        console.log("After create in Notable");
      },
      testMethod() {
        if (superTestMethod) superTestMethod();

        console.log("Testmethod in Noteable");
      }
    };
  });

const Project = types
  .compose(
    types
      .model({
        id: types.identifierNumber
      })
      .actions((self) => ({
        afterCreate() {
          console.log("After create in Project");
        },
        testMethod() {
          console.log("Testmethod in Project");
        }
      })),
    Noteable
  )
  .named("project");

const project = Project.create({ id: 1 });
project.testMethod();
// => After create in Project 
// => After create in Notable 
// => Testmethod in Project 
// => Testmethod in Noteable 

[mortmoe]

Thank you :) Done some testing and this works fine. Also done some testing on all lifecycle methods (afterCreate, afterAttach, beforeDetach and beforeDestroy) and seems like for these they both run.

For context what I think we'll try to do is have some of these traits "load themselves" from back-end based on a view in the main class. For example if the a view called "current" is set this will trigger a load... something like this:

import { types, flow, addDisposer } from "mobx-state-tree";
import { autorun } from "mobx";

const Signature = types.model("signature", {
  id: types.identifierNumber,
  // some more properties
});

const Signable = types
  .model({
    signatures: types.optional(types.array(Signature), [])
  })
  .actions((self) => ({
      afterCreate() {
            let disposer = autorun(() => {
            if (self.current) {
                self.loadSignatures()
            } else {
                self.clearSignatures()
            }
            addDisposer(self, disposer)
      },
      loadSignatures: flow(function* () {
         const response = yield getEnv(self).api.getSignatures(id) // something that fetches signatures from back-end
         self.signatures = response.signatures
      }),
      clearSignatures(){
         self.signatures = []
      }
    }
  ));

const Note = types.model("note", {
  id: types.identifierNumber,
  // some more properties
});

const Noteable = types
  .model({
    notes: types.optional(types.array(Note), [])
  })
  .actions((self) => ({
      afterCreate() {
            let disposer = autorun(() => {
            if (self.current) {
                self.loadNotes()
            } else {
                self.clearNotes()
            }
             addDisposer(self, disposer)
      },
      loadNotes: flow(function* () {
         const response = yield getEnv(self).api.getNotes(id) // something that fetches notes from back-end
         self.notes = response.notes
      }),
      clearNotes(){
         self.notes = []
      }
    }
  ));

const Project = types
  .compose(
    types
      .model({
        id: types.identifierNumber
      })
      .actions((self) => ({
         // some actions
      }))
      .views((self) => ({
         get current(){
             // checks another store if this projects id is set to the current one and returns true if so
         }
      }))
    ,
    Noteable, Signable
  )
  .named("project");

Some models might be just Noteable, other Signable and some will be both. My goal would be to get the models that have several traits (in this case Project that is both Signable and Noteable) to autoload when view/selected/current (or some other condition). Seems to me it will using this pattern :)

[tony]

@mortmoe @EmilTholin It would be nice to see the example added to https://mobx-state-tree.js.org/tips/inheritance, namely the "inlined composing".

const Project = types
  .compose(
    types
      .model({
        id: types.identifierNumber
      })
      .actions((self) => ({
         // some actions
      }))
      .views((self) => ({
         get current(){
             // checks another store if this projects id is set to the current one and returns true if so
         }
      }))
    ,
    Noteable, Signable
  )
  .named("project");