harsh-harlequin

Query returning incorrect cache data

Hi all, I'm having some trouble with an API I'm hitting and React Query returning incorrect cached data and I'm not sure if I'm doing something wrong or not. This is my custom hook for the call:

export function useItemDetails(
  clientId: string,
  itemId?: string,
  getFullDetails = false
) {
  // Axios instance
  const instance = useInstance();

  instance.defaults.headers.common['clientId'] = clientId;
  instance.defaults.headers.common['getFullDetails '] = getFullDetails;

  const fetchItemDetails =
    (): Promise<ItemDetailsViewModel> => {
      return instance
        .get(`item/${itemId}`)
        .then((response) => response.data);
    };

  return useQuery({
    queryKey: [
      'itemDetails',
      clientId,
      itemId,
      getFullDetails,
    ],
    queryFn: fetchItemDetails,
    enabled: !!itemId,
  });
}

export function useItemDetails(
  clientId: string,
  itemId?: string,
  getFullDetails = false
) {
  // Axios instance
  const instance = useInstance();

  instance.defaults.headers.common['clientId'] = clientId;
  instance.defaults.headers.common['getFullDetails '] = getFullDetails;

  const fetchItemDetails =
    (): Promise<ItemDetailsViewModel> => {
      return instance
        .get(`item/${itemId}`)
        .then((response) => response.data);
    };

  return useQuery({
    queryKey: [
      'itemDetails',
      clientId,
      itemId,
      getFullDetails,
    ],
    queryFn: fetchItemDetails,
    enabled: !!itemId,
  });
}

I have a button that when clicked toggles the getFullDetails state variable. I can observe that the value is changing inside of this hook if I console log it. I'm still getting the incorrect value back from the cache. It is not refetching with the change to getFullDetails I've tried setting cacheTime: 0, manually calling refetch in my component with a useEffect triggered by the state of getFullDetails changing when the button is clicked. I can see multiple cache entries, one for true and another for false but they both have the same backing data which is incorrect. I can also call the API manually with postman and it returns correctly based on the header value. In the network tab I can see the request going out with the header set to true or the header not being present depending on the state but the value its pulling back is always from the cache and always incorrect for one of the states Not sure what I'm overlooking here.

4 Replies

deep-jade•3y ago

so you can see the request in the network tab. What's the response? Is it correct or incorrect ? usually, when you see the request in the network tab, react-query's job is done. What you get back will be stored under that key. You can compare that what you see in the cache in the devtools should be exactly what the network tab shows as a response to the request. If that's the case and data is wrong, its an issue on your backend (could be a browser cache, too)

harsh-harlequinOP•3y ago

I see in the network tab that requests are being "sent" with the header set to true or false. It's showing that the response was from cache rather than the server.

deep-jade•3y ago

That's the browser cache then, like because your backend sets an http cache header. If you see it in the network tab, it has already bypassed the react query cache. You'd see the same result firing fetch without RQ

harsh-harlequinOP•3y ago

That was exactly it. I didn't notice this endpoint was sending that back. Thanks for helping me sort this out!

Gaming

Programming

Query returning incorrect cache data

Did you find this page helpful?