Async atom that suspends the first time, returns previous value subsquently

[stevemolitor]

My team is trying to create an async atom that suspends the first time while the initial value is being loaded but subsequently returns the previous value synchronously when new values are being loaded.

For example:

const values = ["first-value", "second-value"];
const syncAtom = atom(0);
const swrAtom = selectAtomWithSwr(async (get) => values[get(syncAtom) % 2]);

We want useAtomValue(swrAtom) to suspend the very first time it is used, but after that to return the previous value while new values are being loaded. Is that possible?

Here is a CodeSandbox demonstrating what we are trying (but failing) to do. The Suspense loading fallback prints a message every time it renders. We want to see that message just once upon initial load, but we are seeing it every time the state changes and a new async request is made:

[dai-shi]

It's tricky, but should be possible. Maybe, use unwrap and if it's initial load, use the original atom. It will be a good challenge, but let me know if you get stuck.

[stevemolitor]

Thanks unwrap as you described did the trick! It's much simpler now, and works:

• working CodeSandbox

Here's the important part:

export const selectAtomWithSwr = <T>(
  selector: Selector<T>,
  _areEqual: AreEqual<T> = Object.is // TODO
): Atom<T | Promise<T>> => {
  const baseAtom = atom(get => selector(get));
  const unwrappedAtom = unwrap(baseAtom, prev => prev);

  return atom(get => get(unwrappedAtom) ?? get(baseAtom));
}

[stevemolitor]

Instead of select we may just simplify to composing atoms:

export const atomWithSwr = <T>(
  baseAtom: Atom<T>
): Atom<T | Promise<T>> => {
  const unwrappedAtom = unwrap(baseAtom, prev => prev);
  return atom(get => get(unwrappedAtom) ?? get(baseAtom));
};

[scamden]

this was so helpful! for future readers i made a very similar impl that is only a Promise when unresolved. Only difference from this impl is that it goes back to suspense when unresolved rather than continuing to show the old value. (Also I had to handle writeable atoms)

export function atomAsyncUntilResolved<T, Args extends Array<any>, Result>(
  baseAtom: WritableAtom<Promise<T>, Args, Result>
): WritableAtom<T | Promise<T>, Args, Result>;
export function atomAsyncUntilResolved<T>(
  baseAtom: Atom<Promise<T>>
): Atom<T | Promise<T>>;
export function atomAsyncUntilResolved<T>(
  baseAtom: Atom<Promise<T>> | WritableAtom<Promise<T>, Array<any>, any>
) {
  const unwrappedAtom = unwrap(baseAtom);
  const read = (get: Getter) => get(unwrappedAtom) ?? get(baseAtom);
  return 'write' in baseAtom ? atom(read, baseAtom.write) : atom(read);
}

[sebinsua]

Am I right in thinking that neither of these hooks will work if an async atom rejects?

I am polling an endpoint until a predicate is true, but there are many components that use the same data and I do not wish these to suspend.

Has anybody found a way to get around this?

---

Edit:

I was able to use an option that wraps the atom that came in with something like this to stop errors from becoming the "latest" value:

function atomWithNoErrorsCached<T, Args extends Array<any>, Result>(
  baseAtom: WritableAtom<Promise<T>, Args, Result>
): WritableAtom<T | Promise<T>, Args, Result>;
function atomWithNoErrorsCached<T>(
  baseAtom: Atom<Promise<T>>
): Atom<T | Promise<T>>;
function atomWithNoErrorsCached<T>(
  baseAtom: Atom<Promise<T>> | WritableAtom<Promise<T>, Array<any>, any>,
  initialValue: T | undefined = undefined
) {
  let latestFulfilled = initialValue as Awaited<T> | undefined;
  const read = async (get: Getter) => {
    try {
      const value = await get(baseAtom);

      if (isPromise(value) === false && value instanceof Error === false) {
        latestFulfilled = value;
      }

      return value;
    } catch (error) {
      if (latestFulfilled) {
        return latestFulfilled;
      }

      throw error;
    }
  };

  const noErrorsAtom =
    'write' in baseAtom ? atom(read, baseAtom.write) : atom(read);

  return noErrorsAtom;
}

[alirezamirian]

I needed something similar, except I needed to know if a new value is being loaded, to show a little loading indicator on top of the stale content (instead of suspending or removing the stale content which is too dramatic).

