Данные о компонентах React не обновляются после обновления магазина Apollo-React - PullRequest
Новая
       6

Данные о компонентах React не обновляются после обновления магазина Apollo-React

0 голосов
/ 24 октября 2018

У меня есть несколько функций в простом приложении todo, которые должны запрашивать и обновлять mongodb.Кэш магазина apollo обновляется, как показано в их документации.Затем обновленное хранилище сопоставляется с элементами и флажками списка пользовательского интерфейса React Material в качестве реквизита компонента приложения.Когда пользователь щелкает элемент списка, элемент отображается только после обновления страницы.Похоже, что React не обновляет пользовательский интерфейс после обновления магазина или магазина не обновляется должным образом.Кто-нибудь знает, что вызывает это? 

class App extends Component {

updateTodo = async todo => {

//Update todo from database and frontend ui
await this.props.updateTodo({
  variables: {
    id: todo.id,
    //input opposite of current todo's complete value:
    complete: !todo.complete
  },
  //update the apollo cache with the new query information:
  update: store => {
    // Read the data from our cache for this query.
    const data = store.readQuery({ query: TodosQuery });
    //console.log(store);
    // Add our comment from the mutation to the end.
        //map through each todo and if current id matches todo id to    update return current

    data.todos = data.todos.map(
      inputVal => 
        //if current id matches todo id from the query
        inputVal.id === todo.id 
        ? {
          //keep all current todo's properties
          ...todo,
          //except change complete to its opposite:
          complete: !todo.complete

          }
          //else return current non-updated todo
        : inputVal
    )

    // Write our data back to the cache.
    store.writeQuery({ query: TodosQuery, data })
    //console.log(store);
  }
});
}

И раздел рендеринга: 

render() {
//Save the mongodb todos and loading status to props
const {
  data: {loading, todos}
} = this.props;
if (loading) {
  return null;
}

return ( 
  <div style = {{display: "flex"}}>
    <div style = {{margin: "auto", width: 400}}>
        {/* Paper component is a material ui background */}
      <Paper elevation={1}>
        <Form submit={this.createTodo}/>
          <List>

            {/* each todo from the database is mapped to a list item React component */}
            {todos.map(todo => 
              <ListItem
                key={todo.id}
                role={undefined}
                dense
                button
                //call update todo function when list item is clicked
                onClick={() => this.updateTodo(todo)}
              >
                <Checkbox
                // each todo's complete status is 
                  //set as the checked state in the checkbox component
                  checked={todo.complete}
                  //tabIndex={-1}
                  disableRipple
                />
                {/* text from the todo is set to the ListItemText component's primary text */}
                <ListItemText primary={todo.text} />
                <ListItemSecondaryAction>
                  {/* Call remove function when iconbutton component is clicked */}
                  <IconButton onClick={() => this.removeTodo(todo)}>
                    <CloseIcon />
                  </IconButton>
                </ListItemSecondaryAction>
              </ListItem> 
            )}
          </List>
      </Paper>

    </div>
</div>


   )
  }
}
export default compose(
    graphql(CreateTodoMutation, {name: "createTodo"}),
    graphql(RemoveMutation, {name: "removeTodo"}),
    graphql(UpdateMutation, {name: "updateTodo"}),
    graphql(TodosQuery)
   )(App);

Полный код проекта можно посмотреть здесь: https://github.com/tmstani23/todo-mern/tree/development/client/src

Любая помощь поэта проблема будет принята с благодарностью.

...