Unexpected query call in suspense mode

Describe the bug

Why is fetchMockApi1 called twice?

const fetchMockApi1 = async () => {
  console.log("fetchMockApi1");
  return 1;
};

const fetchMockApi2 = async () => {
  console.log("fetchMockApi2");
  return new Promise((y) => {
    setTimeout(() => {
      console.log("fetchMockApi2 --- end");
      y(1);
    }, 1000 * 3);
  });
};

function Example() {
  const d1 = useQuery(["d1"], fetchMockApi1);
  const d2 = useQuery(["d2"], fetchMockApi2);
  return <div>test</div>;
}

Your minimal, reproducible example

https://codesandbox.io/s/competent-dew-fomvdq?file=/src/index.js

Steps to reproduce

1. go to https://codesandbox.io/s/competent-dew-fomvdq?file=/src/index.js
2. click on refresh
3. Observe console outputs

Expected behavior

fetchMockApi1 should only be called once

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

MacOS version:4

react-query version

4.0.10

TypeScript version

No response

Additional context

No response

[TkDodo]

Because of suspense: true suspense unmounts the component and mounts the fallback of the suspense boundary instead. Then, when the request finishes, it will mount the component again. Multiple useQuery calls + suspense create a waterfall, so what happens is:

• 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

[TkDodo]

@dante01yoon can you show what you mean in a codesandbox reproduction?