Solution: Delete Habits with Refetching

Outline

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) {
      success
    }
  }
`;

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)`}
      <button
        type="button"
        onClick={() => deleteHabit({ variables: { id: habit.id } })}
        disabled={loading}
      >
        Delete
      </button>
      <ul>
       // this part stays the same
      </ul>
</li>

Way to go! 🎉

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

Go Pro to unlock all content & remove ads

Solution: Delete Habits with Refetching

Outline

Outline

I finished! On to the next chapter