Question

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

我设法使一切正常运行，但是即使查询变量发生更改，我也仍然无法从订阅返回数据。

这是我的代码：

main.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>组件来解决。它似乎不是仅通过更改查询中的变量来取消订阅。

React Apollo-取消订阅查询

1 个答案: