How to refetch data from new API? Returns previous value

[skorphil]

Hi, i want achieve scenario:
User select value => selected value passed to QueryClient => updated value from QueryClient used to refetch data (new value used for api call)

Component, which sets initial data

...
exportconstAppQueryClient=newQueryClient()...AppQueryClient.setQueryData(['displayCurrency'],'usd');
...

Component, which needs to update it's state, based on fetched data

...
const{data: displayCurrency}=useQuery({queryKey: ['displayCurrency']});// displayCurrency value used to fetch data
...
const{ isLoading, error, data, isFetching, refetch }=useQuery({queryKey: ['latestRecord'],queryFn: ()=>getSummaryData(displayCurrency)// here i'm passing displayCurrency to fetcher})...constgetSummaryData=async(currency)=>{// my fetcher function which us displayCurrencyconstresponse=awaitfetch(`MYAPI&currency=${currency}`);constrecord=awaitresponse.json();returnrecord};
...
// Based on data from query, Chart is drawnreturn(<Chart.../>
)

Component, which should trigger updating the previous component

...
<SelectonChange={(event)=>{constselectedCurrency=event.target.valueAppQueryClient.setQueryData(['displayCurrency'],selectedCurrency);// here i update displayCurrencyAppQueryClient.refetchQueries(['latestRecord'])// here i trigger refetching and expect it will use new displayCurrency}}...

However this is not working as expected.

1. Value in QueryClient is updating fine (checked in devtools)
2. Refetching is initialised fine
3. BUT Refetching returns initial data, completely ignoring new displayCurrency value. It also does not update if i select different values multiple time, but refetching initialise each time i select new value.
   It is refetch correctly(returning new values) only after some time(i guess when periodic refetch is happening).

Please, help me figure this out, how to make refetch, whith new displayCurrency?

[skorphil]

Well, I fixed this with passing queryFn arguments from queryKey. IDK why exactly this works, but somehow this fixed an issue:

const{ isLoading, error, data, isFetching, refetch }=useQuery({queryKey: ['latestRecord',displayCurrency],// here I added displayCurrency in queryKeyqueryFn: ({queryKey})=>getSummaryData(queryKey[1])// getting value from queryKey})

[kapobajza]

It works because the query won't refetch if the queryKey doesn't change (and also depending on your staleTime settings).

You should pay more attention to the docs.

[skorphil]

Thanks. I took this approach from docs, but didn't understand how it affects refetching.