Funtions with two parameter not working in React

Question

I have 2 files. One of them is "http" folder for requests, the other one is React Component. I have a problem when I want to change the form and upload a profile photo. Changing form is working (userDetails), but the photo object not working (UpdatedProfilePicture). The response comes back empty object.

I had an idea and tried. I changed the URL and deleted userDetails, and formData worked. But both of them not worked. Actually, the first parameter works, but the second parameter does not work. For request, I use React Query

The Component

  const { mutate } = useMutation(apiService.updateUserDetailsInfo);

  const onSubmit = () => {
    let formData = new FormData();
    formData.append("photo", UpdatedProfilePicture);
    const urlUserDetails = new URLSearchParams(userDetails);

    mutate(urlUserDetails, formData);

  };

The http folder

     updateUserDetailsInfo: async (userDetails, formData) => {
      const response = await httpService.patch(`/user/detailsInfo?${userDetails}`, formData);
      return response?.data;
    },

Answer 1

useMutation doesn't support functions with multiple parameters, but you can put all the data into a single parameter instead:

updateUserDetailsInfo: async (variables) => {
  const { userDetails, formData } = variables;
  const response = await httpService.patch(`/user/detailsInfo?${userDetails}`, formData);
  return response?.data;
},

// used like:
const { mutate } = useMutation(apiService.updateUserDetailsInfo);

const onSubmit = () => {
  let formData = new FormData();
  formData.append("photo", UpdatedProfilePicture);
  const userDetails = new URLSearchParams(userDetails);

  mutate({ userDetails, formData });
};