fix(react): don't set options before suspending

packages/query-core/src/types.ts

@@ -345,7 +345,7 @@ export type DefaultedQueryObserverOptions<
   TQueryKey extends QueryKey = QueryKey,
 > = WithRequired<
   QueryObserverOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>,
-  'throwOnError' | 'refetchOnReconnect'
+  'throwOnError' | 'refetchOnReconnect' | 'queryHash'
 >
 
 export interface InfiniteQueryObserverOptions<
@@ -381,7 +381,7 @@ export type DefaultedInfiniteQueryObserverOptions<
     TQueryKey,
     TPageParam
   >,
-  'throwOnError' | 'refetchOnReconnect'
+  'throwOnError' | 'refetchOnReconnect' | 'queryHash'
 >
 
 export interface FetchQueryOptions<

packages/react-query/src/__tests__/suspense.test.tsx

@@ -1033,4 +1033,61 @@ describe('useSuspenseQueries', () => {
 
     await waitFor(() => rendered.getByText('data1'))
   })
+
+  it('should not request old data inside transitions (issue #6486)', async () => {
+    const key = queryKey()
+    let queryFnCount = 0
+
+    function App() {
+      const [count, setCount] = React.useState(0)
+
+      return (
+        <div>
+          <button
+            onClick={() => React.startTransition(() => setCount(count + 1))}
+          >
+            inc
+          </button>
+          <React.Suspense fallback={'Loading...'}>
+            <Page count={count} />
+          </React.Suspense>
+        </div>
+      )
+    }
+
+    function Page({ count }: { count: number }) {
+      const { data } = useSuspenseQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
+          queryFnCount++
+          await sleep(10)
+          return 'data' + count
+        },
+      })
+
+      return (
+        <div>
+          <div>{String(data)}</div>
+        </div>
+      )
+    }
+
+    const rendered = renderWithClient(
+      queryClient,
+
+      <App />,
+    )
+
+    await waitFor(() => rendered.getByText('Loading...'))
+
+    await waitFor(() => rendered.getByText('data0'))
+
+    fireEvent.click(rendered.getByText('inc'))
+
+    await waitFor(() => rendered.getByText('data1'))
+
+    await sleep(20)
+
+    expect(queryFnCount).toBe(2)
+  })
 })

packages/react-query/src/errorBoundaryUtils.ts

@@ -57,12 +57,13 @@ export const getHasError = <
   result: QueryObserverResult<TData, TError>
   errorResetBoundary: QueryErrorResetBoundaryValue
   throwOnError: ThrowOnError<TQueryFnData, TError, TQueryData, TQueryKey>
-  query: Query<TQueryFnData, TError, TQueryData, TQueryKey>
+  query: Query<TQueryFnData, TError, TQueryData, TQueryKey> | undefined
 }) => {
   return (
     result.isError &&
     !errorResetBoundary.isReset() &&
     !result.isFetching &&
+    query &&
     shouldThrowError(throwOnError, [result.error, query])
   )
 }

packages/react-query/src/useBaseQuery.ts

@@ -94,7 +94,6 @@ export function useBaseQuery<
     // Do the same thing as the effect right above because the effect won't run
     // when we suspend but also, the component won't re-mount so our observer would
     // be out of date.
-    observer.setOptions(defaultedOptions, { listeners: false })
     throw fetchOptimistic(defaultedOptions, observer, errorResetBoundary)
   }
 
@@ -104,7 +103,14 @@ export function useBaseQuery<
       result,
       errorResetBoundary,
       throwOnError: defaultedOptions.throwOnError,
-      query: observer.getCurrentQuery(),
+      query: client
+        .getQueryCache()
+        .get<
+          TQueryFnData,
+          TError,
+          TQueryData,
+          TQueryKey
+        >(defaultedOptions.queryHash),
     })
   ) {
     throw result.error

packages/react-query/src/useQueries.ts

@@ -329,24 +329,21 @@ export function useQueries<
     : []
 
   if (suspensePromises.length > 0) {
-    observer.setQueries(
-      defaultedQueries,
-      options as QueriesObserverOptions<TCombinedResult>,
-      {
-        listeners: false,
-      },
-    )
     throw Promise.all(suspensePromises)
   }
-  const observerQueries = observer.getQueries()
   const firstSingleResultWhichShouldThrow = optimisticResult.find(
-    (result, index) =>
-      getHasError({
-        result,
-        errorResetBoundary,
-        throwOnError: defaultedQueries[index]?.throwOnError ?? false,
-        query: observerQueries[index]!,
-      }),
+    (result, index) => {
+      const query = defaultedQueries[index]
+      return (
+        query &&
+        getHasError({
+          result,
+          errorResetBoundary,
+          throwOnError: query.throwOnError,
+          query: client.getQueryCache().get(query.queryHash),
+        })
+      )
+    },
   )
 
   if (firstSingleResultWhichShouldThrow?.error) {