2017-09-06 53 views
1

如何取消訂閱接力現代訂閱?如何取消訂閱接力現代

我已經按照How to GraphQL React + Relay上的訂閱教程,但它沒有提及如何取消訂閱或者是否使用Relay Modern網站。

任何幫助都會很棒。

UPDATE ----------

據李拜倫(see GitHub issue),你只需要調用dispose()requestSubscription()

作出以下修改後,例如:

./src/subscriptions/NewVoteSubscription.js(添加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(設置組件的訂閱,然後使用componentWillUnmountdispose()吧)

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

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

以下是錯誤我得到:

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) 

回答

3

and setup 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 
    }; 
}