Apollo client - mutation detect mutation completion and then run code - reactjs

Question

I am trying to implement an update function and therefore, I am using GraphQL mutation. However, I need to be able to detect when a mutation completes so I can run a refresh function.
So far for the mutation I have:
const handleParameterUpdate = () => {
let active = true;
(async() => {
await updateParameterMutation({variables: {
parameterId: props.parameter.id,
newField: newFieldValue;
}});
if (!active) {
return;
}
})().then(props.updateParams());
}
Inside my parent component I have:
const handleRefresh = () => {
refetchJobParams({
id: parent.id
});
}
My intention is to run the handleRefresh function after the mutation is completed. So far it immediately runs after the handleParametersUpdate therefore, I need to refresh to get new the new parameters.

Answer 1

I don't see your useMutation here. However, there's an option for the useMutation hook to add a onCompleted callback which will get called on success. If you're also refetching something from an apollo query, then I can suggest that you also use refetchQueries options. This lets you write less code & let Apollo handle deal with the refetching & completion callbacks.
Mutation options (onCompleted & refetchQueries)
With your code though, if you wanted to run handleRefresh inside handleParameterUpdate, then you can extract whatever value is returned by your mutation.
const handleParameterUpdate = async () => {
const returnValue = await updateParameterMutation({variables: {
parameterId: props.parameter.id,
newField: newFieldValue;
}});
// whatever check you need to do on your mutation,
if (returnValue){
handleRefresh();
}
}