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)...