Apollo Client v3轮询时如何捕获每次请求的loading状态？

问题详情 #

使用@apollo/client v3配置轮询后，发现useQuery返回的loading状态仅在首次请求时触发变化，后续每10秒的轮询请求虽在网络面板可见，但loading不会更新，导致监听loading的useEffect无法捕获每次轮询的状态。

相关代码：
查询代码（原代码漏写pollInterval键名，已修正）：

const { data, loading } = useQuery(SOME_QUERY, {
  variables: {
    variable: "value",
  },
  pollInterval: 10000  // 轮询间隔
});

监听代码：

useEffect(() => {
  console.log(loading)
}, [loading]);

解决方案 #

1. 开启notifyOnNetworkStatusChange选项 #

Apollo Client默认不会为轮询请求触发loading状态更新，添加notifyOnNetworkStatusChange: true配置后，每次轮询发起和完成时，loading都会对应切换true/false，从而触发useEffect监听：

const { data, loading } = useQuery(SOME_QUERY, {
  variables: {
    variable: "value",
  },
  pollInterval: 10000,
  notifyOnNetworkStatusChange: true
});

useEffect(() => {
  console.log('当前loading状态:', loading);
}, [loading]);

2. 利用networkStatus精准区分轮询状态 #

如果需要更精细的状态判断（比如区分首次加载和轮询），可以使用useQuery返回的networkStatus字段，配合NetworkStatus枚举：
首先导入枚举：

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

然后修改代码：

const { data, loading, networkStatus } = useQuery(SOME_QUERY, {
  variables: {
    variable: "value",
  },
  pollInterval: 10000,
  notifyOnNetworkStatusChange: true
});

useEffect(() => {
  if (networkStatus === NetworkStatus.polling) {
    console.log('轮询请求正在进行');
  } else if (loading) {
    console.log('首次加载或非轮询请求加载中');
  }
}, [loading, networkStatus]);

NetworkStatus.polling会在轮询发起时触发，能精准识别轮询的启动状态。

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