Apollo refetch网络恢复后无法发起请求问题排查

我之前在React Native + Apollo的项目里也碰到过类似的诡异问题，结合你的场景，给你几个针对性的排查和解决思路：

1. 先搞定Apollo Client的缓存与请求策略 #

虽然你提到已经处理了错误清除，但Apollo的refetch有时候会被缓存里的错误状态“绊住”，尤其是当错误被存在ROOT_QUERY的缓存节点中时。可以试试这两个操作：

• 手动清除对应查询的错误缓存：在触发refetch前，主动清空目标查询的错误上下文：

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

const client = useApolloClient();

// 替换成你的实际查询字段名，比如getAppConfig之类的
client.cache.modify({
  fields: {
    yourQueryFieldName: (existing) => {
      if (existing?.__typename) {
        return { ...existing, error: undefined };
      }
      return existing;
    },
  },
});

• 强制走网络请求：默认的fetchPolicy可能会优先读缓存，在refetch时显式指定network-only，确保每次轮询都真的发请求：

await refetch({ fetchPolicy: 'network-only' });

2. 排查React Native的网络状态与轮询时机 #

React Native的网络切换（从无到有）有时候不会立刻同步到JS线程，你的useInterval可能在网络栈还没准备好的时候就触发了请求，导致依然报错：

• 结合NetInfo做精准触发：用@react-native-community/netinfo监听网络状态，只有确认网络真的恢复了，再启动轮询：

import NetInfo from '@react-native-community/netinfo';

useEffect(() => {
  const unsubscribe = NetInfo.addEventListener(state => {
    if (state.isConnected && state.isInternetReachable) {
      // 双重确认网络可用，再启动轮询
      startPolling();
    } else {
      stopPolling();
    }
  });

  return unsubscribe;
}, []);

• 给refetch加防抖/请求等待：如果轮询间隔太短，前一次错误请求的Promise还没resolve就触发下一次，会导致错误被重复抛出。可以给handleRefetch加防抖，或者确保上一次请求完成后再触发下一次轮询。

3. 检查自定义Hook的状态管理逻辑 #

你用ref保存错误状态的思路没问题，但要确保网络恢复后状态被正确重置：

const errorRef = useRef(null);

const handleRefetch = async () => {
  try {
    await refetch({ fetchPolicy: 'network-only' });
    // 请求成功后立刻清空错误状态
    errorRef.current = null;
    setShowModal(false);
    stopPolling();
  } catch (err) {
    errorRef.current = err;
  }
};

另外，检查模态框的渲染是否依赖了ref的状态——如果模态框用useState控制显示，但错误状态存在ref里，可能会出现状态不同步的情况。

4. 对比Expo示例与原应用的环境差异 #

既然示例没问题，那问题大概率出在原应用的环境差异上：

• 检查Apollo Client版本：原应用和示例的@apollo/client、apollo-cache-inmemory版本是否一致？不同版本的错误处理逻辑可能有差异。
• 检查React Native版本：某些旧版本的RN在网络切换后会存在请求挂起的bug，尝试升级到稳定版试试。
• 排查第三方依赖：原应用是否有网络拦截类的依赖（比如Flipper、自定义的网络拦截器）？这些可能会干扰Apollo的请求发送。

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