useQuery stays pending in headless Chromium despite queryFn resolving successfully

[ML-o13]

Describe the bug

useQuery stays in status: "pending" / fetchStatus: "fetching" indefinitely inside headless Chromium (Puppeteer), even though every underlying HTTP call in the queryFn completes with 200 and an inline replica of the exact same fetch sequence resolves successfully in under a second.

The queryFn performs 5 sequential supabase.from().select() calls, a synchronous .map() build phase, and returns. Puppeteer's network listeners confirm all 5 requests fire and respond with 200 OK. An async IIFE running the identical sequence in a parallel useEffect logs all sequential awaits completed after ~955 ms total — but the useQuery-wrapped version never transitions from pending to success. No error is thrown. No state change occurs until the React Query's own retry kicks in ~24 s later. After max retries, the query is still stuck pending (not error).

Expected: after queryFn resolves, the hook's status transitions to "success" and data is populated.

Your minimal, reproducible example

Unable to produce a CodeSandbox — the bug only reproduces in headless Chromium via Puppeteer. The same code runs normally in a regular Chrome / Firefox browser window.

Steps to reproduce

1. Vite + React 18 + @tanstack/react-query v5.83.0 app with a useQuery hook whose queryFn does multiple sequential supabase-js fetches
2. Render the app via puppeteer (page.goto(url, { waitUntil: 'domcontentloaded' }))
3. Inside the page, attach useEffect listeners that log status, fetchStatus, navigator.onLine every 3 s
4. Observe status stays "pending" indefinitely

Confirmed by attaching puppeteer page.on('request') / page.on('response') listeners: every fetch completes with 200, an inline replica of the same fetches in a parallel useEffect logs each step's completion time, but the React Query state never advances.

Expected behavior

After every await in the queryFn resolves and the function returns, the query's status should become "success" and subscribers should re-render with data.

How often does this bug happen?

Every time

Screenshots or Videos

No screenshots. Text log excerpt:

[req] GET .../shoe_models?...
[res 200] .../shoe_models?...
[req] GET .../model_views?...
[res 200] .../model_views?...
(...3 more endpoints, all 200...)
[trace] s1 shoe_models DONE 275ms rows=1 err=null
[trace] s2 model_views DONE 180ms
[trace] s3 model_zones DONE 150ms
[trace] s4 view_zone_masks DONE 141ms rows=43
[trace] s5 zone_materials DONE 209ms rows=27
[trace] all sequential awaits completed
[render-poll] status:"pending" fetchStatus:"fetching" views:0
[render-poll] status:"pending" fetchStatus:"fetching" views:0
(repeats every 3s for 25s)
[req] GET .../shoe_models?... ← React Query retry, same result

Platform

• Browser: Chromium 120 (system install in node:20-slim), driven by puppeteer 23.0.0
• OS: Debian 12 (bookworm) inside Docker container
• Same code works in user-agent-matched Chrome 120 on Windows 11 (browser mode)
• networkMode: 'always' set globally on the QueryClient (does not help)
• navigator.onLine === true

Tanstack Query adapter

react-query

TanStack Query version

5.83.0

TypeScript version

5.8.3

Additional context

What we ruled out:

• Offline-detection pause — networkMode: 'always' does not fix
• Cloudflare / UA detection — overriding page.setUserAgent to a normal Chrome UA does not fix
• Network / DNS — container-side curl / fetch resolve in ~100 ms
• supabase-js promise hanging — inline supabase.from().select() outside React Query resolves normally
• Event loop blocked — setInterval keeps firing throughout
• React not re-rendering — interval-based log confirms re-renders continue
• Concurrent-mode suspension — no boundaries involved

Workaround: replaced useQuery with useState + useEffect running the exact same fetches. Page renders in ~1 s instead of eternal hang.