How to use the relay-hooks.useMutation function in relay-hooks

function commit(
  environment: Environment,
  todos: Todos,
  user: TodoListFooter_user,
): Disposable {
  const input: RemoveCompletedTodosInput = {
    userId: user.userId,
  };

  return useMutation(mutation, {
    variables: {
      input,
    },
    updater: (store: RecordSourceSelectorProxy) => {
      const payload = store.getRootField('removeCompletedTodos');
      const deletedIds = payload.getValue('deletedTodoIds');

      // $FlowFixMe `payload.getValue` returns mixed, not sure how to check refinement to $ReadOnlyArray
      sharedUpdater(store, user, deletedIds);
    },
    optimisticUpdater: (store: RecordSourceSelectorProxy) => {
      // Relay returns Maybe types a lot of times in a connection that we need to cater for
      const completedNodeIds: $ReadOnlyArray = todos.edges
        ? todos.edges
            .filter(Boolean)
            .map((edge: Edge): ?Node => edge.node)

const TodoList = (props) => {
  const { refetch, user } = props;
  //const { refetch } = props;
  //const user = useFragment(fragmentSpec, props.user);
  const  { todos, completedCount, totalCount, userId } = user;
  const [mutate] = useMutation(mutation);
  const handleMarkAllChange = (e: SyntheticEvent) => {
    const complete = e.currentTarget.checked;

    if (todos) {
      MarkAllTodosMutation.commit(mutate, complete, todos, user);
    }
  };

  const handlerRefetch = () => {
    const response = refetch(QueryApp,
      {userId: "you"},  
      null,  
      () => { console.log('Refetch done') },
      {force: true, fetchPolicy: "store-and-network"},  
    );
    //response.dispose();

const TodoListFooter = props => {
  const [user, functions] = useOssFragment(fragmentSpec, props.user);
  const {todos, completedCount, totalCount} = user;
  const completedEdges: $ReadOnlyArray =
    todos && todos.edges
      ? todos.edges.filter(
          (edge: ?Edge) => edge && edge.node && edge.node.complete,
        )
      : [];

  const [mutate] = useMutation(mutation);
  const handleRemoveCompletedTodosClick = () => {
    RemoveCompletedTodosMutation.commit(
      mutate,
      {
        edges: completedEdges,
      },
      user,
    );
  };

  const numRemainingTodos = totalCount - completedCount;

  console.log('completedCount', completedCount);

  return (
    <footer></footer>

function commit(
  complete: boolean,
  todos: Todos,
  user: TodoList_user,
): Disposable {
  const input: MarkAllTodosInput = {
    complete,
    userId: user.userId,
  };

  return useMutation(mutation, {
    variables: {
      input,
    },
    optimisticResponse: getOptimisticResponse(complete, todos, user),
  });
}

function commit(
  complete: boolean,
  todo: Todo_todo,
  user: Todo_user,
): Disposable {
  const input: ChangeTodoStatusInput = {
    complete,
    userId: user.userId,
    id: todo.id,
  };

  return useMutation(mutation, {
    variables: {
      input,
    },
    optimisticResponse: getOptimisticResponse(complete, todo, user),
  });
}

function commit(
  text: string,
  todo: Todo_todo,
): Disposable {
  const input: RenameTodoInput = {
    text,
    id: todo.id,
  };

  return useMutation(mutation, {
    variables: {
      input,
    },
    optimisticResponse: getOptimisticResponse(text, todo),
  });
}

function commit(
  todo: Todo_todo,
  user: Todo_user,
): Disposable {
  const input: RemoveTodoInput = {
    id: todo.id,
    userId: user.userId,
  };

  return useMutation(mutation, {
    variables: {
      input,
    },
    updater: (store: RecordSourceSelectorProxy) => {
      const payload = store.getRootField('removeTodo');
      const deletedTodoId = payload.getValue('deletedTodoId');

      if (typeof deletedTodoId !== 'string') {
        throw new Error(
          `Expected removeTodo.deletedTodoId to be string, but got: ${typeof deletedTodoId}`,
        );
      }

      sharedUpdater(store, user, deletedTodoId);
    },
    optimisticUpdater: (store: RecordSourceSelectorProxy) => {

const TodoApp = props => {
  const [user, refetch] = useRefetch(fragmentSpec, props.user);
  const [mutate, {loading}] = useMutation(mutation);
  const handleTextInputSave = (text: string) => {
    AddTodoMutation.commit(mutate, text, user);
    return;
  };

  const hasTodos = user.totalCount > 0;

  return (
    <div>
      <section>
        <header>
          <h1>todos {props.userId}</h1>

          </header></section></div>