Skip to content

ref: switch from throwing promises to React.use #10366

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TkDodo wants to merge 11 commits into
base: main
Choose a base branch
from
Open

ref: switch from throwing promises to React.use #10366

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
41ea6d9
feat: switch to `use` instead of throwing promises
TkDodo May 26, 2024
9dfe64f
merge main
TkDodo Mar 31, 2026
8a5fc2d
use
TkDodo Mar 31, 2026
08fa02a
Merge branch 'main' into feature/use
TkDodo Mar 31, 2026
5ff22cd
ci: apply automated fixes
autofix-ci[bot] Mar 31, 2026
1392061
fix: revert unnecessary changes
TkDodo Mar 31, 2026
8510102
fix: enhance error handling and observer updates in fetchOptimistic
TkDodo Mar 31, 2026
16950f0
ssr test
TkDodo Mar 31, 2026
4315a70
ci: apply automated fixes
autofix-ci[bot] Mar 31, 2026
e2cbc75
tanstack start integration test
TkDodo Mar 31, 2026
a5fec0f
ci: apply automated fixes
autofix-ci[bot] Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/query-core/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export {
dehydrate,
hydrate,
} from './hydration'
export { pendingThenable } from './thenable'
export { InfiniteQueryObserver } from './infiniteQueryObserver'
export { MutationCache } from './mutationCache'
export type { MutationCacheNotifyEvent } from './mutationCache'
Expand Down
168 changes: 14 additions & 154 deletions packages/react-query/src/__tests__/QueryResetErrorBoundary.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,8 @@ import {
QueryErrorResetBoundary,
useQueries,
useQuery,
useSuspenseQueries,
useSuspenseQuery,
} from '..'
import { renderWithClient } from './utils'
import { renderWithClient, renderWithClientAndSuspense } from './utils'

