T
TanStack3y ago
eastern-cyan

useMutation question

I am currently trying to replicate this react hook and confused about the intended functionality. link to the hook: https://github.com/wagmi-dev/wagmi/blob/main/packages/react/src/hooks/accounts/useConnect.ts It seems that the useMutation hook should run again when the connector argument changes so that we can generate a new mutationKey. However, when I put this function in a watchEffect in the setup function of a vue component I am unable to re-run the useMutation hook and get the error 'vue-query hooks can only be used in the setup funciton'
GitHub
wagmi/useConnect.ts at main · wagmi-dev/wagmi
React Hooks for Ethereum. Contribute to wagmi-dev/wagmi development by creating an account on GitHub.
4 Replies
xenial-black
xenial-black3y ago
useMutation must be run in setup directly, not wrapped in any callback that runs later. To achieve what you want you might create a ref, reactive or computed based on what you need, update it in watch and pass it to the useMutation. This way mutation calls will use new values, that you will provide. I think currently useMutation lacks proper ts signature, and there was an open PR to fix it in the old repository: https://github.com/DamianOsipiuk/vue-query/pull/253
eastern-cyan
eastern-cyanOP3y ago
Awesome. So the other aspect that is still unclear to me and I’d just like to clarify would be the non-reactive return values of the useMutate hook. the mutate function should change as a side effect of one of the computed/reactive arguments to useMutation changing The way that the mutation function works, the function itself doesn’t need to be reactive because when the mutate function is called the current state of those args will be passed so theoretically could have a switch with a number of different functions nested within the mutate
xenial-black
xenial-black3y ago
useMutation returns refs besides functions. You can pass new arguments for each call of mutate and do some logic in the mutateFn based on that. I'm not sure if you really want to have mutateFn as a conditional runner, instead of multiple useMutation hooks.
eastern-cyan
eastern-cyanOP3y ago
I think I get where you're coming from, but honestly not super familiar yet with react query or the usage in react, so lets definitely talk more on that PR about the fine details when we get it up.

Did you find this page helpful?