0

我正在尝试在表单提交上调用 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 会显示消息，但突变网络调用似乎没有被触发。

4

0 回答 0