Offline Mutations
Hello! I was experimenting with the convex-next.js sample and noticed something: when I switch Chrome to offline mode and send a few messages, the mutation doesn’t throw any errors. When I reconnect to the network, the messages are sent as expected.
I understand from the docs that Convex automatically saves these messages. However, is there a way to know if my mutation has been cached for later/retry? This would help prevent users from accidentally triggering the same action/mutation multiple times while offline or experiencing bad network.
Sorry if i missed it in the docs, but I can't seem to find any recommendations.
4 Replies
Thanks for posting in <#1088161997662724167>.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.
- Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
- Use search.convex.dev to search Docs, Stack, and Discord all at once.
- Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI.
- Avoid tagging staff unless specifically instructed.
Thank you!
I would do this with optimistic updates. You can have the mutation's optimistic update change relevant queries so it looks like the mutation has already completed. In the optimistic update you can change query results to have fields like
hasPendingMutation: true that never gets returned by the server query. Then you can render the query result differently to indicate that it's the result of a pending mutationSee https://docs.convex.dev/client/react/optimistic-updates
There are two slightly different ways to achieve what you want: check the connection state https://docs.convex.dev/api/classes/react.ConvexReactClient#connectionstate
and wait for the mutation promise to resolve. Like
(with more complex promise callbacks to handle errors)
Optimistic Updates | Convex Developer Hub
Even though Convex queries are completely reactive, sometimes you'll want to
Class: ConvexReactClient | Convex Developer Hub
react.ConvexReactClient
Thanks Lee, let me try this out