Estoy creando una aplicación de gestión de proyectos usando reactjs y graphql.

Cuando envío una consulta desde reactjs, obtiene una respuesta con los datos a continuación

 { "data":{ "clients":[ { "name":"Okoye Ifeoma", "email":"ify@mail.com", "phone":"0805-854-754-580" } ] } }

Pero no muestra los datos en el navegador, sino que muestra el siguiente error en la consola

Error: Array.prototype.map() espera un valor de retorno de la función de flecha

Clientela

 import { gql, useQuery } from "@apollo/client"; import ClientRow from "./ClientRow"; const GET_CLIENTS = gql` query getClients { clients { id name email phone } } `; export const Clients = () => { const { loading, error, data } = useQuery(GET_CLIENTS); if (loading) return <p>loading...</p> console.log(data.clients); if (error) return <p>Something went wrong</p> return ( <> {!loading && !error && ( <table className="table table-hover mt-3"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> <th></th> </tr> </thead> <tbody> {data.clients.map(client => { <ClientRow key={client.id} client={client} /> })} </tbody> </table> )} </> ); };

FilaCliente

 import { FaTrash } from "react-icons/fa"; export default function ClientRow({ client }) { return ( <tr> <td>{client.name}</td> <td>{client.email}</td> <td>{client.phone}</td> <td> <button className="btn btn-danger">{FaTrash}</button> </td> </tr> ); }