javascript - 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发生变化，Conversation 组件会随着新对话再次安装。

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

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

谢谢

Answer 1

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