I made a simple form that sends data to the database using apollo, mutations and queries, I turned it into tsx hooks that I can use. Everything was going well until I got to the date and phone number fields (they are commented out in my code). When I try to make a request with these fields, I receive the error indicated in the title and the data is not sent. I think there are problems with the types, although the data comes in the types that are written in the schema
type FormValues = {
firstName?: string | undefined;
lastName?: string | undefined;
middleName?: string | undefined;
gender?: GenderType | undefined;
birthDate?: string | undefined;
phone?: string ;
country?: string | undefined;
email: string;
}
export const Profile= ()=> {
const styles = useTheme(getStyles);
const {data:userData,refetch} = usegetUser();
const [updateUser] = useuserEditProfile();
const navigation:NavigationProp<ParamListBase> = useNavigation();
const [ dateModalVisible,setDateModalVisible] = useState(false);
const phoneRegExp = /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/;
const schema = yup.object({
firstName:yup.string(),
lastName:yup.string(),
middleName:yup.string(),
gender: yup.string().oneOf(Object.values(GenderType)),
birthDate:yup.string(),
email:yup.string().email().required(),
phone:yup.string().matches(phoneRegExp, 'Phone number is not valid'),
country:yup.string(),
})
const {...methods} = useForm<FormValues>({
resolver:yupResolver(schema),
mode: 'onTouched',
reValidateMode: 'onChange',
})
const onSubmit = ({
firstName,
lastName,
middleName,
gender,
birthDate,
email,
phone,
country,
}:FormValues)=>{
console.log(typeof phone)
console.log(phone)
updateUser({
variables:{
input:{
firstName,
lastName,
middleName,
gender,
birthDate,
email,
phone,
country
}
}
}).then(()=>{
refetch()
navigation.goBack()
}).catch((error)=>console.log(error))
}
const error:SubmitErrorHandler<FormValues>=(errors)=>{
}
return( <View style = {styles.topMenu}>
<LeftArrowButton onPress={()=>navigation.goBack()}/>
<Text style = {styles.pageName}>Profile</Text>
<GreenLink text='Done' onPress={methods.handleSubmit(onSubmit,error)}/>
</View>
<Controller
control={methods.control}
name='email'
render={({ field: { onBlur, onChange, value } }) => (
<Input
name='email'
label="Email"
placeholder='Enter your e-mail'
onBlur={onBlur}
onChange={onChange}
value={value}
defaultValue={userData?.userMe.email!=null?userData?.userMe.email:""}
isError={methods.formState.errors.email?true:false}
isPassword={false}
isActive={methods.getValues("email")&&!methods.formState.errors.email?true:false}
/>
)}/>
</View>
<View style={styles.rubric}>
<Text style={styles.rubricName}>
Gender
</Text>
<Controller
control={methods.control}
name='gender'
render={({ field: { onChange, value } }) => (
<GenderRadioButtonGroup onChange={onChange} value = {value} defaultValue ={userData?.userMe.gender}/>
)}/>
</View>
{/*
<View style={styles.rubric}>
<Text style={styles.rubricName}>
Date of birth
</Text>
<Controller
control={methods.control}
name='birthDate'
render={({ field: { onBlur ,onChange, value } }) => (
<View>
<Input
name='birthDate'
onPress={()=>setDateModalVisible(true)}
label="B-Day"
placeholder='Select bate of birth'
onBlur={onBlur}
value={value}
onChange={onChange}
defaultValue={userData?.userMe.birthDate!=null?userData?.userMe.birthDate:""}
isPassword={false}
editable={false}
isActive={methods.getValues("birthDate")&&!methods.formState.errors.birthDate?true:false}
/>
<Modal
visible={dateModalVisible}
onRequestClose={() => {setDateModalVisible(!dateModalVisible);}}
transparent={true}
>
<CustomDatePicker setDateModalVisible={setDateModalVisible} onChange={onChange}/>
</Modal>
</View>
)}/>
</View> */}
{/* <View style={styles.rubric}>
<Text style={styles.rubricName}>
Account Info
</Text>
<Controller
control={methods.control}
name='phone'
render={({ field: { onBlur ,onChange, value } }) => (
<Input
name='phone'
label="Phone number"
placeholder='Enter your phone number'
onBlur={onBlur}
onChange={onChange}
value={value}
defaultValue={userData?.userMe.phone!=null?userData?.userMe.phone:""}
isPassword={false}
isActive={methods.getValues("phone")&&!methods.formState.errors.phone?true:false}
/>
)}/>
{methods.formState.errors.phone&&<Text>{methods.formState.errors.phone.message}</Text>}
</View> */}
</ScrollView>
</View>
)
}