Axios Patch method is overriding the existing data

Question

enter image description here

If i decide to update only one field and i leave other fields empty because they already have data that i don't need to update, my axios patch method overrides the existing data with an empty data which is a very bad experience. Here is my code and what i have tried.

    const yupSchema = yup.object().shape({
        userName: yup.string(),
        gender: yup.string(),
        phoneNumber: yup.string(),
        bio: yup.string(),
        address: yup.string(),
    })

    const {
          handleSubmit,
          register,
          formState: { errors },
         } = useForm({ resolver: yupResolver(yupSchema) });


    const onSubmit = handleSubmit(async (value) => {
    
          const {userName, bio, address, phoneNumber, gender} = value
          const formData = new FormData()

          formData.append("userName", userName)
          formData.append("phoneNumber", phoneNumber)
          formData.append("bio", bio)
          formData.append("address", address)
          formData.append("gender", gender)

i dont know if im doing the right thing here but i know the problem is coming from the object value passed as a parameter here

          await axios.patch(`${url}/api/member/${userData._id}`,{userName, bio, address, 
           phoneNumber, gender})
         })

What can i do to achieve having the data fetched inside the input fields when i route to the edit page, how do i get this done using SWR?

Answer 1

I would guess that your server-side code accepts any properties in the request and sets them accordingly, even if they're empty.

What you want to do is filter out those empty properties before sending.

For example

const onSubmit = handleSubmit(async (value) => {
  const payload = Object.fromEntries(
    Object.entries(value).filter(([_, val]) => !!val)
  );

  await axios.patch(`${url}/api/member/${userData._id}`, payload);

See also

• Object.fromEntries()
• Object.entries()
• Array.prototype.filter()