试图通过道具将单击处理程序传递给Apollo查询

我正试图通过这个类的道具传递一个点击处理程序

class App extends Component {
 handleToggle = (todo:any) => () => {
  // update todo 
  console.log("I WORK!");
};

 render() {
  return (
    <div className="App">
      <Todos onTodoClick={this.handleToggle}/>
    </div>
  );
}

}

此函数包含 Query :

  function Todos(props: any) {
    return (
      <Query query={GET_TODOS}>
        {({ loading, error, data }) => {
          if (loading) return "Loading...";
          if (error) return `Error! ${error.message}`;
          return (
            <div>
              <List>
                {data.todos.map((todo: any) => (
                  <ListItem
                    key={todo.id}
                    onClick={() => props.onTodoClick(todo)} // HERE
                  >
                     <ListItemText primary={todo.text} />
                  </ListItem>
                ))}
              </List>
            </div>
          );
        }}
      </Query>
    );
  }

但是,不管我是否 Todo 道具单击处理程序永远不会被调用的函数或常量。我希望看到“我工作!”在控制台上,但没有发生。当接收函数包含Apollo查询时,如何通过道具传递click处理程序呢?