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

...
export const AppQueryClient = new QueryClient()
...
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
  })
...
const getSummaryData = async (currency) => { // my fetcher function which us displayCurrency
  const response = await fetch(
    `MYAPI&currency=${currency}`);
  const record = await response.json();
  return record
};
...
// Based on data from query, Chart is drawn
return (
  <Chart
    ...
  / >
)

Component, which should trigger updating the previous component

...
<Select
onChange={(event) => {
  const selectedCurrency = event.target.value
    AppQueryClient.setQueryData(['displayCurrency'], selectedCurrency); // here i update displayCurrency
    AppQueryClient.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 queryKey
    queryFn: ({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.