I am facing an issue while using react query to make an api call. I am unable to pass the props to the api url even though they are being logged successfully in the console.
//useData.js
import { useQuery } from "@tanstack/react-query";
import Error from "./Components/Error";
const myBaseUrl =
"http://api.weatherapi.com/v1/forecast.json?key=59e580ae2ccf422c9fd551122xxxx";
const myFetchFunction = async (key, latitude, longitude) => {
console.log(latitude); //value gets consoled
try {
const res = await fetch(
`${myBaseUrl}&q=${latitude},${longitude}&aqi=yes&days=7`
);
const data = await res.json();
return data;
} catch (err) {
console.log(err);
return <Error />;
}
};
export const UseData = (key, latitude, longitude) => {
const { isLoading, isError, data } = useQuery(
["myData", latitude, longitude],
(key) => {
myFetchFunction(key, latitude, longitude);
},
{
cacheTime: 3600000,
}
);
return { isLoading, isError, data };
};
//mainScreen.js
//calling the custom hook
const { data, isLoading, isError } = UseData("myData", 34.16, 23.14);
Any insights on what could be going wrong here?