表单单击上的GraphQL突变未触发

如何解决表单单击上的GraphQL突变未触发

我正在尝试在表单提交上调用 Apollo Mutation Hook 以在数据库中创建新记录。

export default function NewJobForm() {
    const { loading,error,data } = useQuery(GET_LOC_CAT_TYPE_QUERY);
    const [newJob] = useMutation(NEW_JOB_MUTATION);

    const [remote,setRemote] = useState(false);

    const editorRef = useRef(null);
    const log = () => {
        if (editorRef.current) {
            console.log(editorRef.current.getContent());
        }
    };

    let initialFormValues = {
        companyName: '',title: '',};

    const JobSchema = yup.object({
        companyName: yup.string().required('Please enter the company name.'),title: yup.string().required('Please enter the job title.'),});

    let formValidate = (values) => {
        console.log(values);
        const errors = {};
        return errors;
    };

    let handleError = (field,actions) => {
        field.forEach((data) => {
            let field = data.param;
            switch (field) {
                // case 'name':
                //   actions.setFieldError('name',data.msg);
                //   break;
                default:
                    break;
            }
        });
    };

    let formSubmit = async (values,actions) => {
        console.log(values);
        newJob({ variables: values });
    };


    return (
        <>

            <Formik
                validationSchema={JobSchema}
                validate={(values) => formValidate(values)}
                onSubmit={(values,actions) => formSubmit(values,actions)}
                enableReinitialize={true}
                initialValues={initialFormValues}
                validateOnChange={true}
                validateOnBlur={false}
            >
                {({ handleSubmit,setFieldValue,values }) => (
                    <form novalidate onSubmit={handleSubmit}>
                        <div className="space-y-8 divide-y divide-gray-200">
                            <div>
                                <div>
                                    <h3 className="text-lg font-medium leading-6 text-gray-900">
                                        Job Details
                                    </h3>
                                    <p className="mt-1 text-sm text-gray-500">
                                        This information will be displayed
                                        publicly so be careful what you share.
                                    </p>
                                </div>

                                <div className="grid grid-cols-1 mt-6 gap-y-6 gap-x-4 sm:grid-cols-6">
                                    <div className="sm:col-span-4">
                                        <TextInput
                                            label="Company Name"
                                            id="companyName"
                                            name="companyName"
                                            type="text"
                                            placeholder="eg: Google"
                                            helpText="Please Enter the name of the company"
                                        />
                                    </div>

                                    <div className="sm:col-span-4">
                                        <TextInput
                                            label="Job Title"
                                            id="title"
                                            name="title"
                                            type="text"
                                        />
                                    </div>

                                </div>
                            </div>
                        </div>
                    </form>
                )}
            </Formik>
        </>
    );
}

在提交表单时，console.log 显示消息，但似乎没有触发突变网络调用。