I am trying to fetch some data from a FastAPI backend using the following:
const [data, setData] = useState()
const fetchData = async () => {
const res = await axios.post(`${fetchUrl}/fetch_data_calc`, {
year: year,
month: month,
day: day,
hour: hour,
});
setData({
data1: res.data.data1,
data2: res.data.data2,
data3: res.data.data3,
data4: res.data.data4,
});
return res.data;
};
const { isError, refetch, isFetching } = useQuery({ queryKey: ["myData"], queryFn: fetchData, retry: false });
And this works. But in my attempt to make it a bit more readable I am doing this:
const { isError: isError, refetch: refetch, isFetching: isFetching } = useQuery(
["myData"],
() => fetchData("fetch_data_calc", { year: year, month: month, day: day, hour: hour, }, setData),
{ retry: false }
);
However, in doing so, I get errors such as:
Request failed with status code 422 Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["myModel"]
And I am not sure what I am doing wrong here. Similar code in another component, which does something very similar works fine. But not in this case.