MobX displaying previous query's results when this query errors - reactjs

Question

When a timeout error occurs while retrieving data from an API to render on a MobX-enabled React page, I am seeing the results from the last successful query displayed in place of the desired data (or empty data). Specifically, the steps are:
Enter a page that requires an item Id to retrieve results from a database and puts query results in state for display
Go back, enter the same page with a new Id, this request times out. Instead of seeing nothing or an error, I am seeing the results from step 1, i.e. the wrong item data.
This is happening site-wide, and I need a fix I can implement everywhere. Below is some code I wrote to fix the problem on one page, but this pattern will need to be copied into every store in our app. I'm not confident it's the right solution, because it works by tracking an item Id and emptying all observables when there's a change - this feels like something MobX should be doing, so I'm afraid my solution is an anti-pattern.
Is there a better solution to this problem than the one I'm presenting below?
class SupplierUtilizationStore {
#observable key = 0; //supplierId
utilizationSearchStore = new SearchStateStore();
#observable utilizationSearchResults = [];
#observable selectedChartType = 'ByMonth';
#observable supplierUsageForChart = {};
#observable utilizationSummaryData = {};
constructor(rootStore, dataLayer) {
this.rootStore = rootStore;
rootStore.supplierStore = this;
this.db = dataLayer;
this.initUtilizationSearchStore();
}
initUtilizationSearchStore() {
this.utilizationSearchStore.searchResultsTotalUnitCost = observable({});
this.utilizationSearchStore.searchResultsTotalCost = observable({});
this.utilizationSearchStore.searchResultsTotalQty = observable({});
this.utilizationSearchStore.supplierId = observable({});
}
//Call this in componentDidMount()
#action
initStore(key) {
if (key !== this.key) {
this.utilizationSearchStore = new SearchStateStore();
this.initUtilizationSearchStore();
this.utilizationSearchResults = [];
this.selectedChartType = 'ByMonth';
this.supplierUsageForChart = {};
this.utilizationSummaryData = {};
this.utilizationSearchStore.supplierId = key;
this.key = key;
}
}
...
}

Answer 1

As I understand "key" is id, which value depends on user action. So you can change it when a page is opened and observe the change to reset all values.
It doesn't seem correct to me to reset/init every single value of another object. Instead create a method for doing that in the exact object(SearchStateStore should have its own init method).
I haven't changed that part, but I am not sure it is also correct architectural behavior to pass the root store to the child store and assign the child store to the parent inside itself(this is not a mater of the question. Just something you can think of)
After all the code looks like this:
class SupplierUtilizationStore {
#observable key = 0; //supplierId
utilizationSearchStore;
#observable utilizationSearchResults;
#observable selectedChartType = 'ByMonth';
#observable supplierUsageForChart;
#observable utilizationSummaryData;
constructor(rootStore: any, dataLayer:any) {
this.rootStore = rootStore;
rootStore.supplierStore = this;
this.db = dataLayer;
this.initStore();
observe(this.key,()=>{ this.initStore() });
}
#action
initStore() {
this.utilizationSearchStore = new SearchStateStore();
this.utilizationSearchStore.init(); // all logic for initialization should be in the concrete store
this.utilizationSearchResults = [];
this.selectedChartType = 'ByMonth';
this.supplierUsageForChart = {};
this.utilizationSummaryData = {};
this.utilizationSearchStore.supplierId = this.key;
}
}
...
}
This way, you don't have to interact with the store and tell it when to init/reset. Just change the observable "key" value from the react component and the store will know what to do.