Data not displayed in mongodb with graphql

Data not displayed in mongodb with graphql


0

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.

New contributor

hemantsingh21 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.


Load 7 more related questions


Show fewer related questions

0



Leave a Reply

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