Multiple Mutations with Optimistic UI and UI Retry Funcionality

[anatolzak]

I am trying to implement a UI that supports issuing multiple mutations with optimistic UI AND allowing the user to retry a failed mutation.

Imagine, I have a chat app, where the user should be able to:

• send multiple messages at once
• see the pending messages
• see failed messages and be able to click on a button to retry sending the message

I currently don't see a way to do that while allowing multiple mutations at the same time.

I see that the Optimistic Updates UI example shows pending state using variables and retrying a failed mutation using isError, mutate, and variables. However, this seems to only work if only allowing 1 mutation at a time.

I have already figured out how to show pending state of multiple mutations using useMutationState and filtering for pending mutations and selecting the variables for each mutation. This returns an array of the pending mutations.

However, I haven't been able to figure out how to show multiple failed mutations and allow the user to retry them. If I use useMutationState and filter by pending or error, now I will get an array of either pending or failed mutations. I can allow the user to retry the failed mutations by calling mutate again for the failed variables, however react query is just going to add a new mutation instance instead of retrying the same instance. Meaning the failed messages showing in the UI will never get removed.

I feel like what I am asking for is a realistic way of using mutations that many big apps would need, but unless I am wrong, I don't see a way to accomplish this easily.

I highly appreciate any feedback!