Data is not displayed at front end react with graphql queries at node.js backend

Data is not displayed at front end react with graphql queries at node.js backend


0

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.


Load 7 more related questions


Show fewer related questions

0



Leave a Reply

Your email address will not be published. Required fields are marked *