TanStack · KATT · Dec 20, 2024 · Dec 20, 2024 · Dec 20, 2024 · Dec 20, 2024
diff --git a/examples/react/transition/.eslintrc b/examples/react/transition/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["plugin:react/jsx-runtime", "plugin:react-hooks/recommended"]
+}
diff --git a/examples/react/transition/.gitignore b/examples/react/transition/.gitignore
@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+pnpm-lock.yaml
+yarn.lock
+package-lock.json
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/react/transition/README.md b/examples/react/transition/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `pnpm install`
+- `pnpm dev`
diff --git a/examples/react/transition/index.html b/examples/react/transition/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" type="image/svg+xml" href="/emblem-light.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+
+    <title>TanStack Query React Suspense Example App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/transition/package.json b/examples/react/transition/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@tanstack/query-example-react-transition",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.62.8",
+    "@tanstack/react-query-devtools": "^5.62.8",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.3",
+    "typescript": "5.7.2",
+    "vite": "^5.3.5"
+  }
+}
diff --git a/examples/react/transition/public/emblem-light.svg b/examples/react/transition/public/emblem-light.svg
diff --git a/examples/react/transition/src/index.tsx b/examples/react/transition/src/index.tsx
@@ -0,0 +1,102 @@
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from '@tanstack/react-query'
+import { Suspense, use, useState, useTransition } from 'react'
+import ReactDOM from 'react-dom/client'
+
+const Example1 = ({ value }: { value: number }) => {
+  const { isFetching, promise } = useQuery({
+    queryKey: ['1' + value],
+    queryFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return '1' + value
+    },
+  })
+  const data = use(promise)
+
+  return (
+    <div>
+      {data} {isFetching ? 'fetching' : null}
+    </div>
+  )
+}
+
+const Example2 = ({ value }: { value: number }) => {
+  const { promise, isFetching } = useQuery({
+    queryKey: ['2' + value],
+    queryFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      return '2' + value
+    },
+    // placeholderData: keepPreviousData,
+  })
+
+  const data = use(promise)
+
+  return (
+    <div>
+      {data} {isFetching ? 'fetching' : null}
+    </div>
+  )
+}
+
+const SuspenseBoundary = () => {
+  const [state, setState] = useState(-1)
+  const [isPending, startTransition] = useTransition()
+
+  return (
+    <div>
+      <h1>Change state with transition</h1>
+      <div>
+        <button
+          onClick={() =>
+            startTransition(() => {
+              setState((s) => s - 1)
+            })
+          }
+        >
+          Decrease
+        </button>
+      </div>
+      <h2>State:</h2>
+      <ul>
+        <li>last state value: {state}</li>
+        <li>
+          transition state: {isPending ? <strong>pending</strong> : 'idle'}
+        </li>
+      </ul>
+      <h2>2. 1 Suspense + startTransition</h2>
+      <Suspense fallback="fallback 1">
+        <Example1 value={state}></Example1>
+      </Suspense>
+      <h2>2.2 Suspense + startTransition</h2>
+      <Suspense fallback="fallback 2">
+        <Example2 value={state}></Example2>
+      </Suspense>
+    </div>
+  )
+}
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      experimental_prefetchInRender: true,
+      staleTime: 10 * 1000,
+    },
+  },
+})
+
+const App = () => {
+  return (
+    <div>
+      <QueryClientProvider client={queryClient}>
+        <SuspenseBoundary />
+      </QueryClientProvider>
+    </div>
+  )
+}
+
+const rootElement = document.getElementById('root') as HTMLElement
+ReactDOM.createRoot(rootElement).render(<App />)
diff --git a/examples/react/transition/tsconfig.json b/examples/react/transition/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "eslint.config.js"]
+}
diff --git a/examples/react/transition/vite.config.ts b/examples/react/transition/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/packages/react-query/src/__tests__/regression-8384-transition.test.tsx b/packages/react-query/src/__tests__/regression-8384-transition.test.tsx
@@ -0,0 +1,107 @@
+/* eslint-disable @typescript-eslint/require-await */
+import { act, render, screen } from '@testing-library/react'
+import * as React from 'react'
+import { afterAll, beforeAll, describe, expect, it } from 'vitest'
+import { QueryClientProvider, useQuery } from '..'
+import { QueryCache } from '../index'
+import { createQueryClient, queryKey, sleep } from './utils'
+
+describe('react transitions', () => {
+  const queryCache = new QueryCache()
+  const queryClient = createQueryClient({
+    queryCache,
+  })
+
+  beforeAll(() => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    global.IS_REACT_ACT_ENVIRONMENT = true
+    queryClient.setDefaultOptions({
+      queries: { experimental_prefetchInRender: true },
+    })
+  })
+  afterAll(() => {
+    queryClient.setDefaultOptions({
+      queries: { experimental_prefetchInRender: false },
+    })
+  })
+
+  it('should keep values of old key around with startTransition', async () => {
+    const key = queryKey()
+    const resolveByCount: Record<number, () => void> = {}
+
+    function Loading() {
+      return <>loading...</>
+    }
+
+    function Page() {
+      const [isPending, startTransition] = React.useTransition()
+      const [count, setCount] = React.useState(0)
+      const query = useQuery({
+        queryKey: [key, count],
+        queryFn: async () => {
+          await new Promise<void>((resolve) => {
+            resolveByCount[count] = resolve
+          })
+          return 'test' + count
+        },
+      })
+
+      const data = React.use(query.promise)
+
+      return (
+        <div>
+          <button onClick={() => startTransition(() => setCount((c) => c + 1))}>
+            increment
+          </button>
+          {isPending && <span>pending...</span>}
+          <div>data: {data}</div>
+        </div>
+      )
+    }
+
+    // Initial render should show fallback
+    await act(async () => {
+      render(
+        <QueryClientProvider client={queryClient}>
+          <React.Suspense fallback={<Loading />}>
+            <Page />
+          </React.Suspense>
+        </QueryClientProvider>,
+      )
+    })
+    screen.getByText('loading...')
+    expect(screen.queryByText('button')).toBeNull()
+    expect(screen.queryByText('pending...')).toBeNull()
+    expect(screen.queryByText('data: test0')).toBeNull()
+
+    // Resolve the query, should show the data
+    await act(async () => {
+      resolveByCount[0]!()
+    })
+    // HELP WANTED - get the below to fail as the repro does
+    expect(screen.queryByText('loading...')).toBeNull()
+    screen.getByRole('button')
+    expect(screen.queryByText('pending...')).toBeNull()
+    screen.getByText('data: test0')
+
+    // Update in a transition, should show pending state, and existing content
+    await act(async () => {
+      for (let i = 0; i < 100; i++) {
+        screen.getByRole('button', { name: 'increment' }).click()
+      }
+    })
+
+    // resolve all
+    for (const resolve of Object.values(resolveByCount)) {
+      await sleep(1)
+      await act(async () => {
+        resolve()
+      })
+    }
+
+    expect(screen.queryByText('loading...')).toBeNull()
+    expect(screen.queryByText('pending...')).toBeNull()
+    screen.getByText('data: test100')
+  })
+})
diff --git a/packages/react-query/vite.config.ts b/packages/react-query/vite.config.ts
@@ -10,7 +10,7 @@ export default defineConfig({
     watch: false,
     environment: 'jsdom',
     setupFiles: ['test-setup.ts'],
-    coverage: { enabled: true, provider: 'istanbul', include: ['src/**/*'] },
+    coverage: { enabled: false, provider: 'istanbul', include: ['src/**/*'] },
     typecheck: { enabled: true },
     restoreMocks: true,
     retry: process.env.CI ? 3 : 0,

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml