title: How to unsubscribe in Relay Modern
body: <p>How do you unsubscribe from a subscription in Relay Modern?</p>
  
  <p>I have followed the subscription tutorial on <a href="https://www.howtographql.com/react-relay/7-subscriptions/" rel="nofollow noreferrer">How to GraphQL React + Relay</a> but it has no mention on how you unsubscribe either does the Relay Modern website.</p>
  
  <p>Any help would be awesome.</p>
  
  <p>UPDATE ----------</p>
  
  <p>According to Lee Byron(<a href="https://github.com/facebook/relay/issues/2082#issuecomment-328608144" rel="nofollow noreferrer">see GitHub issue</a>) you just need to call <code>dispose()</code>
  on the <code>requestSubscription()</code></p>
  
  <p>After making the following modifications to the example:</p>
  
  <p><em>./src/subscriptions/NewVoteSubscription.js</em> (Adding <code>return</code> to requestSubscription)</p>
  
  <pre><code>export default () =&gt; {
      const subscriptionConfig = {
      subscription: newVoteSubscription,
      variables: {},
      updater: proxyStore =&gt; {
          const createVoteField = proxyStore.getRootField('Vote')
          const newVote = createVoteField.getLinkedRecord('node')
          const updatedLink = newVote.getLinkedRecord('link')
          const linkId = updatedLink.getValue('id')
          const newVotes = updatedLink.getLinkedRecord('_votesMeta')
          const newVoteCount = newVotes.getValue('count')
  
          const link = proxyStore.get(linkId)
          link.getLinkedRecord('votes').setValue(newVoteCount, 'count')
      },
      onError: error =&gt; console.log(`An error occured:`, error)
    }
  
    return requestSubscription(
        environment,
        subscriptionConfig
    )
  </code></pre>
  
  <p><em>./src/components/LinkList.js</em> (Setting the subscription on the component and then using <code>componentWillUnmount</code> to <code>dispose()</code> it)</p>
  
  <pre><code>componentDidMount() {
      this.subscription = NewVoteSubscription()
  }
  
  componentWillUnmount() {
      this.subscription.dispose()
  }
  </code></pre>
  
  <p>Here is the error I get:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'dispose' of undefined
      at RelayObservable.js:94
      at doCleanup (RelayObservable.js:453)
      at Object.unsubscribe (RelayObservable.js:474)
      at RelayObservable.js:330
      at doCleanup (RelayObservable.js:453)
      at Object.unsubscribe (RelayObservable.js:474)
      at doCleanup (RelayObservable.js:450)
      at Object.unsubscribe [as dispose] (RelayObservable.js:474)
      at LinkList.componentWillUnmount (LinkList.js:18)
      at callComponentWillUnmountWithTimerInDev (react-dom.development.js:11123)
      at HTMLUnknownElement.callCallback (react-dom.development.js:1309)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:1348)
      at invokeGuardedCallback (react-dom.development.js:1205)
      at safelyCallComponentWillUnmount (react-dom.development.js:11131)
      at commitUnmount (react-dom.development.js:11421)
      at unmountHostComponents (react-dom.development.js:11362)
      at commitDeletion (react-dom.development.js:11392)
      at commitAllHostEffects (react-dom.development.js:12279)
      at HTMLUnknownElement.callCallback (react-dom.development.js:1309)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:1348)
      at invokeGuardedCallback (react-dom.development.js:1205)
      at commitAllWork (react-dom.development.js:12384)
      at workLoop (react-dom.development.js:12695)
      at HTMLUnknownElement.callCallback (react-dom.development.js:1309)
      at Object.invokeGuardedCallbackDev (react-dom.development.js:1348)
      at invokeGuardedCallback (react-dom.development.js:1205)
      at performWork (react-dom.development.js:12808)
      at batchedUpdates (react-dom.development.js:13262)
      at performFiberBatchedUpdates (react-dom.development.js:1656)
      at stackBatchedUpdates (react-dom.development.js:1647)
      at batchedUpdates (react-dom.development.js:1661)
      at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] (react-dom.development.js:1674)
      at dispatchEvent (react-dom.development.js:1884)
  </code></pre>