如何在用户离开组件时取消/终止useLazyQuery请求？

使用useLazyQuery时，你可以从该Hook返回的第二个对象中解构出cancel方法，用它来终止正在进行的请求。

修改你的代码如下：

import { useLazyQuery } from '@apollo/client';

const [getPosts, { cancel }] = useLazyQuery(GET_POSTS);

useEffect(() => {
  const fetchPosts = async () => {
    await getPosts();
  };

  fetchPosts();

  return () => {
    // 组件卸载时调用cancel终止请求
    cancel();
  };
}, []);

补充说明： #

• cancel是Apollo Client内置的方法，调用后会直接终止当前处于pending状态的GraphQL请求，避免组件卸载后请求完成触发状态更新，进而引发内存泄漏或控制台错误。
• 即便你的getPosts调用传入了变量参数，cancel也能自动匹配当前该useLazyQuery实例发起的请求，无需额外传参。

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