web-dev-qa-db-ja.com

Apollo Clientでサブスクリプションを解除する

私のコンポーネントには、次のコードがあります。

componentDidMount () {
  // Setup subscription listener
  const { client, match: { params: { groupId } } } = this.props
  client.subscribe({
    query: HOMEWORK_IN_GROUP_SUBSCRIPTION,
    variables: { groupId },
  }).subscribe({
    next ({ data }) {
      const cacheData = client.cache.readQuery({
        query: GET_GROUP_QUERY,
        variables: { groupId },
      })

      const homeworkAlreadyExists = cacheData.group.homeworks.find(
        homework => homework._id == data.homeworkInGroup._id
      )
      if (!homeworkAlreadyExists) {
        client.cache.writeQuery({
          query: GET_GROUP_QUERY,
          variables: { groupId },
          data: { ...cacheData,
            group: { ...cacheData.group,
              homeworks: [ ...cacheData.group.homeworks,
                data.homeworkInGroup,
              ],
            },
          },
        })
      }
    },
  })
}

問題は、このコンポーネントがマウントされると再サブスクライブされ、アンマウントされてもサブスクライブされることです。

コンポーネントのサブスクリプションを解除するにはどうすればよいですか？

javascriptreactjsapolloreact-apolloapollo-client
9
V0iDiFiER

client.subscribe({ ... }).subscribe({ ... })は、サブスクリプションのインスタンスを返します。これを使用して、サブスクリプションを解除できます。

のようなもの：

componentDidMount () {
  // Setup subscription listener
  // (...)
  this.querySubscription = client.subscribe({
    // (...)
  }).subscribe({
    // (...)
  })
}

componentWillUnmount () {
  // Unsibscribe subscription
  this.querySubscription.unsubscribe();
}

React-apollo この状況を管理する コードベースを見ると、インスピレーションを得ることができます。

注：私の最善のアドバイスは、すべてを管理する Subscription コンポーネントを使用することです。

6
Pedro Baptista Afonso