is there a way to find parameters given to useMutation while it is loading?

[pencil-user]

Suppose I have two different buttons for altering some item via component. In this case one button to lock a thread, and another to pin it:

function ControlPanel()
{
   const { mutateAsync, isLoading } = useMutation(alterPost)
   
   async function lock()
   {
         await mutateAsync({locked:true})
   }

   async function pin()
   {
         await mutateAsync({pinned:true})
   }

   if(isLoading)
       return <div> <button disabled>lock</button> <button disabled>pin<button> </div>
   
   return <div> <button onClick={lock}>lock</button> <button onClick={pin}>pin</button> </div>

}

Now, both buttons need to be disabled while item is mutating. But the one that is clicked also need to have spinning animation and a different label ('lock' to 'locking...' , 'pin' to 'pinning...' ). As it is, it is impossible to distinguish from isLoading alone which one is being sent. It would be possible with useState() hook, like so:

   const [status, useStatus] = useState(false)
   async function lock()
   {
        setStatus('locking')
        await mutateAsync({locked:true})
        setStatus(false)
   }

This works, but makes mutateAsync less useful, because isLoading becomes useless and we need extra state. Not a big deal, but if it was possible to recieve something in addition to isLoading from mutateAsync hook it would have been better. Something that shows the parameters that are being sent.

[TkDodo]

I would maybe do two dedicated mutations:

const lockMutation = useMutatation(() => alterPost({ locked: true })
const pinMutation = useMutatation(() => alterPost({ pinned: true })
const isLoading = lockMutation.isLoading || pinMutation.isLoading

return (
  <div>
    <button disabled={isLoading} onClick={lockMutation.mutate}>{lockMutation.isLoading ? 'locking' : 'lock'}</button>
    <button disabled={isLoading} onClick={pinMutation.mutate}>{pinMutation.isLoading ? 'pinning' : 'pin'}</button>
  </div>
)