T
TanStack•3y ago
sensitive-blue

Using UseQuery with query params does not get new data after refetch

Hey friends after countless of debugging, I found that I'm not getting new data from the useQuery hook with query params with using Axios for the api fetching Here's currently the implementation 
const fetchAllReports = async (
  params: FetchAllReportsParams = {
    limit: 10,
  },
) => {
  const { data } = await client.get<ReportHistoryData[]>(`${BASE_URL}/my/api/endpoint`, {
    params,
  });

  return data;
};

export const useFetchAllReports = (
  params?: Filter[],
  config?: UseQueryOptions<ReportHistoryData[], Error>,
) => {

 // Just returns a list of objects that has key and value 
  const filters = filtersToQueryParams(params);


  return useQuery({
    queryKey: ['reports-history', Object.values(filters)],
    queryFn: () => fetchAllReports(filters),
    ...config,
  });
};
const fetchAllReports = async (
  params: FetchAllReportsParams = {
    limit: 10,
  },
) => {
  const { data } = await client.get<ReportHistoryData[]>(`${BASE_URL}/my/api/endpoint`, {
    params,
  });

  return data;
};

export const useFetchAllReports = (
  params?: Filter[],
  config?: UseQueryOptions<ReportHistoryData[], Error>,
) => {

 // Just returns a list of objects that has key and value 
  const filters = filtersToQueryParams(params);


  return useQuery({
    queryKey: ['reports-history', Object.values(filters)],
    queryFn: () => fetchAllReports(filters),
    ...config,
  });
};
5 Replies
sensitive-blue
sensitive-blueOP•3y ago
The weird thing about this is that even after removing the query itself from the cache, clearing the whole cache on queryClient Or even executing the refetch function that useQuery returns, it still doesn't return back with new data And the only way to get the new data was simply reload the tab Even just having with this setup, is still behaving the same 
 return useQuery({
    queryKey: ['reports-history'],
    queryFn: () => fetchAllReports(filters),
    ...config,
  });
 return useQuery({
    queryKey: ['reports-history'],
    queryFn: () => fetchAllReports(filters),
    ...config,
  });
It's even to the point that even refetching on the background and setting this configuration would ensure that it always get back with new data, and it still doesn't return new data 
  const { data, refetch, isLoading, error } = useFetchAllReports(filters, {
    refetchOnMount: true,
    refetchOnWindowFocus: true,
    staleTime: 0
  });
  const { data, refetch, isLoading, error } = useFetchAllReports(filters, {
    refetchOnMount: true,
    refetchOnWindowFocus: true,
    staleTime: 0
  });
like-gold
like-gold•3y ago
sounds like your backend is caching data, or the response sends http headers? Just look at the network tab of your browsers devtools. If you see a request, then react-query's job is done. If that request returns wrong / old data, you know where to fix it
sensitive-blue
sensitive-blueOP•3y ago
Can you elaborate it on the last thing that's mentioned which is on where fixing it?
like-gold
like-gold•3y ago
on the backend ?! it's not a react-query issue if the API returns old data ...
sensitive-blue
sensitive-blueOP•3y ago
got it thanks Finally found the solution, this ticket can be archived

Did you find this page helpful?