Inspired from @stevemolitor's atomWithSwr, I created this:

type MaybeStale<T> = { value: T; isStale: boolean };

export const atomWithStaleValue = <T,>(
  baseAtom: Atom<Promise<T>>
): Atom<MaybeStale<T> | Promise<MaybeStale<T>>> => {
  const freshAtom = atom(async (get) => ({
    value: await get(baseAtom),
    isStale: false as const,
  }));
  const maybeStaleAtom = unwrap(freshAtom, (prev) =>
    prev ? { value: prev.value, isStale: true as const } : undefined
  );
  return atom((get) => get(maybeStaleAtom) ?? get(freshAtom));
};

Getting the value in components with useAtomValue:

const { value, isStale /* useful for showing a loading indicator */ } = useAtomValue(editorFullState);

UPDATE

I just found a simpler version! Since the fallback can be a Promise as well (which will suspend), and since it's used only until the upcoming value is resolved, a never-resolving promise can be returned as fallback when there is no previous value, which will suspend rendering only the first time the base atom is being resolved:

/**
 * Creates an atom that suspends rendering only the first time anAtom is
 * being resolved.
 * In subsequent resolutions of anAtom, the resulting atom will unwrap to the
 * latest resolved value.
 */
export const unwrapLatestValue = <T>(
  anAtom: Atom<Promise<T>>
): Atom<T | Promise<T>> =>
  unwrap(anAtom, (prev) => prev ?? new Promise(() => {}));

Codesandbox: https://codesandbox.io/p/sandbox/ancient-architecture-ytf3zn

And this is another version of it to return include isLoading information too in case a loading indicator is to be rendered when a new value is being loaded:

type WithLoading<T> = { value: T; isLoading: boolean };

export const unwrapLatestValueWithLoading = <T>(
anAtom: Atom<Promise<T>>
): Atom<WithLoading<T> | Promise<WithLoading<T>>> =>
unwrap(
  atom(async (get) => ({
    value: await get(anAtom),
    isLoading: false,
  })),
  (prev) =>
    prev ? { value: prev.value, isLoading: true } : new Promise(() => {})
);

[Chanki-Min]

I made updated version of atomWithSwr (stail-while-revalitade + writeable support) thanks to @scamden and @dai-shi

this version allows base atom has undefined as atom value

import { atom } from 'jotai';
import type { Atom, Getter, WritableAtom } from 'jotai';
import { unwrap } from 'jotai/utils';

/**
 * A symbol value that indicates there is no previously resolved value.
 * We use a unique symbol because values like undefined or null may already be used
 * by the original atom.
 * ref) https://x.com/dai_shi/status/1722818712267583924/photo/1
 */
const EMPTY = Symbol();

/**
 * Wraps the given asynchronous atom (asyncAtom) so that it returns the previously resolved value if it exists;
 * if not, it reads the asyncAtom's promise and suspends.
 *
 * @param baseAtom An atom capable of asynchronous handling (value or Promise<T>)
 * @returns An atom that immediately returns the previous value if available, or reads the asyncAtom to suspend when not.
 */
export function atomWithSwr<T, Args extends Array<any>, Result>(
  baseAtom: WritableAtom<Promise<T>, Args, Result>
): WritableAtom<T | Promise<T>, Args, Result>;
export function atomWithSwr<T>(baseAtom: Atom<Promise<T>>): Atom<T | Promise<T>>;
export function atomWithSwr<T>(
  baseAtom: Atom<Promise<T>> | WritableAtom<Promise<T>, Array<any>, any>
) {
  /**
   * The unwrap() function creates a synchronous atom that stores the last resolved value of the asyncAtom.
   * However, since the original atom might return undefined, we return EMPTY when the asyncAtom has not yet resolved.
   */
  const unwrappedAtom = unwrap(baseAtom, (...args) =>
    args.length ? (args[0] as Awaited<T>) : EMPTY
  );

  /**
   * If a previous value exists, return it immediately; otherwise, read the asyncAtom's value and suspend.
   */
  const read = (get: Getter) => {
    if (get(unwrappedAtom) === EMPTY) {
      return get(baseAtom);
    }
    return get(unwrappedAtom);
  };

  return 'write' in baseAtom ? atom(read, baseAtom.write) : atom(read);
}