graphql-ws subscribeToMore的updateQuery回调未触发排查

使用subscribeToMore实现GraphQL查询结果自动更新时代码无法正常执行，已验证query、mutation、subscribe三类操作均可独立正常运行，判断是subscribeToMore的updateQuery回调未触发，不清楚调试定位方法。

前端代码 #

GraphQL操作定义 #

export const QUERY_MESSAGES = gql`
  query Messages($convoId: ID!) {
    messages(convoId: $convoId) {
      text
      senderId
      convoId
      createdAt
    }
  }
`;

export const SUBSCRIBE_MESSAGES = gql`
  subscription Messages($convoId: ID!) {
    messages(convoID: $convoID) {
      text
      convoId
    }
  }
`;

活跃聊天容器组件 #

const ActiveChat = ({ currentConvo, me }: any) => {
  const { subscribeToMore, data } = useQuery(QUERY_MESSAGES, {
    variables: {
      convoId: currentConvo,
    },
  });


  return (
    <section className="chat-wrapper">

      <div className="messages-container">
        <Messages
          messages={data.messages}
          me={me}
          subscribeToMessages={() => {
            subscribeToMore({
              document: SUBSCRIBE_MESSAGES,
              variables: { convoId: currentConvo },
              updateQuery: (prev, { subscriptionData }) => {
                console.log("hit");
                if (!subscriptionData.data) return prev;
                const newFeedItem = subscriptionData.data.messages;

                return Object.assign({}, prev, {
                  messages: [newFeedItem, ...prev.messages],
                });
              },
            });
          }}
        />
        <Input currentConvo={currentConvo} />
      </div>
    </section>
  );
};

消息列表组件 #

const Messages = ({ messages, me, subscribeToMessages }: any) => {
  useEffect(() => {
    subscribeToMessages();
    console.log("use effect ran");
  });

  const formatTime = (time: number) =>
    new Date(time * 1000).toLocaleTimeString();
  console.log(messages);
  return (
    messages && (
      <div>
        {messages.map((message: any, i: number) => {
          return message.senderId === me?._id ? (
            <SenderBubble
              key={i}
              text={message.text}
              time={message.createdAt}
              formatTime={formatTime}
            />
          ) : (
            <OtherUserBubble
              key={i}
              text={message.text}
              time={message.createdAt}
              formatTime={formatTime}
            />
          );
        })}
      </div>
    )
  );
};

后端代码 #

const pubsub = new PubSub();
  Query: {
 
    messages: async (parent, { convoId }, context) => {
      if (context.user) {
        return Message.find({ convoId }).sort({ createdAt: "asc" });
      }
    },
  },

  Mutation: {

    /// 创建新消息，关联发送者ID并触发MESSAGE_SENT事件
    sendMessage: async (parent, { text, convoId }, context) => {
      pubsub.publish("MESSAGE_SENT", {
        message: { text, convoId },
      });

      return Message.create({ text, convoId, senderId: context.user._id });
    },

   
  },
  Subscription: {
    userActive: {
      subscribe: () => pubsub.asyncIterator("ACTIVE_USERS"),
    },
    message: {
      subscribe: withFilter(
        () => pubsub.asyncIterator("MESSAGE_SENT"),
        (payload, variables) => {
          return payload.message.convoId === variables.convoId;
        }
      ),
    },
  },

已解决：经排查，问题根因为客户端构建时配置的WebSocket服务url与端口号错误，导致ws连接未成功建立。

内容的提问来源于stack exchange，提问作者Blake McCarty