Fixing Adding and Deleting Entries

We're now able to load the entries for each habit by clicking a button. The only problem is that adding and deleting entries still causes a refetch of the main habits query. Let's fix that.

We need to change the refetch option in each of these components to ENTRIES_QUERY and provide a habit id.

First, in Entry.js, delete the import for HABITS_QUERY and import the ENTRIES_QUERY instead:

// src/Entry.js
import { ENTRIES_QUERY } from "./Habit";

Then, update the delete entry mutation to use that query and pass in the habit id:

const [deleteEntry, { error, loading }] = useMutation(DELETE_ENTRY, {
    refetchQueries: [
      { query: ENTRIES_QUERY, variables: { id: entry.habitId } },
    ],
  });

We can do the same process in AddEntry.js. First, update the import:

// src/AddEntry.js
import { ENTRIES_QUERY } from "./Habit";

Then, update the create entry mutation:

// src/AddEntry.js
const [createEntry, { error, loading }] = useMutation(CREATE_ENTRY_MUTATION, {
    refetchQueries: [{ query: ENTRIES_QUERY, variables: { id: habitId } }],
    onCompleted: () => onAddEntrySuccess(),
  });

The app should now only refetch the entries when adding or deleting them.

Note: We're using refetching here, but you're certainly welcome to practice your cache modification skills instead. I didn't do this here because it's identical (seriously, just swapping a few words) to what you learned with adding and deleting habits. Feel free to do this as a bonus exercise for practice!