With this setup, do you have a cache in both MobX as well as React Query? If yes, how do you determine which cache you should read from? Or does the React Query cache reference the MobX cache so whenever you update data in MobX, the change propagates to the React Query cache?
Also, how do you update data in your server data with a MobX action? In your linked code sandbox you use .makeFavorite on the Book model to update the book in the MobX cache, but would you also need to use a react-query mutation to update your server data?
Or does the React Query cache reference the MobX cache so whenever you update data in MobX, the change propagates to the React Query cache
Exactly. The data lives only in MobX. React Query caches only the references to the MST instances, so if you update the data anywhere, the change is visible everywhere.
how do you update data in your server data with a MobX action
You can use react-query mutations, and then update the MobX data once the request is successful.
Mutations are really practical as they handle the IDLE > LOADING > SUCCESS | ERROR state transitions and support retries and other react query goodies. However, you can just as simply run your async actions in useEffect.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
With this setup, do you have a cache in both MobX as well as React Query? If yes, how do you determine which cache you should read from? Or does the React Query cache reference the MobX cache so whenever you update data in MobX, the change propagates to the React Query cache?
Also, how do you update data in your server data with a MobX action? In your linked code sandbox you use
.makeFavoriteon theBookmodel to update the book in the MobX cache, but would you also need to use a react-query mutation to update your server data?I also would like to see how to make caching and mutations work. It seems pointless to me to use React Query with Mobx without these two features
Exactly. The data lives only in MobX. React Query caches only the references to the MST instances, so if you update the data anywhere, the change is visible everywhere.
You can use react-query mutations, and then update the MobX data once the request is successful.
Mutations are really practical as they handle the IDLE > LOADING > SUCCESS | ERROR state transitions and support retries and other react query goodies. However, you can just as simply run your async actions in useEffect.