Re-rendering is not happening while using Tanstack query

Question

I'm fetching the API using Tankstack query. This is the custom hook to fetch the data,

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

This is where I'm using the custom hook,

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;

I'm sending the id as params to fetch the particular data. And it is sent fine. But whenever the id is changed, the UI is not getting updated. It only updates when I navigate to other tab and comes back. Same I tried fetching using normal axios get method. It looks like this,

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]);

With this code, the UI is updating correctly whenever the Id is changed by clicking. I don't know why it is not happening when using Tanstack query. Any help on this would be appreciated.

The accepted answer is good. Another tip: remove `apiDetails` and `requestParamList` from state, you can just pass the data values directly into components `LeftSide` and `RightSide` — Ro Milton, Jul 17 '23 at 22:57

score 4 · Accepted Answer · answered Jul 17 '23 at 16:28

You should add the id also as dependency in query keys. This will uniquely identify the query to cache them and refetch automatically.

Refer this

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", id], {
    queryFn: async () => {
      const { data } = await ApiInstance.get(Endpoints.getApiDetails(id));
      return data;
    },
  });
  return { data, isLoading };
};

Yeah it works fine now. Thank you! – Santhosh Jul 17 '23 at 16:36 — Santhosh, Jul 17 '23 at 16:36

Re-rendering is not happening while using Tanstack query

1 Answers1