-1

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?

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Leyksnal
  • 13
  • 5
  • What happened to your `formData`? Are you even using it? – Phil Aug 03 '22 at 01:26
  • no the form data ain't doing anything , i was supposed to comment it out, i tried it too maybe it would help me append to the data but its not giving me the result that i want. – Leyksnal Aug 03 '22 at 02:34

1 Answers1

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

Phil
  • 157,677
  • 23
  • 242
  • 245
  • i'm trying to observe this code very well and understand before punching it. so that i can easily implement what you have suggested. – Leyksnal Aug 03 '22 at 02:36
  • @Leyksnal it's creating a new object from your `value` object where any empty (_falsy_) property values have been removed – Phil Aug 03 '22 at 02:40
  • thanks i will study it closely, it will solve my problem – Leyksnal Aug 03 '22 at 02:44
  • Your are a genius man, this just solved my problem and i'm pretty much going to be studying these methods. But i want to ask you a question.... So what if in cases where i want to filter out fields that has some specific words in it, is this a good method to use, can i rely on these method to achieve such goal.? – Leyksnal Aug 05 '22 at 01:38
  • Sure, you'd just need to tweak the `filter()` function. Return `true` and it's included, `false` and it's excluded – Phil Aug 05 '22 at 01:41