How to call useQuery fetch method for differenct API calls in one functional component?
I am using React-query in my project. I use useQuery() to fetch data from API and I made two get api calls in one functional component. One for get products and second for get product details.
I use refetch function in useEffect to call the refetch function only once. and I also want to use this function for my second api call but I got error.
Here is my code:
useEffect(() => {
refetch();
}, []);
let {refetch}=useQuery(
["product", user],
async (user) => {
return await getProducts(user?.queryKey[1]?.jwtToken);
},
{
enabled: false,
onSuccess: (data) => {
console.log(data.data);
setApiProduct(data?.data);
},
}
);
This api call get the data from db and it works perfectly. But I face problem to fetch data from 2nd api i.e getProductDetails
Here is the code for getDetailsProduct
{refetch } = useQuery(
["detailProduct", user],
async (user) => {
;
return await getDetailsProduct(user?.queryKey[1]?.jwtToken, "6213738798dbb2ecf4c23ddf");
},
{
enabled: false,
onSuccess: (data) => {
// console.log(data)
},
}
);
it provides me an error. How can I handle this error. kindly help me out.