Why using multiple useQuery with Suspense in single component cause water fall?

[dante01yoon]

Hi, thank you for fantastic library!

I saw this Q&A, and understood why water fall problem caused.

component mounts, d1 fetches, component suspends
d1 finishes, component re-mounts, d2 fetches, component suspends
d2 finishes, component re-mounts. At this time, data for d1 is considered stale ( i staleTime is set), so you'll see a background refetch because of refetchOnMount

Also saw recent tkdodo blog post :)

So component repeat mount-unmount each useQuery declarations.

but why this happens only in react query useQuery api ?

what I trying to say is water fall doesn't happen when using custom wrapPromise like React document codes.

Is there any special implementation in useQuery suspense option more than wrapPromise?

function wrapPromise(promise) {
  let status = "pending";
  let result;
  let suspender = promise.then(
    (r) => {
      status = "success";
      result = r;
    },
    (e) => {
      status = "error";
      result = e;
    }
  );
  return {
    read() {
      if (status === "pending") {
        throw suspender;
      } else if (status === "error") {
        throw result;
      } else if (status === "success") {
        return result;
      }
    }
  };
}

[TkDodo]

Your instantiation of:

const resource = fetchProfileData();

outside of the component tree is the equivalent of prefetching there, because you trigger fetchUser and fetchPosts immediately.

[dante01yoon]

ah ha, I got it. the problem of water falls are the problem of calling fetches in Component.

thank you

[TkDodo]

exactly 👍