How to cache values?

I’m trying to implement caching: If a value doesn’t exist, then fetch it.

const cache = atom({
  key: "cache",
  default: new Map()
});

const value = selectorFamily({
  key: "value",
  get: (id) => async ({ get }) => {
    const map = get(cache);
    return map.get(id) || await fetch(id);
  },
});

My questions are:

1. Can I force a re-fetch without manually fetching and setting in my component? I tried adding a setter:

  set: (id) => async ({ set }) => {
    const data = await fetch(id);
    set(cache, (prevState) => prevState.set(id, data));
  },

with the idea of just calling useResetRecoilState(value(id)). But, this doesn’t seem to update my components. Is this because set is async?

1. How do I initially populate the cache? I can call set for the IDs I care about, but ideally I want get to add values to the cache.

[drarmstr]

Duplicate of #290

Ah, so your usecase is to return the previous value while pending. the useTransition() hook may be useful for this when Recoil releases full concurrent mode support. In the meantime, #290 discusses some current workarounds.

[drarmstr]

JS Map is mutable, so you should not call set() on a Map stored in an atom. Atom state isn’t really meant to be used for holding caches like this. It looks like you’re trying to use a cache to cache the results of the selectorFamily() evaluation? If so, that shouldn’t be necessary since Recoil already caches selector evaluations.