Comment se désinscrire dans Relay Modern

Question

Comment se désinscrire d'un abonnement à Relay Modern?

J'ai suivi le tutoriel d'abonnement sur How to GraphQL React + Relay mais il n'y a aucune mention sur la façon dont vous vous désinscrivez soit le site Web Relay Modern.

Toute aide serait géniale.

MISE À JOUR ----------

Selon Lee Byron (see GitHub issue) il vous suffit d'appeler dispose() sur le requestSubscription()

Après avoir effectué les modifications suivantes à l'exemple:

./src/subscriptions/NewVoteSubscription.js (Ajout de return à requestSubscription)

export default() => { 
    const subscriptionConfig = { 
    subscription: newVoteSubscription, 
    variables: {}, 
    updater: proxyStore => { 
     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 => console.log(`An error occured:`, error) 
    } 

    return requestSubscription(
     environment, 
     subscriptionConfig 
) 

./src/components/LinkList.js (Réglage de l'abonnement sur le composant, puis en utilisant componentWillUnmount-dispose() il)

componentDidMount() { 
    this.subscription = NewVoteSubscription() 
} 

componentWillUnmount() { 
    this.subscription.dispose() 
} 

Voici l'erreur que je reçois:

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) 

Answer 1

et configuration RelayEnvironment

function setupSubscription(config, variables, cacheConfig, observer) { 
    const query = config.text; 

    const subscriptionClient = new SubscriptionClient(websocketURL, { 
    reconnect: true 
    }); 

    const client = subscriptionClient.request({ query, variables }).subscribe({ 
    next: result => { 
     observer.onNext({ data: result.data }); 
    }, 
    complete:() => { 
     observer.onCompleted(); 
    }, 
    error: error => { 
     observer.onError(error); 
    } 
    }); 

    return { 
    dispose: client.unsubscribe 
    }; 
}