apollo-1.jsx

class Task extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      taskIsDone: false
    }
  }

  onCompletedHandler (data) {
    this.taskIsDone()
  }

  taskIsDone () {
    this.setState({ taskIsDone: true })
  }
  
  render() {
    if (this.state.taskIsDone) {
      return <TaskIsDone />
    }

    return (
      <Query query={checkIfTaskIsDone} onCompleted={this.onCompletedHandler} >
        {({ loading, error, data }) => {
          if (loading) return <Loader>Loading...</Loader>

          if (this.state.taskIsDone) {
            return <TaskIsDone />
          }

          return (
            <TaskIsNotDone
              taskId={data.task.id}
              taskIsDoneHandler={this.taskIsDone}
            />
          )
        }}
      </Query>
    )
  }
}