React：如何在同一钩子中获取初始API和增量订阅？

问题描述

我正在尝试使用urql作为graphql客户端来构建聊天应用程序。

1. 最初，所有当前消息都是通过单个graphql查询获取的。这是通过useFetchInitialMessages挂钩完成的。
2. 借助订阅查询，所有增量消息都将附加到消息状态。这是通过useSubscribeMessages挂钩完成的。

是否有一种将它们组合到单个钩子中的方法，该钩子将处理初始消息的加载以及订阅引起的后续更新？

用于获取初始数据的钩子

function useFetchInitialMessages(channelId) {
  const query = `
    query GetMessages($channelId) {
        message(where: {channelId: {_eq: $channelId}}) { 
            id,content
        }
    }
    `;

  const [{ fetching,error,data }] = urql.useQuery({
    query,variables: { channelId: channelId },});
  return { fetching,data };
}

钩子订阅新消息

function useSubscribeMessages(channelId,initialMessages) {
  const query = `subscription NewMessageSubscription($channelId: String!) {
        message(channelId: $channelId) { 
            id,content
        }
    }
    `;
  const handleNewMessage = (messages = initialMessages,response) => {
    return [response.message,...messages];
  };
  const [res] = useSubscription(
    { query: query,variables: { channelId: channelId } },handleSubscription
  );
  return [res];
}

组件

function MessageList(props: Props) {
  const { channel } = props;
  const { fetching,data: initialMessages } = useFetchInitialMessages(
    channel.id
  );
  const [res] = useSubscribeMessages(channel.id,initialMessages);

  if (fetching) {
    return <p>"Loading..."</p>;
  }

  if (!res.data) {
    return (
      <ul>
        {initialMessages.map((message) => {
          <li>message.content</li>;
        })}
      </ul>
    );
  }

  return (
    <ul>
      {res.data.map((message) => {
        <li>message.content</li>;
      })}
    </ul>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）