Making an atomWithRefresh loadable seems like a common usecase

[maxkrieger]

How can I compose an atomWithRefresh with a loadable atom creator?

Ideally, the interface is:

const myRefreshable = atomWithRefresh(async (get) => return await myFetch());
const myAtom = loadable(myRefreshable);
...
    const [value, refresh] = useAtom(myAtom);
    if (value.state === "loading") {
...

However, it seems like loadable ignores the refresh setter. This seems like a common enough usecase - a refreshable, async loadable atom, that its composition would be documented.

Should I just make a writableLoadableAtom (documented here)? I think the loadable interface should be writable, or there should be a documented practice for this.

[dai-shi]

We prefer atom composition. Our design decision is to provide building blocks and developers can compose new atoms with them. loadable and unwrap utils are intentionally read only.
Please feel free to open a PR to improve docs. I think writableLoadableAtom can be in recipes.

[AriaFallah]

I think I figured it out.

const loadableAtom = loadable(atom(async get => {/* your code */}))
const refetchableAtom = atomWithRefresh(get => get(loadableAtom))

[dai-shi]

Yeah, that's good. I mean it depends on a requirement.

Another pattern would be:

const anAtom = atomWithRefresh(async (get) => { /* ... */ });
const loadableAtom = loadable(anAtom)
const finalAtom = atom(
  (get) => get(loadableAtom),
  (get, set, arg) => set(anAtom, arg)
);

[AriaFallah]

@dai-shi is there a way to provide anAtom with a way to refresh itself? Maybe this is crazy, but inside anAtom, I want to be able to pop up a message that has a button on it, and when you click retry, it queries again. So something like

const retry = ???
const loadableAtom = loadable(atom(async get => {
  try { await someThing() }
  catch(e) { error(e.message, <button onClick={retry}>Retry</button>) }
}))
const refetchableAtom = atomWithRefresh(get => get(loadableAtom))

The only thing I could think of was to use the store because idk how else to get access to set i.e.

const refreshAtom = atom(0);
const refresh = () => store.set(refreshAtom, store.get(refreshAtom) + 1);
const loadableAtom = loadable(
  atom(async (get) => {
    get(refreshAtom);
    try { await someThing() }
    catch(e) { error(e.message, <button onClick={retry}>Retry</button>) }
  })
);

Does this make sense?

edit: I guess there is another way without the store if you want everything to be atom based. You can do something like

export function retryableLoadableAtom(
  fn: (retryAtom: WritableAtom<null, [], void>) => Promise<void>
): Atom<Loadable<Promise<void>>> {
  const refreshAtom = atom(0);
  const setRefreshAtom = atom(null, (_, set) => set(refreshAtom, (c) => c + 1));
  return loadable(
    atom((get) => {
      get(refreshAtom);
      return fn(setRefreshAtom);
    })
  );
}

function RetryButton({retryAtom}: {retryAtom: retryAtom: WritableAtom<null, [], void>}) {
  const retry = useSetAtom(retryAtom);
  return <button onClick={retry}>Retry</button>
}

const atom = retryableLoadableAtom(retryAtom => {
  try { await someThing() }
  catch(e) { error(e.message, <RetryButton retryAtom={retryAtom} />) }
})

[dai-shi]

Your solution looks good.

Although it's rather for library authors and not for app devs, but we have setSelf workaround:

jotai/docs/core/atom.mdx

Line 204 in 7a68a12

#### `options.setSelf`

[peterczibik-byborg]

Yeah, that's good. I mean it depends on a requirement.

Another pattern would be:

const anAtom = atomWithRefresh(async (get) => { /* ... */ });
const loadableAtom = loadable(anAtom)
const finalAtom = atom(
  (get) => get(loadableAtom),
  (get, set, arg) => set(anAtom, arg)
);

Thanks for the solution folks. I stumbled upon a similar problem. I was wondering if it would be possible to make a type of loadable that wouldn't "load" immediately, sort of like a lazyLoadable that would have a third state which would only trigger asynchronous work upon calling "refresh".

I'm thinking of something like:

const lazyLoadableAtom = lazyLoadable(async () => await fetcher(key));

const [value, refresh] = useAtom(lazyLoadableAtom);

Which would then by default would have value.state === 'idle' until you call refresh.