describe('QueryErrorResetBoundary', () => {
let queryCache: QueryCache
Expand Down Expand Up @@ -53,7 +51,7 @@ describe('QueryErrorResetBoundary', () => {
return <div>{data}</div>
}

const rendered = renderWithClient(
const rendered = await renderWithClientAndSuspense(
queryClient,
<QueryErrorResetBoundary>
{({ reset }) => (
Expand Down Expand Up @@ -84,7 +82,9 @@ describe('QueryErrorResetBoundary', () => {

succeed = true

fireEvent.click(rendered.getByText('retry'))
await act(async () => {
fireEvent.click(rendered.getByText('retry'))
})
await vi.advanceTimersByTimeAsync(11)
expect(rendered.getByText('data')).toBeInTheDocument()

Expand Down Expand Up @@ -120,7 +120,7 @@ describe('QueryErrorResetBoundary', () => {
)
}

const rendered = renderWithClient(
const rendered = await renderWithClientAndSuspense(
queryClient,
<QueryErrorResetBoundary>
{({ reset }) => (
Expand Down Expand Up @@ -151,7 +151,9 @@ describe('QueryErrorResetBoundary', () => {

succeed = true

fireEvent.click(rendered.getByText('retry'))
await act(async () => {
fireEvent.click(rendered.getByText('retry'))
})
await vi.advanceTimersByTimeAsync(11)
expect(rendered.getByText('status: error')).toBeInTheDocument()

Expand Down Expand Up @@ -188,7 +190,7 @@ describe('QueryErrorResetBoundary', () => {
return <div>{data}</div>
}

const rendered = renderWithClient(
const rendered = await renderWithClientAndSuspense(
queryClient,
<QueryErrorResetBoundary>
{({ reset }) => (
Expand Down Expand Up @@ -219,7 +221,9 @@ describe('QueryErrorResetBoundary', () => {

succeed = true

fireEvent.click(rendered.getByText('retry'))
await act(async () => {
fireEvent.click(rendered.getByText('retry'))
})
await vi.advanceTimersByTimeAsync(11)
expect(rendered.getByText('data')).toBeInTheDocument()

Expand Down Expand Up @@ -254,7 +258,7 @@ describe('QueryErrorResetBoundary', () => {
)
}

const rendered = renderWithClient(
const rendered = await renderWithClientAndSuspense(
queryClient,
<QueryErrorResetBoundary>
{({ reset }) => (
Expand Down Expand Up @@ -567,81 +571,6 @@ describe('QueryErrorResetBoundary', () => {
consoleMock.mockRestore()
})

it('should never render the component while the query is in error state', async () => {
const consoleMock = vi
.spyOn(console, 'error')
.mockImplementation(() => undefined)

const key = queryKey()
let fetchCount = 0
let renders = 0

function Page() {
const { data } = useSuspenseQuery({
queryKey: key,
queryFn: () =>
sleep(10).then(() => {
fetchCount++
if (fetchCount > 2) return 'data'
throw new Error('Error')
}),
retry: false,
})

renders++

return <div>{data}</div>
}

const rendered = renderWithClient(
queryClient,
<QueryErrorResetBoundary>
{({ reset }) => (
<ErrorBoundary
onReset={reset}
fallbackRender={({ resetErrorBoundary }) => (
<div>
<div>error boundary</div>
<button
onClick={() => {
resetErrorBoundary()
}}
>
retry
</button>
</div>
)}
>
<React.Suspense fallback={<div>loading</div>}>
<Page />
</React.Suspense>
</ErrorBoundary>
)}
</QueryErrorResetBoundary>,
)

expect(rendered.getByText('loading')).toBeInTheDocument()
await act(() => vi.advanceTimersByTimeAsync(10))
expect(rendered.getByText('error boundary')).toBeInTheDocument()
expect(rendered.getByText('retry')).toBeInTheDocument()

fireEvent.click(rendered.getByText('retry'))
expect(rendered.getByText('loading')).toBeInTheDocument()
await act(() => vi.advanceTimersByTimeAsync(10))
expect(rendered.getByText('error boundary')).toBeInTheDocument()
expect(rendered.getByText('retry')).toBeInTheDocument()

fireEvent.click(rendered.getByText('retry'))
expect(rendered.getByText('loading')).toBeInTheDocument()
await act(() => vi.advanceTimersByTimeAsync(10))
expect(rendered.getByText('data')).toBeInTheDocument()

expect(fetchCount).toBe(3)
expect(renders).toBe(1)

consoleMock.mockRestore()
})

it('should render children', () => {
const consoleMock = vi
.spyOn(console, 'error')
Expand Down Expand Up @@ -874,74 +803,5 @@ describe('QueryErrorResetBoundary', () => {

consoleMock.mockRestore()
})

it('with suspense should retry fetch if the reset error boundary has been reset', async () => {
const key = queryKey()
const consoleMock = vi
.spyOn(console, 'error')
.mockImplementation(() => undefined)

let succeed = false

function Page() {
const [{ data }] = useSuspenseQueries({
queries: [
{
queryKey: key,
queryFn: () =>
sleep(10).then(() => {
if (!succeed) throw new Error('Error')
return 'data'
}),
retry: false,
retryOnMount: true,
},
],
})

return <div>{data}</div>
}

const rendered = renderWithClient(
queryClient,
<QueryErrorResetBoundary>
{({ reset }) => (
<ErrorBoundary
onReset={reset}
fallbackRender={({ resetErrorBoundary }) => (
<div>
<div>error boundary</div>
<button
onClick={() => {
resetErrorBoundary()
}}
>
retry
</button>
</div>
)}
>
<React.Suspense fallback="loading">
<Page />
</React.Suspense>
</ErrorBoundary>
)}
</QueryErrorResetBoundary>,
)

expect(rendered.getByText('loading')).toBeInTheDocument()
await act(() => vi.advanceTimersByTimeAsync(10))
expect(rendered.getByText('error boundary')).toBeInTheDocument()
expect(rendered.getByText('retry')).toBeInTheDocument()

succeed = true

fireEvent.click(rendered.getByText('retry'))
expect(rendered.getByText('loading')).toBeInTheDocument()
await act(() => vi.advanceTimersByTimeAsync(10))
expect(rendered.getByText('data')).toBeInTheDocument()

consoleMock.mockRestore()
})
})
})
Loading
Loading