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(() => {})
);