I have a Next.js and TypeScript application where a request is made to a webhook integration that returns a Google sheet in JSON format. I've noticed that the integration keeps getting called repeatedly in a loop.
Here is a snippet of my code:
import { useQuery, UseQueryResult } from "@tanstack/react-query";
const useFetchData = <T>(url: string, queryKey: string): UseQueryResult<T> => {
return useQuery<T>({
queryKey: [queryKey],
queryFn: async () => {
console.log(`Fetching data from: ${url}`);
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Network response was not ok: ${response.statusText}`);
}
const data = await response.json();
console.log("Data fetched:", data);
return data;
},
});
};
export default useFetchData;
Even though I've added logs and confirmed that the page is not being re-rendered, the request to the integration keeps happening repeatedly. I'm struggling to identify the cause of this issue.