“subscribeToMore”Apollo 客户端订阅行为怪异答案

【问题标题】："subscribeToMore" Apollo Client Subscriptions behaving weirdly“subscribeToMore”Apollo 客户端订阅行为怪异
【发布时间】：2020-11-20 02:00:04
【问题描述】：

我正在为现场讨论创建一个面板，我在 useEffect 中使用了 susbcribeToMore。我也在一个 chaat companent 中使用了相同的逻辑，它与这里不同的是它按预期工作。这是我的代码：

useEffect(() => {
    const unsubscribe = subscribeToMore({
      document: DISCUSSION_SUBSCRIPTION,
      variables: { authUserId: props.userId, groupId: props.groupId },
      updateQuery: (prev, { subscriptionData }) => {
        if (!subscriptionData) return prev;
        const newDiscussion = subscriptionData.data.DiscussionCreated;
        console.log(newDiscussion);
        console.log(prev);
        const mergedDiscussion = [...prev.getDiscussions, newDiscussion];

        console.log(mergedDiscussion);
        return { getDiscussions: mergedDiscussion };
      },
    });

    return () => {
      unsubscribe();
    };
  }, [props.groupId, props.userId, subscribeToMore]);

当发件人 X 向发件人 Y 发送讨论消息时，发件人 X 可以看到他的 UI 更新与新消息。在发件人 Y 的控制台中，由于控制台日志，我能够看到 newDiscussion 和 prev，但发件人 Y 的 UI 没有更新。然而，这仅适用于第一条消息。当发件人 X 发送另一条消息时，“prev”的控制台日志显示未定义。而且我也收到此错误：

TypeError: Cannot read property 'getDiscussions' of undefined
    at updateQuery (NewDiscussionPanel.js:126)
    at bundle.esm.js:337
    at bundle.esm.js:409
    at tryFunctionOrLogError (bundle.esm.js:931)
    at ObservableQuery.updateQuery (bundle.esm.js:408)
    at Object.next (bundle.esm.js:335)
    at notifySubscription (Observable.js:151)
    at onNotify (Observable.js:195)
    at SubscriptionObserver.next (Observable.js:247)
    at Object.next (Observable.js:337)
    at notifySubscription (Observable.js:151)
    at onNotify (Observable.js:195)
    at SubscriptionObserver.next (Observable.js:247)
    at bundle.esm.js:1086
    at Set.forEach (<anonymous>)
    at Object.next (bundle.esm.js:1085)
    at notifySubscription (Observable.js:151)
    at onNotify (Observable.js:195)
    at SubscriptionObserver.next (Observable.js:247)
    at Object.next (bundle.esm.js:32)
    at notifySubscription (Observable.js:151)
    at onNotify (Observable.js:195)
    at SubscriptionObserver.next (Observable.js:247)
    at Object.handler (client.js:298)
    at SubscriptionClient.processReceivedData (client.js:755)
    at WebSocket.client.onmessage (client.js:701)```

显然，用户 Y 的 UI 在第二条消息之后仍然没有更新。它仍然为用户 X 更新。后端已经过测试并且工作正常，所以这绝对是前端的错误。如果有人可以帮助我，那就太好了。提前致谢！

编辑 1：用户 X 可以看到消息的原因可能是他们发送消息后 UI 更新导致重新渲染。如果我刷新页面，那么两个用户都可以看到所有消息。

【问题讨论】：

标签： reactjs graphql apollo react-apollo apollo-client

【解决方案1】：

我认为你应该使用Object.assign({}, prev, { getDiscussions: mergedDiscussion }) 而不是{ getDiscussions: mergedDiscussion }。

【讨论】：