Redux Query Dependent Mutations With Rollback Using createApi() - reactjs

Question

I have two mutations that need to happen one after another if the first one succeeds. As bonus I would like to undo the first mutation if the second fails.
I have the first part working but it feels clumsy and I'm wondering if there is better way.
Here is how I bring in my two mutations:
const [updateSubscription, {
isLoading: isLoadingUpdateSubscription,
isSuccess: isSuccessUpdatedSubscription,
isError: isErrorUpdateSubscription,
error: errorUpdateSubscription,
reset: resetUpdateSubscription
}] = useUpdateSubscriptionMutation();
const [updateDeviceListing, {
isLoading: isLoadingUpdateDeviceListing,
isSuccess: isSuccessUpdatedDeviceListing,
isError: isErrorUpdateDeviceListing,
error: errorUpdateDeviceListing,
reset: resetUpdateDeviceListing
}] = useUpdateDeviceListingMutation();
As part of a button click I run the first mutation where a subscription is updated:
const handleListIt = () => {
if (deviceListing && subscriptions) {
const updatedAvailableSeats = subscriptions[0].availableSeats - deviceListing.count;
const updatedUsedSeats = subscriptions[0].usedSeats + deviceListing.count;
updateSubscription({...subscriptions[0], availableSeats: updatedAvailableSeats, usedSeats: updatedUsedSeats});
}
};
I then use useEffect() to check isSuccessUpdatedSubscription and run the second mutation:
useEffect(() => {
if (isSuccessUpdatedSubscription && deviceListing) {
updateDeviceListing({...deviceListing, status: 'open'})
}
if (isSuccessUpdatedDeviceListing) {
onClosed();
}
}, [isSuccessUpdatedDeviceListing, isSuccessUpdatedSubscription, deviceListing, onClosed, updateDeviceListing]);
The same useEffect() is also used to check if the second mutation worked, isSuccessUpdatedDeviceListing, at which point onClosed() is called and the user is shown some different UI.

Answer 1

You can just handle both in handleListIt, there is really no good reason for the re-render with the useEffect. And then you can also handle the rollback as you want.
const handleListIt = async () => {
if (deviceListing && subscriptions) {
const updatedAvailableSeats = subscriptions[0].availableSeats - deviceListing.count;
const updatedUsedSeats = subscriptions[0].usedSeats + deviceListing.count;
try {
await updateSubscription({...subscriptions[0], availableSeats: updatedAvailableSeats, usedSeats: updatedUsedSeats}).unwrap();
await updateDeviceListing({...deviceListing, status: 'open'}).unwrap()
} catch (error) {
// do your rollback
}
}
};