useMutation behaves unexpectedly (gets or passes wrong value)

[365kim]

This might be just a mistake that a javascript newbie has made, not a bug of your wonderful product. But your comment will be a big help for me to solve this problem. Thank you for your time. 🙏

Describe the bug

Situation: I cannot update "nickname(string)" in my address card.
Problem: useMutation behaves unexpectedly (gets or passes wrong value)

When I use useMutation and pass {id, nickname, ...address} to update my address card, it behaves like it remembers the previous value (of nickname) and neglects the new value.

The types of data that I pass are as below.

{
   id: 1,
   nickname: '365kim',
   address: {
      x: 127,
      y: 37,
      addressName: 'Gangnam Station',
      fullAddress: '804 Yeoksam 2-dong, Gangnam-gu, Seoul',
   }
}

If I simply change the order of arguments from {id, nickname, ...address} to {...address, id, nickname}, for some reason, I succeed to change the value. It seems like it does not neglect the new value anymore, then.

Still, I need to refresh the page to see the updated nickname on the card...!

What's interesting is...😭 instead of updating the nickname, when I try to update the address, which is data in an object, it works well.

Please tell me what I am missing... Any comment will be so helpful 🙏

To Reproduce

Steps to reproduce the behavior:

1. Go to 'https://seeyouthere.o-r.kr'
2. Click on 'top right login button'
3. Login with kakao
   • I recorded my screen regarding that you probably don't have a kakao account. Please watch the video clip below
4. Go to 'My address(내 주소관리)' menu
5. Try to modify address card
6. See error.

You can also see the codes here

Expected behavior

• I expected the mutate function to get the value of the nickname that I pass to it and pass it to fetch function.
• I expected my address card to be rerendered right after its update query succeeded.

Screenshots

2021-08-01.1.48.49.1.mp4

Codes in the video are here (useMutateAddress)

The function updateAddress is called here (UserAddressForm)

The userAddressList is fetched here (UserContext)

Desktop

• OS: macOS
• Browser: chrome
• Version: 92.0.4515.107(official build) (arm64)

Additional context

Default options are like below (in App.js)

  const queryClient = new QueryClient();

  queryClient.setDefaultOptions({
    queries: {
      staleTime: Infinity,
    },
  });

[TkDodo]

sorry to say but please don't open issues unless you are sure that there is an actual, reproducible issue with the library. I will move this to discussions so that we can keep talking about it some more.

That said, the best thing you can do is try to reproduce your issue in an isolated case, for example with codesandbox. It's really hard to analyze from looking at pictures, videos or even links to a big codebase. There could be many environmental factors in play that might or might not be the root cause.