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]

@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.

[AlexThurston]

I'm having a difficult time getting what I think is simple enough as an example to work. As mentioned in the above posts, a refreshable loadable does seem like a pretty common thing to want. After following examples and reading the documentation, I'm confused as to why the following is behaving like it is. The code is as follows:

iimport { atom, useAtom } from "jotai";
import { atomWithRefresh, loadable } from "jotai/utils";

const projectsAtom = loadable(
    atom(async () => new Promise<number[]>((resolve) => setTimeout(() => resolve([Math.random(), Math.random(), Math.random()]), 2000)))
);
const refreshProjectsAtom = atomWithRefresh((get) => {
    get(projectsAtom);
});

export const Project = () => {
    const [projects] = useAtom(projectsAtom);
    const [, refreshProjects] = useAtom(refreshProjectsAtom);

    return (
        <div>
            <h1>Projects</h1>
            <button onClick={() => refreshProjects()}>Refresh</button>
            <ul>{projects.state === "loading" ? <div>Loading...</div> : projects.data.map((p: number) => <li key={p}>{p}</li>)}</ul>
        </div>
    );
};

This component will behave correctly on first render, Loading... will be displayed until 2 seconds passes and then the list of 3 random numbers is shown.

However, clicks on the refresh button that should initiate a refresh never do anything. Placing a console log within the atomWithRefresh get function is displayed, but the React component is never re-rendered and the list of random numbers never changes, not is Loading... ever displayed.

[AlexThurston]

We've got it working. Code looks as follows in case other's are running into similar situations:

import { atom, useAtom } from "jotai";
import { atomWithRefresh, loadable } from "jotai/utils";

const refreshProjectsAtom = atomWithRefresh(
    async () => new Promise<number[]>((resolve) => setTimeout(() => resolve([Math.random(), Math.random(), Math.random()]), 2000))
);
const loadableProjectsAtom = loadable(refreshProjectsAtom);
const projectManagementAtom = atom(
    (get) => get(loadableProjectsAtom),
    (_get, set) => set(refreshProjectsAtom)
);

export const Project = () => {
    const [projects, refresh] = useAtom(projectManagementAtom);

    return (
        <div>
            <h1>Projects</h1>
            <button onClick={refresh}>Refresh</button>
            <ul>{projects.state === "loading" ? <div>Loading...</div> : projects.data.map((p: number) => <li key={p}>{p}</li>)}</ul>
        </div>
    );
};