question on reloading observable data in mobx upon page load

Question

I have a typescript DataStore object that stores some data (using Mobx) from the server when I login. For example:

import { observable } from 'mobx-react';
class DataStore {
    @observable user: User | null = null;

    lots more code here
}

The DataStore class has a doLogin method, and when that is successful it populates the user object with data of type User (which is an interface I defined elsewhere - it contains a number of user data fields like username, email etc).

Now, when or if the user refreshes the page or tab, the stored User data goes away. This of course will cause problems if I try to use it.

So what is the best pattern to use here? One thing to do is to save this data in localStorage or sessionStorage or localForage, but I have heard some horror stories about this not working in some edge situations. Another possibility is to check to make sure it exists and if not then use the dataStore object.doLogin method to reload it.

What do most developers do in this situation?

score 1 · Answer 1 · answered Aug 04 '20 at 13:04

I don't think this is a mobx problem, rather a general strategy on how to fetch data.

If you choose to back up the data locally, then make sure you version the data, so when your code or data model changes, you can skip the local data and fetch again. This way you won't have any problems with locally saved data.

question on reloading observable data in mobx upon page load

1 Answers1