Data not displayed in React.js frontend with graphql

Question

graphql query running

import { gql } from '@apollo/client';

const GET_CLIENTS = gql`
  query getClients {
    clients {
      id
      name
      email
      phone
    }
  }
`;

export { GET_CLIENTS };

import {gql} from '@apollo/client';

const DELETE_CLIENT = gql`

mutation deleteClient($id: ID!) {
    
    deleteClient(id:$id) {
    
        id
        name
        email
        phone
    }
}
`;[enter image description here][1]

export {DELETE_CLIENT};

import React from 'react';
import { useQuery } from '@apollo/client';
import ClientRow from './ClientRow';
import { GET_CLIENTS } from './queries/clientQueries';

export default function Client({ id }) {
  const { loading, error, data } = useQuery(GET_CLIENTS, {
    variables: { id },
  });

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

 

  return (
    <table className="table table-hover mt-3">
      <tbody>
        {data.clients.map((client) => (
          <ClientRow key={client.id} client={client} />
        ))}
        

         </tbody>
    </table>
  );
}

import React from 'react'
import { DELETE_CLIENT } from './mutations/clientMutation'
import { useMutation } from '@apollo/client'
import { GET_CLIENTS } from './queries/clientQueries'

export default function ClientRow({client}) {

 const [deleteClient] = useMutation(DELETE_CLIENT,{
    variables:{id:client.id},
    refetchQueries:[{query:GET_CLIENTS}],
    update(cache,{data:{deleteClient}}) {
     const {clients} = cache.readQuery({query:GET_CLIENTS});
     cache.writeQuery({
        query:GET_CLIENTS,
        data:{clients:clients.filter(client=>client.id!==deleteClient.id),},
     })   
    }
 });

  return (
    <div>
      <tr>
        <td>{client.name}</td>
        <td>{client.email}</td>
        <td>{client.phone}</td>
         <td>
            <button onClick={deleteClient}>Delete</button>
         </td>
      </tr>
    </div>
  )
}

data is not displayed from mongodb using graphql in frontend react , however the query is running in backend localhost server . I want to run the react application and backend with graphql query and apis to fetch data from mongodb. The data from mongodb database is not displayed help me regarding this.