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

【问题标题】：HowTo: Unsubscribe from Apollo (subscribeToMore) subscription?如何：取消订阅 Apollo (subscribeToMore) 订阅？
【发布时间】：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]);
  ...
  }
...
}

我该怎么做？

【问题讨论】：

标签： reactjs apollo react-apollo apollo-client

【解决方案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]);

【讨论】：