React Apollo - 取消订阅查询

Posted 2023-03-10

【中文标题】React Apollo - 取消订阅查询

【英文标题】：React Apollo - Unsubscribing from queries

【发布时间】：2019-07-11 13:46:30

【问题描述】：

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

谢谢

【参考方案1】：

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

【讨论】：

不会改变查询的变量，还是触发重新渲染？

我也面临同样的问题，如何再次重新渲染 组件？