Reactjs – pass ID from GraphQL to React

i am trying to pass the ID to update a task
from false to true //or// from true to fale
problem is i am not sure i am passing the ID correctly because i get error 400, if i am passing correctly already the ID then i am doing something else wrong…

check updateTaskDone function
EDIT: i fixed 1 error, i was not passing the ID correctly, now yes, but anyways i get error 400 still don t know why it just says

"Field "updatedTask" must not have a selection since type "Boolean" has no subfields."

import './App.css';
import Task from './Task';
import React from 'react';
import TaskForm from './TaskForm';
import { useEffect, useState } from "react";
import {useQuery,gql,useMutation} from '@apollo/client'

const GET_TASKS = gql`
  query GetTasks {
    tasks {
      name
      done
    }
  }
`;

const ADD_TASK = gql`
mutation newTask($input: taskInput!) {
  newTask(input: $input) {
    name
  }
}
`;

const TASK_DONE = gql`
mutation updatedTask($id: ID!) {
  updatedTask(id: $id){
    done
  }
}
`;

function App() {
  const { loading: taskLoading, error: taskError, data: tasksData } = useQuery(GET_TASKS);
  
  const [tasks, setTasks] = useState(() => {
    const storedTasks = JSON.parse(localStorage.getItem('tasks'));
    return storedTasks ?? [];
    //return storedTasks !== null ? storedTasks : [];
  });

  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  const [addTaskMutation] = useMutation(ADD_TASK, {
    onCompleted: (data) => {
      setTasks(prevTasks => [...prevTasks, data.newTask]);
    },
    refetchQueries:[{query:GET_TASKS}]
  });

function AddTask(name) {
  addTaskMutation({
    variables: {
      input: {
        name: name
      }
    },
  })
}

  function removeTask(indexToRemove) {
  }

  const [updateTaskDoneMutation] = useMutation(TASK_DONE, {
    refetchQueries:[{query:GET_TASKS}]
  });

   function updateTaskDone(index,done) {
    const taskId = tasksData.tasks[index].id;
    updateTaskDoneMutation({
      variables: {
        id: taskId,
        done: done
      }
    })
  }

  
  function getMessage() {
    const percentage = numberTotal === 0 ? 0 : (numberComplete / numberTotal) * 100;
    if (percentage === 0) {
      return 'no tasks complete 😾';
    }
    if (percentage === 100) {
      return 'nice job! 😻';
    }
    return 'keep it up! 😼';
  }

  function renameTasks(index, newName) {
  }

  const numberComplete = tasks.filter(t => t.done).length;
  const numberTotal = tasks.length;
    
  return (
    <main>
      <h1>{numberComplete}/{numberTotal} Complete</h1>
      <h2>{getMessage()}</h2>
      <TaskForm onAdd={AddTask} />
      {tasksData && tasksData.tasks && tasksData.tasks.map((task, index) => (
        <Task
          {...task}
          key={index}
          onRename={newName => renameTasks(index, newName)}
          onTrash={() => removeTask(index)}
          onToggle={done => updateTaskDone(index, done)}
        />
      ))}
    </main>
  );

}

export default App;

i m showing also the resolver even if i tested the backend with apollo and it works already

    updatedTask: async (parent, {id}, context, info) => {
      const task = await client.get({
        index: 'tasks',
        id: id
      });
      await client.update({
          index: 'tasks',
          id: id,
          body: {
            doc: {
              done: !task._source.done
            }
          }
        });
    },

    type Mutation{
        updatedTask(id: ID!): Boolean
    }

this is the error

request

mutation updatedTask($id: ID!) {
  updatedTask(id: $id) {
    id
    __typename
  }
}

{
  "id": "5Ctm8ogBxAX3KEeiW6cG"
}

response

{1 item
"errors":[1 item
0:{3 items
"message":"Field "updatedTask" must not have a selection since type "Boolean" has no subfields."
"locations":[1 item
0:{2 items
"line":2
"column":24
}
]
"extensions":{2 items
"code":"GRAPHQL_VALIDATION_FAILED"
"stacktrace":[...]11 items
}
}
]
}