developed-pink

How to refetch data from new API? Returns previous value

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');
...

...
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
    ...
  / >
)

...
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
  }}
...

...
<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

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

TanStack•3y ago

developed-pink

How to refetch data from new API? Returns previous value

...
export const AppQueryClient = new QueryClient()
...
AppQueryClient.setQueryData(['displayCurrency'], 'usd');
...

...
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
    ...
  / >
)

...
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
  }}
...

...
<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
  }}
...

displayCurrency

displayCurrency

How to refetch data from new API? Returns previous value

Similar Threads

How to refetch data from new API? Returns previous value

Similar Threads

Similar Threads

Similar Threads