ListAllTodos.js

import React, { Component } from 'react';
import { Query} from 'react-apollo';
import {getTodos} from '../../Queries';
import DeleteTodos from "./DeleteTodos";
import UpdateToDo from "./UpdateToDo";

class ListAllTodos extends Component {

    render() {
        return (
            <Query query={getTodos}>
                {({loading, error, data}) => {
                    if (loading) return 'Loading...';
                    if (error) return `Error! ${error.message}`;
                    return data.todo.map((todo) => (
                        <div className={todo.completed?"task "+"completed":"task"}>{todo.task}
                            <DeleteTodos todo_id={todo.id}/>
                            <UpdateToDo todo_id={todo.id}/>
                        </div>
                    ));

                }}
            </Query>
        );
    }
}

export default ListAllTodos;