Estoy tratando de obtener datos de graphQL, y sé que al poner la función en el UseEffect() de reacción, podría llamar a la función una vez que los datos se actualicen y construyan. Sin embargo, estoy trabajando en una sala de chat y los datos no aparecen en la pantalla:

 import { CREATE_MESSAGE_MUTATION, MESSAGES_QUERY, MESSAGE_SUBSCRIPTION, } from "../graphql"; import { useQuery, useSubscription } from "@apollo/client"; import React, { useEffect } from "react"; import { Tag } from "antd"; const ChatBox = ({ me, friend, ...props }) => { //me friend are strings const chatBoxName = [me, friend].sort().join("_"); const { loading, error, data, subscribeToMore } = useQuery(MESSAGES_QUERY, { variables: { name: chatBoxName }, }); useEffect(() => { try { subscribeToMore({ document: MESSAGE_SUBSCRIPTION, variables: { name: chatBoxName }, updateQuery: (prev, { subscriptionData }) => { if (!subscriptionData.data) return prev; const newMessage = subscriptionData.data; console.log("Subscribing more data: ", newMessage); }, }); } catch (e) { console.log("Error in subscription:", e); } }, [subscribeToMore]); if (loading) return <p>loading ...</p>; if (error) return <p>Error in frontend chatbox: {error}</p>; return ( <div className="App-messages"> {console.log(data.chatboxs[0].messages)} {data.chatboxs[0].messages.map(({ sender: { name }, body }) => { <p className="App-message"> <Tag color="blue">{name}</Tag> {body} </p>; })} </div> ); }; export default ChatBox;

Después de un pequeño retraso en loading ... , se convierte en <div className="App-messages"> sin mensajes dentro. Sin embargo, en la consola puedo ver claramente los mensajes que quiero imprimir. ¿Cuál es el problema de la función en UseEffect() ? Sería muy apreciado si alguien puede ayudar.