When sending data to the database an error occurs [ApolloError: VALIDATION_ERROR]

16 Views Asked by At

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>
  )
}
0

There are 0 best solutions below