Hi react enthousiasts!
I’m working in on a (somewhat legacy) web project that is heavily based on mobx to manage server state. All is going well, although complexity has grown throughout the years. Recently react query was added to the mix to trigger data fetching at apporpriate times. Basically, we’re using these two frameworks together. The react query callbacks trigger a REST call, and as a side-effect this data is loaded into the mobx state tree (this is key to my question!) so it can be used later. This data is also returned from the callback, which hands it over to the component that uses the useQuery() hook.
This all works well enough for retrieving data from server to client. But I’m not sure whether this combination will work when mutating data. The data now lives in two places: the react query cache and the mobx state tree. And although a refetch triggered by react query will load the new data into the mobx state tree, I’m not sure if the other way around will also work (should I care?). Also, how should these caches be invalidated? Will they work together somehow?
I’m curious whether other people are using a similar setup. Feel free to replace mobx for any other state management solution (e.g. redux).