如何：取消订阅 Apollo (subscribeToMore) 订阅？

Posted 2023-03-10

【中文标题】如何：取消订阅 Apollo (subscribeToMore) 订阅？

【英文标题】：HowTo: Unsubscribe from Apollo (subscribeToMore) subscription?

【发布时间】：2019-12-05 16:50:27

【问题描述】：

所以我有一个订阅如下，我希望取消订阅清理：

              <DeleteItem 
                id=item.id
                urlReferer=urlReferer
                subscribeToDeleteItems=() =>
                  subscribeToMore(
                    ....
                    
                  )
                
              >Delete This Item</DeleteItem>

删除项目.js

const DeleteItem = props => 
  const urlReferer = props;

  useEffect(() => 
    props.subscribeToDeleteItems();
  ,[urlReferer]);
  ...
  
...

我该怎么做？

【参考方案1】：

所以我通过调用 abortController 实现了清理：

  useEffect(() => 
    const abortController = new AbortController();
    props.subscribeToDeleteItems();
    return () => 
      abortController.abort();
    ;
  ,[urlReferer]);

【参考方案2】：

如果你的效果返回一个函数，React 会在需要清理的时候运行它。 SubscribeToMore 返回取消订阅函数。

const subscribeToNewComments = () =>
    subscribeToMore(
      document: MESSAGES_SUBSCRIPTION,
      variables:  channelId ,
      updateQuery: (prev,  subscriptionData ) => 
        if (!subscriptionData) return prev;
        return Object.assign(, prev, 
          channelMessages: [
            subscriptionData.data.messageAdded,
            ...prev.channelMessages,
          ],
        );
      ,
    );   

React.useEffect(() => 
        let unsub = subscribeToNewComments();
        return () => 
          unsub();
        ;
      , [channelId]);