订阅订阅的updateQuery不更新react dom

Question

我是Apollo-react和graphql的新手。我正在尝试根据从aws应用程序同步收到的订阅更新列表。但是，我确实看到订阅即将到达客户端，但是我无法用新数据重新呈现Dom。

Js检查器上的“ res”对象显示具有新条目的数组，但不会重新渲染并显示空列表。

// component

import React, { Component } from "react";

export default class ListTodo extends Component {

    constructor(props) {
        super(props);
    }

    static get defaultProps() {
        return {
                todos: []
        }
    }

    componentWillMount(){
        this.props.subscribeToNewTodos();
    }


    render() {
        const {todos} = this.props;
         if(todos) {
            return(
                <div className="table-container">
                    <div align="left"><label > Count: {todos.length}</label></div>
                    <br/>
                    <table className="w3-table-all w3-card-4">
                        <thead>
                            <tr>
                                <th> Id</th>
                                <th> ToDo Name</th>
                            </tr>
                        </thead>
                        <tbody>
                       {todos.map(function(todo, index){
                         return <tr key={index}><td>{todo.id}</td><td>{todo.name}</td></tr>
                     })}
                     </tbody>
                   </table>
                </div>
            )
        } else {
                return (<div> Empty!</div>)
        }
    }
}

// App.js


import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import AWSAppSyncClient from "aws-appsync";
import { Rehydrated } from 'aws-appsync-react';
import { AUTH_TYPE } from "aws-appsync/lib/link/auth-link";
import { graphql, ApolloProvider, compose } from 'react-apollo';
import * as AWS from 'aws-sdk';
import AppSync from './AppSync.js';

import GetToDoQuery from './Queries/GetToDoQuery.js';
import NewTodoSubscription from './Queries/NewTodoSubscription.js'
import ListTodo from "./components/ListTodo.jsx";

const client = new AWSAppSyncClient({
    url: AppSync.graphqlEndpoint,
    region: AppSync.region,
    auth: {
        type: AUTH_TYPE.API_KEY,
        apiKey: AppSync.apiKey
    },
});

class App extends Component {
render() {
return (
      <div className="App">
                  <header className="App-header">
                      <img src={logo} className="App-logo" alt="logo" />
                      <h1 className="App-title">Welcome to React</h1>
                  </header>
                  <p className="App-intro">
                      Welcome to GraphQL demo!
                  </p>

    <AllToDoWithData/>
  </div>
);
}
}

const AllToDoWithData = compose(
    graphql(GetToDoQuery, {
        options: {
            fetchPolicy: 'cache-and-network'
        },
        props: (props) => ({
            getTodos: props.data.getTodos,
            todos: props.data.getTodos && props.data.getTodos.todos,
            subscribeToNewTodos: params => {
                props.data.subscribeToMore({
                    document: NewTodoSubscription,
                    updateQuery: (prev, { subscriptionData }) => {
                                  // if (!subscriptionData.data) return prev;
                                  // const newFeedItem = subscriptionData.data.newTodo;
                                  // return Object.assign({}, prev, {
                                  //   getTodos: {
                                  //     todos: [newFeedItem, ...prev.getTodos.todos],
                                  //     __typename: "TodoConnection"
                                  //   }
                                  // });

                                  // return Object.assign({}, prev, {
                                  //           getTodos: Object.assign({}, prev.getTodos, {
                                  //             todos: [...prev.getTodos.todos, newFeedItem],
                                  //             __typename: "TodoConnection"
                                  //           })
                                  //   });
                                  const res = {
                                              getTodos: {
                                                      __typename: 'TodoConnection',
                                                  todos:
                                                       [
                                                          ...prev.getTodos.todos,
                                                          subscriptionData.data.newTodo,
                                                      ]
                                              }
                                          };
                                          return res;
                                }
                });
            },
        })
    })
)(ListTodo);

const WithProvider = () => (
    <ApolloProvider client={client}>
        <Rehydrated>
            <App />
        </Rehydrated>
    </ApolloProvider>
);

export default WithProvider;