Relay에서 탈퇴하는 방법

Question

Relay Modern에서 구독을 어떻게 취소 하시겠습니까?

나는 How to GraphQL React + Relay에 관한 구독 튜토리얼을 따랐지만 Relay Modern 웹 사이트에서 탈퇴하는 방법에 대해서는 언급하지 않았다.

도움이 될 것입니다. 리 바이런 (see GitHub issue)에 따르면

UPDATE ----------

당신은 단지 예에 다음 수정을 한 후 requestSubscription()

에 dispose() 를 호출해야합니다

./src/subscriptions/NewVoteSubscription.js

( return requestSubscription에 추가)

./src/components/LinkList.js는 (구성 요소에 가입을 설정 한 후 componentWillUnmount 그것을 dispose()에 사용) 여기

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) 

Answer 1

및 설치 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 
    }; 
}