Unsubscribe subscription in Apollo Client

Question

In my component, I have this code:

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,
              ],
            },
          },
        })
      }
    },
  })
}

The problem is that this component will re-subscribe when mounted and will mantain subscribed even if unmounted.

How can I unsubscribe my component?

score 19 · Accepted Answer · answered Jul 23 '18 at 15:19

19

client.subscribe({ ... }).subscribe({ ... }) will return an instance for your subscription, that you can use to unsubscribe.

So something like:

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

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

You can get some inspiration by looking at how react-apollo manages this situation looking at their code base.

NOTE: My best advice would be to use Subscription component, that will manage everything for you.

answered Jul 23 '18 at 15:19

Pedro Baptista Afonso

1,158
2
10
18

I have already tried this but it didn't work. I ended up using `subscribeToMore` which does exactly what I want and it works great. Thanks – V0iDiFiER Jul 25 '18 at 13:43
2

Unfortunately, Subscription component also need some unsubscribe action when using onSubscriptionData callback – Vladislav Sorokin Jun 13 '19 at 18:25
@VladislavSorokin Can you share how you unsubscribed from subscribeToMore? – TheoG Jul 27 '19 at 19:24
@TheoG I didn't actually, first of all subscribeToMore in my case not updated cache at all, so I kind of struggle with it now. Answering your question they say that "This function returns an unsubscribe function handler which can be used to unsubscribe later." although I don't know how to implement it, sorry https://www.apollographql.com/docs/react/api/react-apollo/#datasubscribetomoreoptions – Vladislav Sorokin Jul 28 '19 at 14:40
@TheoG here are other guys said that subscribeToMore is somehow unsubscribed automatically, hope it helps https://github.com/bmsantos/apollo-graphql-subscriptions-example/issues/8 – Vladislav Sorokin Jul 28 '19 at 16:44
btw subscribeToMore has indeed updated cache in my case, but it was the Query component who didn't rerender after update, so I managed to fix it with refetch. Quite hacky but works! @TheoG – Vladislav Sorokin Jul 30 '19 at 15:31
@VladislavSorokin How are you making the refetch work, as placing it after a return object in subscribetoMore will never be reached? – TheoG Jul 30 '19 at 20:23
@VladislavSorokin I actually resolved the rerender issue by changing the queries fetchPolicy to "cache-and-network". – TheoG Jul 31 '19 at 09:01

Unsubscribe subscription in Apollo Client

1 Answers1