Adding Total Points to the Habits Query

Outline

Adding queries to a React client follows a familiar pattern. Let's add totalPoints to our query.

First, we'll update the query in App.js:

const HABITS_QUERY = gql`
  query HABITS_QUERY {
    habits {
      id
      description
      points
      entries {
        id
        notes
        date
        completed
      }
    }

    totalPoints {
      points
      totalCompletedEntries
    }
  }
`;

Then, let's use those points in the UI and account for the singular and plural form of "entry."

const { habits, totalPoints } = data;
const entryString =  totalPoints.totalCompletedEntries.length > 1 ? "entries" : "entry";

Lastly, let's update the UI to use those new variables. First, we'll add the total points under the header:

<p>
  Total Points: {totalPoints.points} (
  {totalPoints.totalCompletedEntries} {entryString})
</p>

Finally, we'll replace data.habits with habits that we just created:

<ul className="habit-list">
  {habits.map((habit) => {
    return <Habit key={habit.id} habit={habit} />;
  })}
</ul>

Okay, we've got queries down, so let's move on to mutations in the next video.

Go Pro to unlock all content & remove ads

Adding Total Points to the Habits Query

Outline

Outline

I finished! On to the next chapter