Using async derived atom from `atomWithSuspenseQuery` calls `queryFn` infinitely, resulting in keeping triggering Suspense.

[hyp3rflow]

codesandbox: https://codesandbox.io/p/sandbox/jotai-tanstack-query-atomwithsuspensequery-infinite-fetching-4dmrp5

It seems that the bug happens on React 19+, downgrading to 18 relieves issue.
I think #96 and #99 are maybe similar issue, but the difference is we are not using any try/catch logic or getting error from query here.

import { atom, useAtomValue } from "jotai";
import { atomWithSuspenseQuery } from "jotai-tanstack-query";
import { Suspense } from "react";

const App = () => {
  return (
    <Suspense fallback={<p>fallback</p>}>
      <Comp />
    </Suspense>
  );
};

const baseAtom = atomWithSuspenseQuery(() => {
  return {
    queryKey: ["base"],
    queryFn: async () => {
      let r: ((v: unknown) => void) | undefined = undefined;
      const p = new Promise((res) => (r = res));
      setTimeout(() => r?.(""), 1000);
      return p;
    },
  };
});
const derivedAtom = atom(async (get) => {
  return await get(baseAtom);
});
const Comp = () => {
  useAtomValue(derivedAtom);
  return <p>merong</p>;
};

export default App;

[ThaddeusJiang]

@hyp3rflow baseAtom is created with atomWithSuspenseQuery, which is already a Suspense-aware atom. It will suspend when the data is not ready (by throwing a promise for React Suspense to catch).

If you add another async layer:

It will create a new promise every time derivedAtom reads.

With the new Suspense behavior in React 19, this "new promise on each render" pattern causes repeated re-renders → queryFn is executed repeatedly.

So, it is not recommended to wrap atomWithSuspenseQuery with async/await.

const derivedAtom = atom((get) => {
  return get(baseAtom);
});