Caching asynchronous data

Question

I recently found two libraries that perform this task

https://github.com/tannerlinsley/react-query

https://github.com/vercel/swr

But they use a different approach that does not require stores, is there something similar for MobX? To set the cache and not make requests to the server if this cache is still valid and alive

Answer 1

I don't have any specific library advice, but what I usually do in MobX applications is:

1. Each page has store associated with it, each store has data property (or something similar), and fetch method
2. When page components mounts it calls store.fetch() to load the data, so the data is saved inside store and later rendered
3. If you go to another page and then go back to original page the old data stuff is still inside the store and showed immediately. At the same time store fetches new data once again and replaces stale data when fetch succeeds.

The libraries you mentioned have more useful features but this core principle is pretty easy to implement with pure MobX. Although it would be nice to have some similar library for MobX, or even framework agnostic