fix: only trigger suspense when loading for the first time

Author: boschni

src/core/queryObserver.ts

@@ -92,15 +92,25 @@ export class QueryObserver<
     }
   }
 
-  willFetchOnMount(): boolean {
+  willLoadOnMount(): boolean {
+    return (
+      this.options.enabled !== false && !this.currentQuery.state.dataUpdatedAt
+    )
+  }
+
+  willRefetchOnMount(): boolean {
     return (
       this.options.enabled !== false &&
-      (!this.currentQuery.state.dataUpdatedAt ||
-        this.options.refetchOnMount === 'always' ||
+      this.currentQuery.state.dataUpdatedAt > 0 &&
+      (this.options.refetchOnMount === 'always' ||
         (this.options.refetchOnMount !== false && this.isStale()))
     )
   }
 
+  willFetchOnMount(): boolean {
+    return this.willLoadOnMount() || this.willRefetchOnMount()
+  }
+
   willFetchOnReconnect(): boolean {
     return (
       this.options.enabled !== false &&

src/react/tests/suspense.test.tsx

@@ -275,6 +275,64 @@ describe("useQuery's in Suspense mode", () => {
     consoleMock.mockRestore()
   })
 
+  it('should refetch when re-mounting', async () => {
+    const key = queryKey()
+    let count = 0
+
+    function Component() {
+      const result = useQuery(
+        key,
+        async () => {
+          await sleep(100)
+          count++
+          return count
+        },
+        {
+          retry: false,
+          suspense: true,
+          staleTime: 0,
+        }
+      )
+      return (
+        <div>
+          <span>data: {result.data}</span>
+          <span>fetching: {result.isFetching ? 'true' : 'false'}</span>
+        </div>
+      )
+    }
+
+    function Page() {
+      const [show, setShow] = React.useState(true)
+      return (
+        <div>
+          <button
+            onClick={() => {
+              setShow(!show)
+            }}
+          >
+            {show ? 'hide' : 'show'}
+          </button>
+          <React.Suspense fallback="Loading...">
+            {show && <Component />}
+          </React.Suspense>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(queryClient, <Page />)
+
+    await waitFor(() => rendered.getByText('Loading...'))
+    await waitFor(() => rendered.getByText('data: 1'))
+    await waitFor(() => rendered.getByText('fetching: false'))
+    await waitFor(() => rendered.getByText('hide'))
+    fireEvent.click(rendered.getByText('hide'))
+    await waitFor(() => rendered.getByText('show'))
+    fireEvent.click(rendered.getByText('show'))
+    await waitFor(() => rendered.getByText('fetching: true'))
+    await waitFor(() => rendered.getByText('data: 2'))
+    await waitFor(() => rendered.getByText('fetching: false'))
+  })
+
   it('should retry fetch if the reset error boundary has been reset with global hook', async () => {
     const key = queryKey()
 

src/react/useBaseQuery.ts

@@ -33,9 +33,13 @@ export function useBaseQuery<TData, TError, TQueryFnData, TQueryData>(
     )
   }
 
-  // Always set stale time when using suspense
-  if (defaultedOptions.suspense && !defaultedOptions.staleTime) {
-    defaultedOptions.staleTime = 2000
+  // Always set stale time when using suspense to prevent
+  // fetching again when directly re-mounting after suspense
+  if (
+    defaultedOptions.suspense &&
+    typeof defaultedOptions.staleTime !== 'number'
+  ) {
+    defaultedOptions.staleTime = 1000
   }
 
   // Create query observer
@@ -72,7 +76,7 @@ export function useBaseQuery<TData, TError, TQueryFnData, TQueryData>(
     if (
       observer.options.suspense &&
       !observer.hasListeners() &&
-      observer.willFetchOnMount()
+      observer.willLoadOnMount()
     ) {
       errorResetBoundary.clearReset()
       const unsubscribe = observer.subscribe()