We've done a good job with our Delete Habit feature, but we have a bug. It turns out that Apollo resolves the loading state for the mutation separate from the refetchQuery. This means that it's possible to hit the delete button before the updated list returns.

Luckily, Apollo provides a fix for this with a single option we can provide to our mutation called awaitRefetchQueries:

const [deleteHabit, { error, loading }] = useMutation(DELETE_HABIT, {
    refetchQueries: [{ query: HABITS_QUERY }],
    awaitRefetchQueries: true,

Now when we hit the delete button, we can't click it again until the new list appears, and since that new list doesn't have the deleted habit, we don't even get the option!


I finished! On to the next chapter