使用 React UseEffect() 從 GraphQL 獲取數據

Question

我正在嘗試從 graphQL 中獲取數據，並且我知道通過將 function 放入 react UseEffect()中，我將能夠調用 ZC1C425268E68385D1AB5074C17A94 並更新數據。 但是，我正在使用聊天室，並且數據沒有出現在屏幕上：

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;

在loading...的一小段延遲后，它轉到<div className="App-messages">里面沒有消息。 但是，在控制台上，我可以清楚地看到要打印的消息。 UseEffect()中的 function 有什么問題？ 如果有人可以提供幫助，我將不勝感激。

Answer 1

{data.chatboxs[0].messages.map(({ sender: { name }, body }) => { // <- this part
    <p className="App-message">
      <Tag color="blue">{name}</Tag>
      {body}
    </p>;
  })}

作為回調，您聲明了一個不返回 JSX 元素的 function。

換成這個

{data.chatboxs[0].messages.map(({ sender: { name }, body }) => (
    <p className="App-message">
      <Tag color="blue">{name}</Tag>
      {body}
    </p>;
  ))}