React
Boost Your React Apps with Apollo: Beyond the Basics
  •  

Updating the UI When a Mutation Completes

PRO

We're using some pieces of state to control the visibility of the EditHabit form and AddEntry forms. The problem is that we're not able to hide the form once the mutations complete.

We can fix this using the useMutation hook's onCompleted method:

// src/EditHabit.js
const [updateHabit, { error, loading }] = useMutation(UPDATE_HABIT_MUTATION, {
refetchQueries: [{ query: HABITS_QUERY }],
  awaitRefetchQueries: true,
  onCompleted: () => onEditSuccess(),
});

Now after we edit the habit, the form hides.

 

I finished! On to the next chapter