Boost Your React Apps with Apollo: Beyond the Basics

Updating the UI When a Mutation Completes


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