Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion src/core/queryObserver.ts
Original file line number Diff line number Diff line change
Expand Up @@ -495,7 +495,7 @@ export class QueryObserver<
if (
typeof options.placeholderData !== 'undefined' &&
typeof data === 'undefined' &&
status === 'loading'
(status === 'loading' || status === 'idle')
) {
let placeholderData

Expand Down
4 changes: 2 additions & 2 deletions src/core/tests/queryObserver.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -473,8 +473,8 @@ describe('queryObserver', () => {
})

expect(observer.getCurrentResult()).toMatchObject({
status: 'idle',
data: undefined,
status: 'success',
data: 'placeholder',
})

const results: QueryObserverResult<unknown>[] = []
Expand Down
58 changes: 58 additions & 0 deletions src/react/tests/useQuery.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3489,6 +3489,64 @@ describe('useQuery', () => {
])
})

it('should use placeholder data even for disabled queries', async () => {
const key1 = queryKey()

const states: { state: UseQueryResult<string>; count: number }[] = []

function Page() {
const [count, setCount] = React.useState(0)

const state = useQuery(key1, () => 'data', {
placeholderData: 'placeholder',
enabled: count === 0,
})

states.push({ state, count })

React.useEffect(() => {
setCount(1)
}, [])

return (
<div>
<h2>Data: {state.data}</h2>
<div>Status: {state.status}</div>
</div>
)
}

const rendered = renderWithClient(queryClient, <Page />)
await waitFor(() => rendered.getByText('Data: data'))

expect(states).toMatchObject([
{
state: {
isSuccess: true,
isPlaceholderData: true,
data: 'placeholder',
},
count: 0,
},
{
state: {
isSuccess: true,
isPlaceholderData: true,
data: 'placeholder',
},
count: 1,
},
{
state: {
isSuccess: true,
isPlaceholderData: false,
data: 'data',
},
count: 1,
},
])
})

it('placeholder data should run through select', async () => {
const key1 = queryKey()

Expand Down