-
-
Notifications
You must be signed in to change notification settings - Fork 3.6k
Closed
Closed
Copy link
Description
Describe the bug
As a follow-up to #8120, there's another case where the component suspends indefinitely. This occurs consistently when the promise and suspense are colocated. Here's a failing test:
it.only('should throw error if the promise fails (colocate suspense and promise)', async () => {
const consoleMock = vi
.spyOn(console, 'error')
.mockImplementation(() => undefined)
const key = queryKey()
let queryCount = 0
function MyComponent() {
const query = useQuery({
queryKey: key,
queryFn: async () => {
await sleep(1)
if (++queryCount > 1) {
// second time this query mounts, it should not throw
return 'data'
}
throw new Error('Error test')
},
retry: false,
})
const data = React.use(query.promise)
return <>{data}</>
}
function Page() {
return (
<React.Suspense fallback="loading..">
<MyComponent />
</React.Suspense>
)
}
const rendered = renderWithClient(
queryClient,
<ErrorBoundary
fallbackRender={(props) => (
<>
error boundary{' '}
<button
onClick={() => {
props.resetErrorBoundary()
}}
>
resetErrorBoundary
</button>
</>
)}
>
<Page />
</ErrorBoundary>,
)
await waitFor(() => rendered.getByText('loading..'))
await waitFor(() => rendered.getByText('error boundary'))
consoleMock.mockRestore()
fireEvent.click(rendered.getByText('resetErrorBoundary'))
await waitFor(() => rendered.getByText('loading..'))
await waitFor(() => rendered.getByText('data'))
expect(queryCount).toBe(2)
})Your minimal, reproducible example
Failing test above
Steps to reproduce
Run the test above
Expected behavior
The error boundary should trigger, but the component suspends indefinitely
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
OS: Windows 11
Browser: Chrome
Version: 129.0
Tanstack Query adapter
react-query
TanStack Query version
5.59.16
TypeScript version
No response
Additional context
No response
Metadata
Metadata
Assignees
Labels
No labels