React Apollo - отписаться от запросов - PullRequest
Новая
       12

React Apollo - отписаться от запросов

0 голосов
/ 18 февраля 2019

Я следую документации Аполлона по подписке на данные из моей базы данных с использованием компонента <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() {
    ...
  }
}

Что в основном происходит, так это наличие идентификатора разговора (activeConversationId) это относится к разговору в моей базе данных, на который он подписывается.Когда пользователь выбирает другой диалог, activeConversationId изменяется, и компонент Разговор снова монтируется с новым диалогом.

Моя проблема в том, что когда я монтирую определенный разговор, а затем переключаюсь на другой, он, похоже, не отписывается от предыдущего.Насколько я понимаю, при изменении переменных в компоненте <Query> он автоматически отписывается от моей предыдущей подписки.

Документы Apollo хороши, но немного расплывчаты, когда речь заходит о том, как обрабатывать отписки, поэтому было бы замечательно, если бы кто-то другой, у кого была такая же проблема, мог бы пролить немного света.

Спасибо

1 Ответ

0 голосов
/ 19 февраля 2019

Для меня проблема была решена путем повторного рендеринга компонента <Query> снова.Кажется, он не отписывается, просто меняя переменные в запросе.

...