[英]How to unsubscribe in Relay Modern
How do you unsubscribe from a subscription in Relay Modern?您如何取消订阅 Relay Modern 中的订阅?
I have followed the subscription tutorial on How to GraphQL React + Relay but it has no mention on how you unsubscribe either does the Relay Modern website.我遵循了关于如何 GraphQL React + Relay的订阅教程,但它没有提到如何取消订阅 Relay Modern 网站。
Any help would be awesome.任何帮助都是极好的。
UPDATE ----------更新 - - - - -
According to Lee Byron( see GitHub issue ) you just need to call dispose()
on the requestSubscription()
根据 Lee Byron( 参见 GitHub 问题),您只需要在
requestSubscription()
上调用dispose()
requestSubscription()
After making the following modifications to the example:对示例进行以下修改后:
./src/subscriptions/NewVoteSubscription.js (Adding return
to 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 (Setting the subscription on the component and then using componentWillUnmount
to dispose()
it) ./src/components/LinkList.js (在组件上设置订阅,然后使用
componentWillUnmount
来dispose()
它)
componentDidMount() {
this.subscription = NewVoteSubscription()
}
componentWillUnmount() {
this.subscription.dispose()
}
Here is the error I get:这是我得到的错误:
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)
and setup RelayEnvironment并设置 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
};
}
Since relay-modern@6
you need return observable otherwise it will crash due this error: RelayObservable: Unhandled Error TypeError: source.subscribe is not a function
由于
relay-modern@6
你需要返回observable 否则它会因为这个错误而崩溃: RelayObservable: Unhandled Error TypeError: source.subscribe is not a function
instead of代替
return {
dispose: client.unsubscribe
};
you need return你需要回报
return Observable.create(() => {
// return cleanup function
return yourFunctionToCleanUp;
});
where Observable you can import from relay-runtime
.您可以从
relay-runtime
导入 Observable 。
Like:喜欢:
import {
Observable,
} from 'relay-runtime';
so when you will call this.subscription.dispose()
in componentWillUnmount
in reality it will call function yourFunctionToCleanUp()
.所以当你在
componentWillUnmount
中调用this.subscription.dispose()
实际上它会调用函数yourFunctionToCleanUp()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.