Chrome后台打开标签页时Apollo GraphQL权限查询无返回问题求助

问题根因 #

• Chrome对非激活的后台标签页有默认的性能节流策略：会降低非关键异步任务的调度优先级，暂停或延迟部分低优先级任务的执行，同时限制定时器、微任务队列的处理速率，减少后台页面的资源占用。
• 你当前的GET_PERMISSIONS_ASYNC查询使用默认的cache-first fetch策略，触发时机是第一个GET_INITIAL_DATA查询加载完成后skip: loading变为false。如果此时标签页处于后台，Apollo Client的查询调度、响应解析、缓存更新任务会被浏览器判定为低优先级任务被挂起，就会出现permissionsLoading一直为true、permissionsData始终不更新的情况。
• network-only能生效的原因是该策略会强制跳过缓存逻辑，直接发起高优先级的网络请求，浏览器不会将主动发起的网络请求判定为低优先级任务，所以可以正常拿到结果。

不需要设置network-only的解决方案 #

方案1：调整fetchPolicy为cache-and-network #

该策略会优先返回缓存中的可用数据（满足你降低查询开销、复用缓存的需求），同时发起网络请求更新缓存，主动发起的网络请求不会被浏览器后台节流挂起，配置示例：

const { loading: permissionsLoading, data: permissionsData } = useQuery(
  GET_PERMISSIONS_ASYNC,
  {
    skip: loading,
    fetchPolicy: 'cache-and-network'
  }
);

方案2：监听页面可见性变化，激活时重取查询 #

监听标签页的激活状态，当用户从后台切换到当前标签页时，手动触发权限查询的重取逻辑，完全不影响原有缓存复用逻辑，代码示例：

const { loading: permissionsLoading, data: permissionsData, refetch: refetchPermissions } = useQuery(
  GET_PERMISSIONS_ASYNC,
  {
    skip: loading
  }
);

useEffect(() => {
  const handleVisibilityChange = () => {
    if (document.visibilityState === 'visible' && !permissionsData && !loading) {
      refetchPermissions();
    }
  };
  document.addEventListener('visibilitychange', handleVisibilityChange);
  return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
}, [permissionsData, loading, refetchPermissions]);

方案3：调整Apollo Client全局调度配置 #

初始化Apollo Client时，关闭默认的查询惰性调度逻辑，强制所有查询的任务优先级和网络请求对齐，避免被浏览器后台节流影响：

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: {
      notifyOnNetworkStatusChange: true,
    }
  }
});

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