fix: move thenable-recreation into createResult

`updateResult` will only be called after a fetch, but when we switch between caches without a fetch, we will only call `createResult`; this fix stops `data` from the queryResult and the `thenable` to go out-of-sync; it's backwards compatible because `updateResult` also invokes `createResult`

Author: TkDodo

packages/query-core/src/queryObserver.ts

@@ -594,27 +594,7 @@ export class QueryObserver<
       promise: this.#currentThenable,
     }
 
-    return result as QueryObserverResult<TData, TError>
-  }
-
-  updateResult(notifyOptions?: NotifyOptions): void {
-    const prevResult = this.#currentResult as
-      | QueryObserverResult<TData, TError>
-      | undefined
-
-    const nextResult = this.createResult(this.#currentQuery, this.options)
-
-    this.#currentResultState = this.#currentQuery.state
-    this.#currentResultOptions = this.options
-
-    if (this.#currentResultState.data !== undefined) {
-      this.#lastQueryWithDefinedData = this.#currentQuery
-    }
-
-    // Only notify and update result if something has changed
-    if (shallowEqualObjects(nextResult, prevResult)) {
-      return
-    }
+    const nextResult = result as QueryObserverResult<TData, TError>
 
     if (this.options.experimental_prefetchInRender) {
       const finalizeThenableIfPossible = (thenable: PendingThenable<TData>) => {
@@ -648,6 +628,7 @@ export class QueryObserver<
             nextResult.status === 'error' ||
             nextResult.data !== prevThenable.value
           ) {
+            console.log('recreating thenable')
             recreateThenable()
           }
           break
@@ -662,6 +643,28 @@ export class QueryObserver<
       }
     }
 
+    return nextResult
+  }
+
+  updateResult(notifyOptions?: NotifyOptions): void {
+    const prevResult = this.#currentResult as
+      | QueryObserverResult<TData, TError>
+      | undefined
+
+    const nextResult = this.createResult(this.#currentQuery, this.options)
+
+    this.#currentResultState = this.#currentQuery.state
+    this.#currentResultOptions = this.options
+
+    if (this.#currentResultState.data !== undefined) {
+      this.#lastQueryWithDefinedData = this.#currentQuery
+    }
+
+    // Only notify and update result if something has changed
+    if (shallowEqualObjects(nextResult, prevResult)) {
+      return
+    }
+
     this.#currentResult = nextResult
 
     // Determine which callbacks to trigger

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

@@ -7385,5 +7385,92 @@ describe('useQuery', () => {
       fireEvent.click(rendered.getByText('enable'))
       await waitFor(() => rendered.getByText('test1'))
     })
+
+    it('should show correct data when read from cache only (staleTime)', async () => {
+      const key = queryKey()
+      let suspenseRenderCount = 0
+      queryClient.setQueryData(key, 'initial')
+
+      function MyComponent(props: { promise: Promise<string> }) {
+        const data = React.use(props.promise)
+
+        return <>{data}</>
+      }
+
+      function Loading() {
+        suspenseRenderCount++
+        return <>loading..</>
+      }
+      function Page() {
+        const query = useQuery({
+          queryKey: key,
+          queryFn: async () => {
+            await sleep(1)
+            return 'test'
+          },
+          staleTime: Infinity,
+        })
+
+        return (
+          <React.Suspense fallback={<Loading />}>
+            <MyComponent promise={query.promise} />
+          </React.Suspense>
+        )
+      }
+
+      const rendered = renderWithClient(queryClient, <Page />)
+      await waitFor(() => rendered.getByText('initial'))
+
+      expect(suspenseRenderCount).toBe(0)
+    })
+
+    it('should show correct data when switching between cache entries without re-fetches', async () => {
+      const key = queryKey()
+
+      function MyComponent(props: { promise: Promise<string> }) {
+        const data = React.use(props.promise)
+
+        return <>{data}</>
+      }
+
+      function Loading() {
+        return <>loading..</>
+      }
+      function Page() {
+        const [count, setCount] = React.useState(0)
+        const query = useQuery({
+          queryKey: [key, count],
+          queryFn: async () => {
+            await sleep(10)
+            return 'test' + count
+          },
+          staleTime: Infinity,
+        })
+
+        return (
+          <div>
+            <React.Suspense fallback={<Loading />}>
+              <MyComponent promise={query.promise} />
+            </React.Suspense>
+            <button onClick={() => setCount(count + 1)}>inc</button>
+            <button onClick={() => setCount(count - 1)}>dec</button>
+          </div>
+        )
+      }
+
+      const rendered = renderWithClient(queryClient, <Page />)
+      await waitFor(() => rendered.getByText('loading..'))
+      await waitFor(() => rendered.getByText('test0'))
+
+      fireEvent.click(rendered.getByText('inc'))
+      await waitFor(() => rendered.getByText('loading..'))
+
+      await waitFor(() => rendered.getByText('test1'))
+
+      console.log('---------dec------------')
+      fireEvent.click(rendered.getByText('dec'))
+
+      await waitFor(() => rendered.getByText('test0'))
+    })
   })
 })