Retriggering async atoms with progress

[christianstrassmayr]

Hi, having a great experience using Jotai but now I'm encountering an issue.

I need to do a query, which can take longer and returns a token/progress until it's done. Based on some dependencies (e.g. filters) I need to re-execute it.

Currently I solved it somewhat like this (pseudo code):

state.ts:

const fetch = async (query, updateProgress) => {
  let res = await fetchQuery(query)
  while (res.progress < 100) {
    updateProgress(res.progress)
    res = await fetchQuery(res.token)
  }
  return res.result;
}

const progressAtom = atom(0)
const dataAtom = atom()
const queryAtom = ... some derived atom

const writeAtom = atom(null, async (get, set) => {
  set(dataAtom, await fetch(get(queryAtom), (p) => set(progressAtom, p)))
}

Component.tsx:

const progress = useAtomValue(progressAtom)
const data = useAtomValue(dataAtom)
const query = useAtomValue(queryAtom)
const write = useSetAtom(writeAtom)

// retrigger write when query changes
useEffect(() => {
  void write();
}, [query])


if (progress < 100) {
  return <Loading progress={progress} />
}

return <Data data={data} />;

this works perfectly, but I would prefer not having to rely on the useEffect in my component to re-trigger the fetching when some of my dependencies change.

Is there a better way to do this?
Was able to get the same behavior using a derived atom + loadable instead of dataAtom + writeAtom combination - but was not able to set the progress in that approach (except with using setSelf but it seems to have a delay and probably not the best idea to rely on it).

Thanks

[dai-shi]

This is an interesting use case. I think I've never heard of it.
Basically, you want to return a sequence asynchronously, so async iterable, or observable might fit. You may want to try atomWithObservable.

But, I think your approach is fairly reasonable.

except with using setSelf but it seems to have a delay and probably not the best idea to rely on it

Yeah. Recently, we introduced atomEffect in https://github.com/jotaijs/jotai-effect, which would be more appropriate.

[christianstrassmayr]

atomEffect works perfectly, thanks a lot 🥇