React Apollo - 取消订阅查询

Question

我遵循 Apollo 的 documentation 使用 <Query> 组件和 subscribeToMore 函数从我的数据库订阅数据。

我已经设法让一切正常运行，但是即使在查询变量更改后，我仍然遇到从订阅返回数据的问题。

这是我的代码：

ma​​in.js

const DETAILED_CONVERSATION_QUERY = gql`
  query CONVERSATION_QUERY($convoId: ID!){
    detailedConversation(convoId: $convoId) {
      messages(last: 200) {
        text
      }
    }
  }
`;

const DETAILED_CONVERSATION_SUBSCRIPTION = gql`
  subscription($convoId: ID!) {
    detailedConversation(convoId: $convoId) {
      node {
        messages(last: 1) {
          text
        }
      }
    }
  }
`;

<Query
  query={DETAILED_CONVERSATION_QUERY}
  variables={{ convoId: activeConversationId }}
>
{({subscribeToMore, loading, error, data }) => {
  if (loading) return <div className="chat-overlay__convo-details__loading" />
  const { messages, id, users } = data.detailedConversation;                          
  return (
    <Conversation
      id={id}
      subscribeToNewMessages={() => subscribeToMore({
        document: DETAILED_CONVERSATION_SUBSCRIPTION,
        variables: { convoId: activeConversationId },
        updateQuery: (prev, { subscriptionData }) => {
          if (!subscriptionData.data) return prev;
          const newConvoDetails = subscriptionData.data.detailedConversation.node;
          const { messages } = subscriptionData.data.detailedConversation.node;
          const dataToReturn = Object.assign({}, newConvoDetails, {
            messages: [ ...prev.detailedConversation.messages, ...messages]
          })
          return {detailedConversation: { ...dataToReturn }};
        }
      })}
      messages={messages}
      setConversationId={this.setConversationId}
      chatOverlayActive={chatOverlayActive}
    />                            
  )
}}
</Query>  

Conversation.js

class Conversation extends PureComponent {
  componentDidMount() {
    this.props.subscribeToNewMessages();
  }
  render() {
    ...
  }
}

基本上发生的情况是有一个对话 id (activeConversationId)，它指的是我的数据库中它订阅的对话。当用户选择不同的对话时，activeConversationId 会发生变化，并且对话组件会再次与新对话一起安装。

我的问题是，一旦我启动某个对话然后切换到另一个对话，它似乎并没有取消订阅前一个对话。我的理解是，当<Query> 组件中的变量发生变化时，它会自动取消我之前的订阅。

Apollo 文档很好，但在涉及如何处理取消订阅时有点模糊，所以如果其他可能遇到相同问题的人能提供一些启示，那就太好了。

谢谢

Answer 1

对我来说，通过再次完全重新渲染<Query> 组件解决了这个问题。它似乎并没有通过更改查询中的变量来取消订阅。