Mutation and update cache

Open src/components/Todo/TodoPrivateList.js and set the client that we receive as prop.

githubsrc/components/Todo/TodoPrivateList.js
class TodoPrivateList extends Component {
constructor(props) {
super(props);
this.state = {
filter: "all",
clearInProgress: false,
};
this.filterResults = this.filterResults.bind(this);
this.clearCompleted = this.clearCompleted.bind(this);
+ // Set the apollo client
+ this.client = props.client;
}

And finally update the clearCompleted function as below

clearCompleted() {
+ // Remove all the todos that are completed
+ const CLEAR_COMPLETED = gql`
+ mutation clearCompleted {
+ delete_todos(where: {is_completed: {_eq: true}, is_public: {_eq: false}}) {
+ affected_rows
+ }
+ }
+ `;
+
+ this.client.mutate({
+ mutation: CLEAR_COMPLETED,
+ optimisticResponse: {},
+ update: (cache, {data}) => {
+ const existingTodos = cache.readQuery({ query: GET_MY_TODOS });
+ const newTodos = existingTodos.todos.filter(t => (!t.is_completed));
+ cache.writeQuery({query:GET_MY_TODOS, data: {todos: newTodos}});
+ }
+ });
}

That's a wrap of the basic todo app.