Skip to content

Commit

Permalink
fix(useQuery): apply placeholderData also to disabled queries (#2541)
Browse files Browse the repository at this point in the history
  • Loading branch information
TkDodo authored Aug 10, 2021
1 parent b5c15c9 commit 418c48f
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 3 deletions.
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

1 comment on commit 418c48f

@vercel
Copy link

@vercel vercel bot commented on 418c48f Aug 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.