Jotai - Update a async loadable atom

Question

Current Code

const asyncAtom = atom(async () => {
  const res = await (
    await fetch("http://localhost:3000/api/transactions")
  ).json();
  return res;
 });

const loadableAtom = loadable(asyncAtom);
const [transactions] = useAtom(loadableAtom);

How can I update the transactions if I want to refetch the data?

With setTransactions I get the error "This expression is not callable. Type 'never' has no call signatures.ts(2349)".

score 0 · Answer 1 · answered May 23 '23 at 21:12

The answer is to make the response the loadable atom and the request a setter atom, in your example:

const responseAsync = atom(null) 

const setAsyncAtom = atom(null, async (get, set) => {
  const res = (
    await fetch("http://localhost:3000/api/transactions")
  ).json();
  set(responseAsync, res)
 });

const loadableAtom = loadable(responseAsync);
const [transactions] = useAtom(loadableAtom);


...... (in component)

const [, refreshData] = useAtom(setAsyncAtom)

So you can call refreshData on demand when you need to refresh data.

Jotai - Update a async loadable atom

1 Answers1