AddTodo.js

import React, { Component } from 'react'
import { Mutation } from 'react-apollo';

import {ADD_TODO, TODO} from './queries'

class AddTodo extends Component {
  state = {
    content: ''
  }
  handleChange = (e) => {
    this.setState({
      content: e.target.value
    });
  }
  handleSubmit = (addTodo) => {
    // call function to add a todo
    if(this.state.content){addTodo({ variables: { todo: this.state.content},refetchQueries:[{query:TODO}]})
    this.setState({
      content: ""
    });}
    
    
  }
  render() {
    return (
      <Mutation mutation={ADD_TODO}>
      {(addTodo, { data }) => (
      <div>
        <form onSubmit={e => {
                            e.preventDefault();
                            this.handleSubmit(addTodo);
                        }}
        >
          <label>Add a new todo:</label>
         
          <input type="text" onChange={this.handleChange} value={this.state.content} />
          <input type="submit"/>
        </form>
      </div>
       )}
       </Mutation>
    )
  }
}


export default AddTodo

DeleteTodo.js

import React from 'react';
import { Mutation } from 'react-apollo';
import Button from 'react-bootstrap/Button'
import {DEL_TODO, TODO} from './queries'



const Del = (id) => {
    // <p className="center">You have no todo's left, yay!</p>
  return (
    <Mutation mutation={DEL_TODO}>
        {(deltodo, { data }) => (
        <span data-toggle="tooltip" title="Delete Todo" className="float-right mt-n2 ml-4" onClick={e=> {deltodo({ variables: id, refetchQueries: [{ query: TODO }] })}}>
          <Button variant="danger">X</Button>
         
        </span>
         )}
         </Mutation>
  )
}

export default Del;

MarkDone.js

import React from 'react';
import { Mutation } from 'react-apollo';
import Button from 'react-bootstrap/Button'
import MdDone from "react-icons/lib/md/done"
import {MARK_DONE, TODO} from './queries'





const Mark = (id) => {
    // <p className="center">You have no todo's left, yay!</p>
  return (
    <Mutation mutation={MARK_DONE}>
        {(markdone, { data }) => (
        <span data-toggle="tooltip" title="Delete Todo" className="float-right mt-n2" onClick={e=> {markdone({ variables: id, refetchQueries: [{ query: TODO }] })}}>
          <Button variant="success"><MdDone/></Button>
         
        </span>
         )}
         </Mutation>
  )
}

export default Mark;

queries.js

import gql from 'graphql-tag';

export const MARK_DONE=gql`
mutation MarkDone($id: Int!) {
    update_todo(
        where: {id: {_eq: $id}},
        _set: {
          done: true,
          
        }
      ) {
        affected_rows
        returning {
          id
          
        }
      }
  }
`;

export const TODO = gql` 
  query { 
  todo(order_by: {id: asc}){
    id
    todo
    done
  }
}
`
export const ADD_TODO = gql`
mutation AddTodo($todo: String!) {
  insert_todo(objects:[{todo:$todo}]){
    returning{
      id
    }
  }
}
`;

export const DEL_TODO=gql`
mutation AddTodo($id: Int!) {
    delete_todo(where:{id:{_eq:$id}}){
        affected_rows
      }
  }
`;