react-query previousData in placeholderData ignores requests that hit cache

[kimwes]

I'm trying to use useQuery placeholderData to avoid flickering content when querying for new content. These queries are made after a debounced input change that acts as part of the query key. The problem I'm facing is the following flow:

1. user types something new
2. user types something new
3. user types the 1) search term
4. user types something new and here the placeholder shown is not 1) result as is expected but instead is shown the result from 2) because apparently previousData doesn't use requests that are from cache.

Is this by design or a bug? Any ideas if this will be changed or should I make some sort of a workaround?
This is the same issue as with the person here: #5913 (comment)
Here's a simple test case that shows the problem:

`it('should keep the previous data when placeholderData is set and cache is used', async () => {
const key = queryKey()
const states: Array<UseQueryResult<number | undefined>> = []
const steps = [0, 1, 0, 2]

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

  const state = useQuery({
    staleTime: Infinity,
    queryKey: [key, steps[count]],
    queryFn: async () => {
      await sleep(10)
      return steps[count]
    },
    placeholderData: keepPreviousData,
  })

  states.push(state)

  return (
    <div>
      <div>data: {state.data}</div>
      <button onClick={() => setCount((c) => c + 1)}>setCount</button>
    </div>
  )
}

const rendered = renderWithClient(queryClient, <Page />)

await waitFor(() => rendered.getByText('data: 0'))

fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))

await waitFor(() => rendered.getByText('data: 1'))

fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))

await waitFor(() => rendered.getByText('data: 0'))

fireEvent.click(rendered.getByRole('button', { name: 'setCount' }))

await waitFor(() => rendered.getByText('data: 2'))

// Initial
expect(states[0]).toMatchObject({
  data: undefined,
  isFetching: true,
  isSuccess: false,
  isPlaceholderData: false,
})
// Fetched
expect(states[1]).toMatchObject({
  data: 0,
  isFetching: false,
  isSuccess: true,
  isPlaceholderData: false,
})
// Set state
expect(states[2]).toMatchObject({
  data: 0,
  isFetching: true,
  isSuccess: true,
  isPlaceholderData: true,
})
// New data
expect(states[3]).toMatchObject({
  data: 1,
  isFetching: false,
  isSuccess: true,
  isPlaceholderData: false,
})
// Set state with existing data
expect(states[4]).toMatchObject({
  data: 0,
  isFetching: false,
  isSuccess: true,
  isPlaceholderData: false,
})
// Set state where the placeholder value should come from cache request
expect(states[5]).toMatchObject({
  data: 0, // test fails this with a received value of 1 because cache requests are ignored in placeholderData: keepPreviousData
  isFetching: true,
  isSuccess: true,
  isPlaceholderData: true,
})
// New data
expect(states[6]).toMatchObject({
  data: 2,
  isFetching: false,
  isSuccess: true,
  isPlaceholderData: false,
})

})`

[TkDodo]

thanks for the reproduction, this indeed looks like a bug. @ardeora maybe you can look into this? I remember you did some work on keepPreviousData in v5. I think we store lastQueryWithDefinedData and this could be the reason here

[kimwes]

Thanks for the very fast answer!