Recipe for fetch and store model

[dai-shi]

Problem

How can we create an atom that fetch data and store the data outside atoms (like localStorage) as cache?

Solution with useEffect

const dataAtom = atom((get) => fetchData(...));
const cacheAtom = atomWithStorage('data', null);
const finalAtom = atom(
  (get) => get(cacheAtom) || get(dataAtom),
  async (get, set) => {
    // write to cache
    set(cacheAtom, await get(dataAtom))
  }
)

  // in component
  const [data, sync] = useAtom(finalAtom)
  useEffect(() => {
    sync();
  }, [data]);

Solution with custom storage

const storage = {
  async getItem(key) {
    const str = localStorage.getItem(key)
    if (str) {
      return JSON.parse(str)
    }
    const data = await fetchData(...)
    localStorage.setItem(key, JSON.stringify(data))
    return data
  },
  async setItem(key, newValue) {
    localStorage.setItem(key, JSON.stringify(newValue))
  },
  async removeItem(key) {
    localStorage.removeItem(key)
  },
}

const finalAtom = atomWithStorage('data', null, storage);

[t6adev]

Solution with custom storage

+1
Because of just I don't want to write useEffect in my components...

[hnordt]

Sounds great, what about cache invalidation?

[hnordt]

You can also replace the useEffect with:

finalAtom.onMount = (refresh) => {
  refresh()
}

My goal is to load the data when users visit a component or page that uses the atom. When the atom unmounts and mounts again, the cached data is used until it’s refreshed.

This is the main feature I need from React Query, which is why I don’t want to use jotai-tanstack-query.

[dai-shi]

When the atom unmounts and mounts again, the cached data is used until it’s refreshed.

Hm, it's the default behavior of normal atoms. On second look, it seems closer to atomWithRefesh and unwrap combo.

[hnordt]

Normal atoms “cache” the data, but once you trigger a refresh it suspends and show the fallback UI. Once I have data, I don’t want to show the fallback anymore.

[dai-shi]

unwrap can definitely help with it. If you want suspense only for the first time, check out "Tip 20: Async only initially": https://blog.axlight.com/posts/jotai-tips/#:~:text=Tip%2020%3A%20Async%20only%20initially

[hnordt]

Thanks for the tips. Here's my solution:

function atomWithQuery<Args extends unknown[], ReturnValue>(
  fn: (signal?: AbortSignal, ...args: Args[]) => Promise<ReturnValue>,
  ...args: Args[]
) {
  const dataAtom = atomWithRefresh((_get, { signal }) => fn(signal, ...args))
  dataAtom.onMount = (refresh) => void refresh()

  const cacheAtom = unwrap(dataAtom, (prev) => prev)

  return atom(
    (get) => get(cacheAtom) ?? get(dataAtom),
    (_get, set) => set(dataAtom) // triggers a refresh
  )
}

const usersAtom = atomWithQuery(fetchUsers)