React Apollo Client 使用useSubscription钩子如何向订阅服务端取消订阅

• 自动取消：useSubscription 默认内置组件卸载时自动取消订阅的逻辑，如果你仅需要在用户离开当前页、组件销毁时断开订阅，无需编写额外代码。
• 条件触发手动取消（推荐方案）：通过状态控制skip参数即可实现启停，skip设为true时Apollo会自动断开当前订阅：

const [enableSub, setEnableSub] = useState(true);
const { data, loading } = useSubscription(COMMENTS_SUBSCRIPTION, {
  variables: { uuid },
  skip: !enableSub
});

// 要取消订阅时调用即可
// setEnableSub(false)

• 直接调用底层取消方法：@apollo/client v3 及以上版本的useSubscription返回值自带unsubscribe方法，调用后可立即取消订阅且不会自动重连：

const { data, loading, unsubscribe } = useSubscription(COMMENTS_SUBSCRIPTION, {
  variables: { uuid },
});

// 需要取消时直接执行
// unsubscribe()

补充说明：如果订阅变量uuid会动态更新，useSubscription会自动取消旧变量对应的订阅、发起匹配新变量的新订阅，无需额外手动处理。

内容的提问来源于stack exchange，提问作者Batuhan Isildak