使用 abortcontroller 实例的 signal 属性传递给 apollo client 的 fetchoptions，即可在调用 controller.abort() 时立即取消 graphql 订阅请求。
Apollo Client 如何接收并处理信号
Apollo Client 3.x 版本支持通过 options 对象传递 fetchOptions，其中的 signal 会被直接传给底层的 fetch 或 WebSocket 实现。当订阅建立后，如果控制器被中止，客户端会触发错误回调并关闭连接。
import { ApolloClient, InMemoryCache, gql, createHttpLink } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';
import { split } from '@apollo/client/link';
import { getMainDefinition } from '@apollo/client/utilities';
const httpLink = new createHttpLink({
uri: 'http://localhost:4000/subscriptions'
});
const wsLink = new WebSocketLink({
uri: 'ws://localhost:4000/subscriptions',
options: {
reconnect: true
}
});
const link = split(
({ query }) => {
const definition = getMainDefinition(query);
return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
},
wsLink,
httpLink
);
const client = new ApolloClient({
link,
cache: new InMemoryCache()
});
// 创建控制器
const controller = new AbortController();
// 执行订阅
client.subscribe({
query: gql`
subscription OnMessage {
messageCreated {
id
content
}
}
`,
variables: {},
fetchOptions: {
signal: controller.signal // 将信号传递给订阅
}
}).subscribe({
next: console.log,
error: (err) => {
if (err.name === 'AbortError') {
console.log('Subscription cancelled');
} else {
console.error(err);
}
}
});
// 需要取消时调用
controller.abort();
上述代码展示了完整的 Apollo Client 配置和订阅过程。通过 fetchOptions 传入 signal，可以在任何时刻通过 controller.abort() 终止正在进行的订阅请求。错误处理中检查 err.name 是否为 AbortError 可以区分正常取消和其他网络错误。
立即学习“Java免费学习笔记（深入）”；
React Hook 中的取消策略
在 React 组件中使用 useSubscription hook 时，可以通过 useEffect 的清理函数来自动管理信号的销毁。这样在组件卸载或依赖项变化时，订阅会自动取消，避免内存泄漏。
import { useSubscription, gql } from '@apollo/client';
import { useEffect, useRef } from 'react';
const MESSAGE_SUBSCRIPTION = gql`
subscription OnMessage {
messageCreated {
id
content
}
}
`;
function MessageList() {
const controllerRef = useRef(new AbortController());
const { data, loading, error } = useSubscription(MESSAGE_SUBSCRIPTION, {
variables: {},
fetchOptions: {
signal: controllerRef.current.signal
}
});
useEffect(() => {
// 组件卸载时取消订阅
return () => {
controllerRef.current.abort();
};
}, []);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<ul>
{data?.messageCreated.map(msg => (
<li key={msg.id}>{msg.content}</li>
))}
</ul>
);
}
这个 React 组件示例展示了如何在类组件之外使用 Hooks 模式管理订阅生命周期。useRef 保存控制器实例，确保在重新渲染时不会创建新的控制器。useEffect 的清理函数在组件卸载时调用 abort，保证资源正确释放。这种模式特别适合需要动态控制订阅生命周期的场景。
基于特定输入条件的取消行为
当订阅查询包含变量参数时，不同的输入条件会导致不同的取消行为。例如，当用户切换搜索关键词时，旧的订阅应该被取消以避免数据混乱。
import { useState, useEffect, useRef } from 'react';
import { useSubscription, gql } from '@apollo/client';
const SEARCH_SUBSCRIPTION = gql`
subscription SearchResults($keyword: String!) {
searchResults(keyword: $keyword) {
id
title
}
}
`;
function SearchComponent() {
const [keyword, setKeyword] = useState('');
const controllerRef = useRef(new AbortController());
const { data, loading, error } = useSubscription(SEARCH_SUBSCRIPTION, {
variables: { keyword },
fetchOptions: {
signal: controllerRef.current.signal
},
skip: !keyword // 没有关键词时跳过订阅
});
useEffect(() => {
// 关键词变化时重置控制器
controllerRef.current.abort();
controllerRef.current = new AbortController();
}, [keyword]);
return (
<div>
<input
value={keyword}
onChange={e => setKeyword(e.target.value)}
/>
{loading && <p>Searching...</p>}
{error && <p>Error: {error.message}</p>}
<ul>
{data?.searchResults.map(item => (
<li key={item.id}>{item.title}</li>
))}
</ul>
</div>
);
}
此示例展示了基于关键词变化的取消逻辑。当用户输入新的搜索词时，先中止当前的订阅控制器，然后创建新的控制器实例。skip 选项确保在没有关键词时不发起订阅请求。这种模式可以有效防止旧数据污染新搜索结果，同时避免不必要的网络请求。
