only complete mutation after query success

[jonathanstanley]

I'm trying to do something like this:

myAction.mutate(myInput) >> myQuery().data >> fetch({myInput, myQueryData})

In other words, the user hits return to trigger the mutation, then I need to ensure I have non-stale data from a dependent query, then combine the data to complete the mutation fetch.

when I add something like await queryClient.refetchQueries("myQuery"); the mutation doesn't actually wait for the returned data from the dependent query. additionally, it doesn't ensure the query was successful.

Is there a way to do this or a better pattern to follow?

[TkDodo]

you can use onMutate to run anything you want before the mutation starts, and the usual onSuccess / onError / onSettled for things that should happen after the mutation. Promises returned from those functions are awaited.

[jonathanstanley]

🤦‍♂️. I should have thought of that. Thank you!