MST with Inertia JS

[jhavens-rcn]

Hi there,

After looking at many of the other state mgmt solutions, I really like mobx/mst, so the work is much appreciated.

My question is:
I'm using react with Inertia JS (and a Laravel backend) but in practice, there's quite a bit of prop-drilling that comes into play. So I'd like to have MST pickup on the changes from any/all inertia requests that go out.

So far, I've setup some models like so:
(For additional context, I'm sharing some dummy models I'm testing with (Book, Genre))

PageModel.ts

export const PageModel = t.model('PageModel', {
  component: t.string,
  url: t.string,
  version: t.string,
  clearHistory: false,
  encryptHistory: false,
  props: t.model({
    errors: PageErrors,
    errorBags: t.array(
      t.model({
        [typeof t.string]: t.array(t.string),
      })
    ),
    auth: PageAuth,
    ziggy: ZiggyConfig,
    flash: t.model({
      success: t.maybeNull(t.string),
      error: t.maybeNull(t.string),
    }),
    books: t.array(BookModel),
    genres: t.array(GenreModel),
  }),
})

BookModel.ts

export const BookModel = t
  .model('BookModel', {
    id: t.number,
    title: t.string,
    user_id: t.number,
    published_at: t.maybeNull(t.string),
    created_at: t.string,
    updated_at: t.string,
    genres: t.maybeNull(t.array(GenreModel)),
  })

GenreModel.ts

export const Genre = t
  .model('GenreModel', {
    id: t.number,
    name: t.string,
    created_at: t.string,
    updated_at: t.string,
    pivot: t.maybe(
      t.model({
        book_id: t.number,
        genre_id: t.number,
        created_at: t.string,
        updated_at: t.string,
      })
    ),
  })

DashboardPage.ts

export const DashboardPage = t
  .model('DashboardPage', {
    page: t.reference(PageModel),
    genresSelected: t.array(t.reference(GenreModel)),
  })
  .views((self) => ({
    get genres() {
      if (!self.genresSelected) {
        return self.page.props.genres
      }

      return self.page.props.genres.filter((genre) => {
        return self.genresSelected.map((selected) => selected.id).includes(genre.id)
      })
    },
  }))
  .actions((self) => ({
    addSelectedGenre(genre: GenreInstance) {
      self.genresSelected.push(genre)
    },
    clearSelectedGenres() {
      self.genresSelected.clear()
    },
  }))

---

The DashboardPage is essentially a view model that I've setup which is intended to:

1. Contain all the logic related to the dashboard
2. Combine the other models defined in one place
   Mind you, I'm very new to MST, so you may have a better suggestion on all this.

Ultimately, I've gotten the initial render working, but if/when I some state updates (e.g. using , the store isn't picking up on that.

What would be your recommended way in wiring up the MST store in a way that automatically picks up on the prop changes that Inertia is providing. For reference, Inertia does provide a way to listen to each visit made here. There's also a div with an id of app with a data-page="{...}" where {...} is the stringified JSON of the data returned from the server.

Note: I'm referring to Inertia V2, but the question would be the same if asking for V1

Thanks in advance!

[coolsoftwaretyler]

Interesting. I've never used Inertia before. Seems cool!

My first thought is that you might want to take those Inertia listeners and set them up somehow in MST's volatile state: https://mobx-state-tree.js.org/concepts/volatiles

That's particularly useful for storing values you can't serialize, and I personally use it for things like timeouts and intervals for coordination.

You could then have the listeners either call actions to mutate state, or you could make your state computed views based on the current values of what's in volatile.

That's just an initial intuition. If I have time this weekend I will try to set up a test project and see if I have a stronger/better recommendation.

If you have the opportunity to share a demo repo at all, I'd be able to give even better advice after messing around with it.

Either way, I hope this helps to start, and I'll take a deeper look later!

[coolsoftwaretyler]

Hey @jhavens-rcn - I put together an example with my first idea of how you might want to do this. I haven't written PHP in years, and never Laravel, so I hope this example repo is at least modestly helpful: https://github.com/coolsoftwaretyler/inertia-and-mobx-state-tree-example

Notable files:

1. https://github.com/coolsoftwaretyler/inertia-and-mobx-state-tree-example/blob/main/resources/js/models/CounterStore.ts: notice how MST isn't really concerned with Inertia here at all. Instead, we allow the Inertia router to call setCount on the counterStore instance when appropriate.
2. https://github.com/coolsoftwaretyler/inertia-and-mobx-state-tree-example/blob/main/resources/js/Pages/Dashboard.tsx: notice how I just import counterStore (the instance, not the model), and then wrap the Dashboard in observer. From there, the Dashboard component observes the counterStore model. When I make local updates (increment/decrement), MST updates. If I don't save, and I refresh, we get the page.props.count as the count value. If I save and refresh, it'll work as expected.

You could augment this so that you call saveToServer implicitly in the increment/decrement actions, or perhaps even with an onSnapshot listener.

Here's a screen recording of this working. If you want to try it out, pull down my repo, run the migrations, create an account, and this should show up in your dashboard to play around with.

(when the number jumps, it means I didn't save to server, and I refreshed the page. Sorry there's not a great visual cue on that video)

Screen.Recording.2024-12-08.at.7.23.58.PM.mov

If this doesn't answer your question, I might need to see a reproduction or some code on your end to understand how to help you better. Let me know!