Strategy for combining with react-query

[jonlambert]

Question

• I've checked documentation and searched for existing issues
• I tried GitHub Discussions

Hey!

I'm in the process of refactoring an app which is using MST quite heavily, with the data loading logic making up quite a lot of the complexity.

I'd like to move this data-loading logic out of the MST stores and into react-query instead. This (contrived) example is what I have in mind:

import React from 'react'
import { types } from 'mobx-state-tree'
import { observer } from 'mobx-react-lite'
import { useQuery } from 'react-query'

const PersonModel = types.model('Person', {
  id: types.identifier,
  firstName: types.string,
  lastName: types.string
}).views(self => ({
  get fullName() {
    return [self.firstName, self.lastName].join(' ')
  }
}))

const usePerson = (id: string) => useQuery(
  ['person', id], 
  async () => PersonModel.create(await fetchPerson(id))
)

const Person: React.FC = observer(() => {
  const { data } = usePerson(1);

  return <span>Hello {data?.fullName}!</span>
})

This appears to work... however I'm encountering a concerning bug that's really difficult to reproduce: occasionally, computed properties all return undefined.

If I create the model from the useQuery() result, the problem doesn't occur:

const usePerson = (id: string) => {
  const result = useQuery(['person', id], () => fetchPerson(id));

  // Would probably memoise this, but keeping simple for brevity
  const data = PersonModel.create(result.data);

  return {
    ...result,
    data
  }
}

...but this feels less clean.

I'm anticipating the problem is something to do with how/when those computed properties are triggered, but my knowledge of the internals of MobX isn't strong enough to guess at why that might be. It would be great to get a sense check on this approach for combining the two libraries if anyone has any experience with this.

🙂 Thanks in advance!

[aryapreetam]

@jonlambert i have written a small app that uses mst and react-query https://github.com/preetb123/TaskListApp

[k-ode]

I've created a mobx-state-tree library that's very much inspired by react-query. I originally created it because I wanted to use mst models with automatic garbage collection and dynamic query manipulation. It's still very basic with regards to caching though.

https://github.com/ConrabOpto/mst-query
(Documentation is a work in progress, but should look much better soon)

[jrmyio]

I tried MST with react query but react query' caching mechanism seemed to only work with JSON so this could explain why your computed properties are returning undefined as your mst object (that is stored in react query) might be converted into a simple object by react query's cache.

What I did was return an MST snapshot rather than an MST object in useQuery. Then create the MST object afterwards.

[coolsoftwaretyler]

Hey folks - looks like this was answered in a few different ways. Since it's an old issue, I'm going to go ahead and convert it to a discussion, close it out, and mark the latest answer as the "Correct" answer, since it got a thumbs up from @jonlambert here.

Thanks for all the help!