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,
  });
}

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

getFullDetails

getFullDetails

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

getFullDetails

getFullDetails

getFullDetails

I've tried setting

cacheTime: 0

cacheTime: 0

cacheTime: 0

cacheTime: 0, manually calling

refetch

refetch

refetch

refetch in my component with a

useEffect

useEffect

useEffect

useEffect triggered by the state of

getFullDetails

getFullDetails

getFullDetails

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.

Query returning incorrect cache data

Similar Threads

Similar Threads

Similar Threads