useQuery returns stale data on rendering for first time

[PoojaC94]

I'm using a useQuery which is of the form:
const { data } = useQuery(foo, async () => {...})

where

1. foo is a value that changes when I perform an action, say, select a dropdown menu item, item1
2. when I do that, useQuery is called with the stale data
3. The entire functional component is re-rendered, going to the initial value
4. When I click on item1 in the dropdown again, the component is rendered with the correct value

I use staleTime: Infinity

I want the component to render the proper value immediately and not on multiple reload of component. Please let me know if using useQuery in this case would be a good idea

[TkDodo]

show a reproduction please

[PoojaC94]

here ids is changed whenever I click on a dropdown value(which changes sampleArray), and I need to use ids in the getInfo API

[PoojaC94]

What actually happens is that the component seems to go back to the initial state when I change the dropdown value after loading for the first time and when I click on the same dropdown value again, it renders the correct values

[TkDodo]

a runnable reproduction that actually shows the issue. codesandbox / stackblitz are good for those.

[PoojaC94]

link I want to fetch the same query for a different id as you have explained in your blog :)

[PoojaC94]

and I want to fetch it as soon as the id/associated parameter changes