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 } } `;
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.