在重新获取查询之前先取消前一个查询的订阅。可以通过使用带有variables选项的useLazyQuery钩子来解决此问题:
import { useLazyQuery } from '@apollo/client';
const QUERY = YOUR_GRAPHQL_QUERY;
function Component() {
const [getData, { loading, data, error }] = useLazyQuery(QUERY);
const refetchData = () => {
getData({
variables: { yourVariables },
fetchPolicy: 'network-only', // 强制从服务器强制刷新数据
});
};
if (loading) {
return 'Loading...';
}
if (error) {
return `Error! ${error.message}`;
}
return (
<>
{/* 显示数据 */}
>
);
}