Best Practices | Convex Developer Hub
Morning!
I saw the docs on loading states with queries (https://docs.convex.dev/using/best-practices#loading-states). Wondering if there was a similar suggested pattern for mutations, or if I need to manage my own state here?
Best Practices | Convex Developer Hub
Here's a collection of our recommendations on how best to use Convex to build
7 Replies
I assume a similar approach could be used for the first invocation, but what about subsequent?
What do you mean in terms of a loading state for mutations? I think common best practices are to use optimistic updates to make your app feel snappy while the mutation is inflight (I'll admit our optimistic updates are a little less powerful than I'd like), and then once your mutation resolves, your queries should just automatically update with the results of your mutation?
Or are you talking about returning something from a mutation and what to do while the mutation is inflight?
I agree optimistic is the best approach in most cases. For this one in particular, I am wanting to disable a button a show a loading indicator that blocks the ui until I can confirm the data has successfully persisted to the backend.
FWIW this is for a mobile app where I'm being more thoughtful about variable network conditions.
One idea -- we have
connectionState (https://docs.convex.dev/api/classes/react.ConvexReactClient#connectionstate)
which exposes if there are any inflight mutations or actions. This is essentially what we use for our web clients to show
the "Your changes may not be saved" dialog when a user has inflight mutations when
trying to close the page.
It's currently not reactive, so you'd probably want to check it repeatedly in an interval,
and this would also apply to all requests, so this wouldn't work well if you only
wanted to show this loading indicator while certain mutations were inflight, but
allow the user to continue requesting other mutations / actions that don't affect
this loading state.Class: ConvexReactClient | Convex Developer Hub
react.ConvexReactClient
Thanks for the info. I'll take a look.
The other idea is to store this yourself in the database -- have the relevant
mutation(s) set a
version property on the object their modifying, store this
on the client, and show the loading indicator until the version sent from the
server reflects the update from the client. Convex does something like this internally
(the client sends an incrementing ID for each mutation, and we store it in the
DB, and use it to inform clients about which mutations have been performed), but
it doesn't look like we expose this in our clients right now.
(this might work better if you only have a couple mutations you care about before removing the loading state, but otherwise it might just be easier to use connection state to check that there are no inflight requests)Mutations also return a promise that’s resolved once the mutation completes and the client resyncs! You can also use that to check if a mutation is done.
But I agree with Sarah that in most cases it’s best to not worry about that for every mutation and instead have some general disconnected UI