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.
