Я выполняю запрос graphql со следующими типами данных:
mutation AddVehicle(
$freeSeats: Number!
$numberPlate: String!
$userId: Number!
)
На моем внешнем интерфейсе я использую текстовые поля пользовательского интерфейса, которые по умолчанию принимают входные данные в виде строки. Чтобы изменить его на целые числа, я использовал Number(freeSeats) et c при передаче параметров в функцию submitForm.
Однако, когда я отправляю форму, я все еще получаю эти ошибки, что означает, что значения по-прежнему передаются в виде строк. Как я могу это исправить?
The specified value type of field `freeSeats` does not match the field type.
GraphQL error: The specified value type of field `userId` does not match the field type.
Я также пытался console.log(isNumber(freeSeats) в начале функции submitForm. Это печатает правда. Итак, я знаю, что строки преобразуются в целые числа, но не передаются правильно в мутации.
export default function AddVehiclePage() {
const [isSubmitted, setIsSubmitted] = useState(false);
const [isAdded, setIsAdded] = useState(false);
const [errorMessage, setErrorMessage] = useState('');
const [addVehicle] = useMutation(ADD_VEHICLE);
const formik = useFormik({
initialValues:{
freeSeats: '',
numberPlate: '',
userId: '',
},
onSubmit:(values, actions) => {
submitForm(Number(formik.values.freeSeats),formik.values.numberPlate,Number(formik.values.userId));
validationSchema:schema
})
let submitForm = (
freeSeats: Number,
numberPlate: string,
userId: Number,
) => {
setIsSubmitted(true);
addVehicle({
variables: {
freeSeats: freeSeats,
numberPlate: numberPlate,
userId: userId,
},
})
.then(({ data }: ExecutionResult<CreateVehicleResponse>) => {
if (data !== null && data !== undefined) {
setIsAdded(true);
}
})
.catch((error: { message: string }) => {
console.log('Error msg:' + error.message);
});
};
return (
<div>
<Form
onSubmit={e => {
e.preventDefault();
formik.handleSubmit();
}}>
<div>
<TextField
variant="outlined"
margin="normal"
id="freeSeats"
name="freeSeats"
helperText={formik.touched.freeSeats ? formik.errors.freeSeats : ''}
error={formik.touched.freeSeats && Boolean(formik.errors.freeSeats)}
label="Free Seats"
value={formik.values.freeSeats}
onChange={props => {
formik.handleChange(props);
formik.handleBlur(props);
}}
onBlur={formik.handleBlur}
/>
<br></br>
<TextField
variant="outlined"
margin="normal"
id="numberPlate"
name="numberPlate"
helperText={formik.touched.numberPlate ? formik.errors.numberPlate : ''}
error={formik.touched.numberPlate && Boolean(formik.errors.numberPlate)}
label="Number Plate"
value={formik.values.numberPlate}
onChange={props => {
formik.handleChange(props);
formik.handleBlur(props);
}}
onBlur={formik.handleBlur}
/>
<br></br>
<TextField
variant="outlined"
margin="normal"
id="userId"
name="userId"
helperText={formik.touched.userId ? formik.errors.userId: ''}
error={formik.touched.userId && Boolean(formik.errors.userId)}
label="User Id"
value={formik.values.userId}
onChange={props => {
formik.handleChange(props);
formik.handleBlur(props);
}}
onBlur={formik.handleBlur}
/>
<br></br>
<CustomButton
text={'Add'}
/>
</div>
</Form>
</div>
);
}