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;
}