在我的Next.js项目中，我使用react-query从MongoDB中获取数据，在我的表单中，我使用useMutation钩子发送POST请求：

/*** components ***/
import {Button, InputGroup} from "../index";

import {useMutation} from "react-query";
import {addUser} from "../../../utils/helpers/helper";

/*** form validation ***/
import {useFormik} from "formik";
import {validateInput} from "../../../utils/functions/validateInput";

const AddingForm = () => {

    const { mutate, status } = useMutation(addUser, {
        onSuccess: data => {
            console.log(data);
            const message = "success"
            alert(message)
        },
        onError: () => {
            alert("there was an error")
        },
        /*onSettled: () => {
            queryClient.invalidateQueries('create');
        }*/
    });

    const newUser = () => {
        mutate(formik.values)
    }

    const formik = useFormik({
        initialValues: {
            name: "",
            email: ""
        },
        onSubmit: newUser,
        validate: validateInput
    });


    return (
        <>
            <form onSubmit={formik.handleSubmit}>
                <InputGroup
                    label="Name"
                    name="name"
                    error={formik.errors.name}
                    isTouched={formik.touched.name}
                    {...formik.getFieldProps("name")}
                />
                <InputGroup
                    label="Email"
                    name="email"
                    error={formik.errors.email}
                    isTouched={formik.touched.email}
                    {...formik.getFieldProps("email")}
                />

                <Button disabled={!formik.values.name && !formik.values.email}
                        className={`w-full ${!formik.values.name || !formik.values.email ? 'bg-gray-200 text-gray-500' : 'bg-orange-200'}`}
                        type="submit"
                >
                    Aggiungi
                </Button>

            </form>
        </>
    )
}

export default AddingForm;

现在，如果我访问我的users页面，新用户会出现在那里，但我在终端控制台中看到以下内容：
API已解析，但未向/api/users发送响应，这可能导致请求延迟。
另外，useMutation中的onError方法没有alert()。只有onSuccess触发alert()，但是当我添加一个已经存在的用户名时。所以on Error应该触发，但是它没有。是的，一个奇怪的行为。
为了完整起见，下面是addUser函数：

/*** POST new user ***/
export const addUser = async (formData) => {

    try {
        
        const { response } = await axios.post(`${BASE_URL}/api/users`, formData);
        return response.data;

    } catch (error) {
        console.log("ERROR FROM TRY/CATCH", error.message)
        return error.message
    }
}

这是pages/api/users的处理程序：

import connectDB from "../../../db/connectDB";
import {getUsers, postUser, updateUser, deleteUser} from "../../../db/controllers/AddedUserController";

/**
 * @param {import('next').NextApiRequest} req
 * @param {import('next').NextApiResponse} res
 */

export default async function handler(req, res) {
    await connectDB().catch(() => res.status(405).json({error: "Connection Error"}))

    const {method} = req

    switch(method) {
        case "GET":
            await getUsers(req, res)
            break;
        case "POST":
            await postUser(req, res)
            break;
        case "PUT":
            await updateUser(req, res)
            break;
        case "DELETE":
            await deleteUser(req, res)
            break;
        default:
            res.setHeader("Allow", ["GET", "POST", "PUT", "DELETE"])
            res.status(405).end(`Method ${method} not allowed`)
    }
}

这是postUser：

/*** POST http://localhost:3000/api/users ***/
export async function postUser(req, res) {

    try {
        console.log("FORM DATA", req.body)

        if(!req.body || req.body === undefined) return res.status(404).json({error: "Form data not provided"})

        await AddedUser.create(req.body);

    } catch(error) {
        res.status(404).json({error: error.message})
    }
}

如果我知道useMutation有什么问题，或者我在什么地方遗漏了什么，我会很高兴的。

我的目标是：

• 1.使用react-query正确获取数据（现在的问题是POST请求）*
• 2.使用react-query找到一种方法来显示两种情况下的成功/错误通知 *