React+TypeScript中使用urql实现GraphQL定时自动重查

方法一：结合React useEffect手动触发refetch #

urql的useQuery钩子会返回refetch函数，我们可以通过React的useEffect创建定时器，每隔指定时间调用一次refetch来实现自动重查，同时注意清理定时器避免内存泄漏。

示例代码：

import { useEffect } from 'react';
import { useObjectIdQuery } from './generated/graphql'; // 替换为你的查询生成文件路径

type ObjectComponentProps = {
  id: number;
};

export default function ObjectComponent({ id }: ObjectComponentProps) {
  const [{ data }, refetch] = useObjectIdQuery({ 
    variables: { id }, 
    pause: !id 
  });

  useEffect(() => {
    // 当id不存在时，不启动定时器
    if (!id) return;

    // 每5秒执行一次重查，可修改为你需要的毫秒数（n秒 = n*1000）
    const intervalId = setInterval(() => {
      refetch();
    }, 5000);

    // 组件卸载或id变更时清理定时器
    return () => clearInterval(intervalId);
  }, [id, refetch]);

  return (
    <div>
      {data?.object ? (
        <>
          <p>ID: {data.object.id}</p>
          <p>名称: {data.object.name}</p>
        </>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

方法二：强制从服务器获取最新数据 #

如果需要跳过缓存，确保每次重查都拉取服务器最新数据，可以在调用refetch时指定requestPolicy为network-only：

// 修改定时器内的refetch调用
refetch({ requestPolicy: 'network-only' });

额外说明 #

• 当pause为true（即!id）时，定时器不会启动，避免无效请求
• 务必在组件卸载或依赖项变更时清理定时器，防止内存泄漏
• 如果你的后端支持GraphQL订阅，使用订阅替代轮询会更高效，但需要后端配合实现对应的订阅机制

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