Implement Custom Extension Delete Graphql API with PWA (Magento 2.4)

Question

Please Help me with how I can implement the Delete request with my Custom PWA theme.

app/code/Custom/GraphQL/etc/schema.graphqls

type Mutation {
    employeeDelete(input: EmployeeDeleteInput!): EmployeeDeleteOutput @resolver(class: "\\Custom\\GraphQL\\Model\\Resolver\\EmployeeDelete") @doc(description:"Employee Delete")
}

input EmployeeDeleteInput {
    graphql_id: Int
}

type EmployeeDeleteOutput {
   success_message: String @doc(description: "Success Message")
}

app/code/Custom/GraphQL/Model/Resolver/EmployeeDelete.php

<?php

namespace Custom\GraphQL\Model\Resolver;

use Magento\Framework\GraphQl\Config\Element\Field;
use Magento\Framework\GraphQl\Query\ResolverInterface;
use Magento\Framework\GraphQl\Schema\Type\ResolveInfo;
use Custom\GraphQL\Model\GraphQLFactory as GraphQLFactory;

class EmployeeDelete implements ResolverInterface
{
    private $graphQLFactory;

    public function __construct(
        GraphQLFactory $graphQLFactory
    ) {
        $this->graphQLFactory = $graphQLFactory;
    }

    public function resolve(
        Field $field,
        $context,
        ResolveInfo $info,
        array $value = null,
        array $args = null
    ) {
        $data = [];
        $data['success_message'] = "";
        try {
            /*
                mutation {
                    employeeDelete(
                        input:{
                            graphql_id: 3
                        }
                    ){
                        success_message
                    }
                }
            */
            $graphql_id = $args['input']['graphql_id'];
            if (!isset($graphql_id)) {
                return $data['success_message'] = __("Must be set required data");
            } else {
                $model = $this->graphQLFactory->create();
                $model->load($graphql_id);
                $model->delete();
                $data['success_message'] = __("Employee data deleted successfully.");
            }
        } catch (NoSuchEntityException $e) {
            $data['success_message'] = __($e->getMessage());
        }
        return $data;
    }
}

Custom components

/pwa-studio/magento-pwa-studio/src/components/Employee/employeeList.js

import React from 'react';
import Button from '@magento/venia-ui/lib/components/Button';
import {gql, useQuery, useMutation} from '@apollo/client';

const GET_EMPLOYEE_LIST = gql`{
    employeeCollection {
        allEmployees {
            graphql_id
            name
            street
            city
            postcode
        }
    }
}`;

const DELETE_EMPLOYEE_MUTATION = gql`
  mutation employeeDelete($graphql_id: Int!){
      employeeDelete(
          input:{
              graphql_id: $graphql_id    
          }
      ){
          success_message
      }      
  }`;

const EmployeeList = () => {
  const {loading, error, data} = useQuery(GET_EMPLOYEE_LIST);
  if (loading) return 'Loading...';
  if (error) return 'Error!';

  function deleteRecord(id) {
    alert('You clicked '+ id);
  }

  return (<div className="employees-data">
    <h1 className="header-title">Employees Data</h1>
    <table border="1" id="employees-table">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Street</th>
          <th>City</th>
          <th>Postcode</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        {data.employeeCollection.allEmployees.map((employee) => (
          <tr>
            <td>{employee.graphql_id}</td>
            <td>{employee.name}</td>
            <td>{employee.street}</td>
            <td>{employee.city}</td>
            <td>{employee.postcode}</td>
            <td><Button onClick={() => deleteRecord(employee.graphql_id)}>Delete</Button></td>
          </tr>
        ))}
      </tbody>
    </table></div>);
};

export default EmployeeList;