使用Tanstack查询时未进行重新渲染

我正在使用Tankstack查询获取API。这是用于获取数据的自定义挂钩,

import { useQuery } from "@tanstack/react-query";
import { ApiInstance } from "../axios/axios";
import { Endpoints } from "../endpoints/endpoints";

export const useGetApiDetails = (id) => {
  const { data, isLoading } = useQuery(["getApiDetails"], {
    queryFn: async () => {
      const { data } = await ApiInstance.get(Endpoints.getApiDetails(id));
      return data;
    },
  });
  return { data, isLoading };
};

这就是我使用自定义钩子的地方,

const Home = () => {
  const { pathname } = useLocation();
  const id = pathname.replace("/", "");
  const { data, isLoading } = useGetApiDetails(id);
  const [apiDetails, setApiDetails] = useState();
  const [requestParamList, setRequestParamList] = useState();

  useEffect(() => {
    setApiDetails(data?.data?.apiDetails);
    setRequestParamList(data?.data?.requestParamList);
  }, [data]);

  return (
    <div className="w-full h-full flex">
      {/* {isLoading ? (
        <h1>Loading...</h1>
      ) : ( */}
      <>
        <LeftSide apiDetails={apiDetails} requiredParams={requestParamList} />
        <RightSide apiDetails={apiDetails} requiredParams={requestParamList} />
      </>
      {/* )} */}
    </div>
  );
};

export default Home;

我将id作为params发送以获取特定数据。而且它发送得很好。但是,无论何时更改id,UI都不会得到更新。只有当我导航到其他选项卡并返回时,它才会更新。同样,我尝试使用普通axios获取方法获取。它看起来像这样,

const { pathname } = useLocation();
  const id = pathname.replace("/", "");
  const [apiDetails, setApiDetails] = useState();
  const [requestParamList, setRequestParamList] = useState();

  const fetchData = async (id) => {
      const response = await ApiInstance.get(Endpoints.getApiDetails(id))
      console.log(response.data, "res");
      setApiDetails(response.data.data.apiDetails)
      setRequestParamList(response.data.data.requestParamList)
  }

  useEffect((id) => {
    fetchData(id)
  }, [id]);

使用此代码,每当通过单击更改Id时,UI都会正确更新。我不知道为什么在使用Tanstack查询时没有发生这种情况。如有任何帮助,我们将不胜感激。