Rendering todo items

It's the job of the TodoList component to render the todo list items. When the GET_USER query takes place, the TodoList component needs to be able to render all the todo items. Let's take a look at the item list again, with several more todos added.

Figure 31.4 – The Todos MVC app with the filled list

Here's the TodoList component itself:

import React from 'react';
import { useMutation } from '@apollo/client';
import Todo from './Todo';
import { MARK_ALL_TODOS, GET_USER } from '../constants';
function TodoList({ user: { todos, totalCount,
  completedCount } }) {
  const [markAllTodos] = useMutation(MARK_ALL_TODOS, {
    refetchQueries: [{ query: GET_USER, variables: 
      { userId: 'me' } }],
  });
  const handleMarkAllChange = () => {
    if (todos)...