Loadable writable Atom

[e7h4n]

Hi everyone,

I currently use Jotai without React in my project, and I have some new ideas regarding Loadable Atoms.

According to the documentation found at Async Guide and Async Utilities, Jotai allows us to retrieve the state of an Async Read Atom easily:

const asyncAtom = atom(async (get) => ...)
const loadableAtom = loadable(asyncAtom)

However, it seems loadable cannot be applied to writable atoms, particularly during an async set process. This is the issue I aim to discuss here. I’m not entirely sure my thoughts are correct, but I haven’t found better answers from the community, so I hope to engage in a discussion about it.

Why We Need Async Writable Atoms

Async readable atoms cannot accept parameters; all parameters must be passed through atoms. For example:

const userInfoAtom = atom(async (get) => {
    const currentUserId = get(currentUserIdAtom);
    return await fetch(API + '?currentUserId=' + currentUserId);
});

This can lead to a significant increase in the number of atoms, as any parameter needed in a get method requires its atom:

const articleListAtom = atom(async (get) => {
    const signal = get(pageAbortSignalAtom);
    const articleType = get(articleTypeAtom);
    const userType = get(userTypeAtom);
    // ...
    return await fetch(API, {params: {...}, signal});
});

Moreover, encapsulating these parameter atoms' visibility seems challenging, as any code can set these atoms from anywhere.

Additionally, the code for setting an atom and initiating a request appears unrelated. For example, the two lines of code below seem completely disconnected:

store.set(userTypeAtom, 'ADMIN');
const articles = await store.get(articleListAtom);

This leads us into a "global variable hell."

Adding Support for Writable Atoms in Loadable

It would be more intuitive for the parameters required for an asynchronous request to be passed via function arguments, similar to how writable atoms work:

const fetchArticleAtom = atom(null, async (get, set, userType, articleType, signal) => {
    // ...
    return await fetch(...);
});

Now, externally, we can obtain the result using store.set:

// ...
const articles = await store.set(fetchArticleAtom, userType, articleType, signal);

Naturally, we would like to display a loading state during the request process (since we're not using React, we don't have Suspense). This can be implemented using loadable, leveraging temporary internal atoms.

const _fetchArticleAtom = atom(null, async (get, set, userType, articleType, signal) => {
    // ...
    return await fetch(...);
});
const _promiseAtom = atom();
const _loadableAtom = loadable(_promiseAtom);
const articlesAtom = atom((get) => get(_loadableAtom), (get, set, ...args) => {
    const promise = set(_fetchArticleAtom, ...args);
    set(_promiseAtom, promise);
    return promise;
});

Ultimately, we obtain a read & write atom whose read method returns the status of the last fetch:

void store.set(articlesAtom, userType, articleType, signal);
// ...
store.get(articlesAtom); // get a Loadable state like { state: 'hasData', data: ... }

The construction of articlesAtom can be abstracted into a higher-order function:

export function loadableWritableAtom<Value extends Promise<unknown>, Args extends unknown[]>(
    writableAtom: WritableAtom<null, Args, Value>
): WritableAtom<Loadable<Value | undefined>, Args, Value> {
    const internalPromiseAtom = atom<Value>();
    const internalLoadableAtom = loadable(internalPromiseAtom);

    return atom(get => {
        return get(internalLoadableAtom);
    }, (get, set, ...args: Args): Value => {
        const promise = set(writableAtom, ...args);
        set(internalPromiseAtom, promise);
        return promise;
    });
}

const articlesAtom = loadableWritableAtom(atom(null, (get, set, userType, articleType, signal) => {
    return fetch(...);
}));

So far, this is my attempt at creating a loadable writable atom. When I finished this issue, I found another post: #1061 (reply in thread); the pattern is very similar. So
I wonder whether the loadable method could inherently support wrapping writable atoms to implement this pattern.

[dai-shi]

Is your idea close to "a promise value"? https://blog.axlight.com/posts/jotai-tips/#:~:text=Tip%203%3A%20Promise%20value

As you found another post, this is by design. We provide primitive utils in jotai/utils, and let third-party libs to add more features. I guess your solution is helpful for some cases, but other cases, it's not necessary. In such cases, we only provide primitive utils. Actually, we added writable support for unwrap. But, it doesn't seem very primitive to do the same for loadable. Or, do you have an idea without internal atoms? Hmm, maybe that's a wrong question. I think we can just pass through write like unwrap, but it may not help your use case. Can you try your case with unwrap instead of loadable?