Why useMutation resets status and isPending when user navigate between routes #7480
-
Need help with In devtools network this request still pending, but If i stay on I use how i use it: export function useStopServerMutation() {
const serverHash = useStore($serverHash)
const queryClient = useQueryClient()
return useMutation({
mutationFn: stopServer,
onSettled: async (response, error) => {
if (!response) return
if (response.success) {
await queryClient.invalidateQueries({ queryKey: [ReactQueryKeys.server] })
await queryClient.invalidateQueries({
queryKey: [ReactQueryKeys.serverMainInfo, serverHash],
})
}
},
})
} export function StopServer() {
const serverHash = useStore($serverHash)
const { isPending, mutateAsync } = useStopServerMutation()
const handleClick = () => {
mutateAsync({ gameServerHash: serverHash! })
}
return (
<Button
className="text-xl flex flex-row items-center flex-nowrap gap-2"
onClick={handleClick}
disabled={isPending}
variant="ghost"
>
<Square size={24} className="text-destructive fill-destructive" />
Остановить
</Button>
)
} |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
Mutations don't share state like Queries do. Whenever you mount a component, it gets a new instance of a Mutation. This makes sure you can trigger the same mutation multiple times. So if you navigate away and back, You can use |
Beta Was this translation helpful? Give feedback.
Mutations don't share state like Queries do. Whenever you mount a component, it gets a new instance of a Mutation. This makes sure you can trigger the same mutation multiple times.
So if you navigate away and back,
useMutation
is "fresh" and doesn't know anything about any mutation fired in the past.You can use
useMutationState
to read the state of all mutations in the cache.