Okay! How'd it go? Let me show you what I came up with.

After we hammer out our mutation in GraphQL Playground, it's time to move over to Habit.js.

First, import useMutation and gql from Apollo and the HABITS_QUERY from App.js:

import { useMutation, gql } from "@apollo/client";
import { HABITS_QUERY } from "./App";

Then, create the DELETE_HABIT mutation constant above the component:

const DELETE_HABIT = gql`
  mutation DELETE_HABIT($id: ID!) {
    deleteHabit(id: $id) {

Then, inside the component, add the useMutation hook:

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

Finally, we can update the UI by adding a button and some styling for error and loading:

<li style={{ color: error ? "red" : "black" }}>
      {error && (
          <span role="img" aria-label="warn emoji">
          </span>{" "}
      {`${habit.description} (${habit.points} points)`}
        onClick={() => deleteHabit({ variables: { id: habit.id } })}
       // this part stays the same

Way to go! 🎉

Next up, let's explore a more advanced bug we've inadvertently created. 😬


I finished! On to the next chapter