urql 项目中实现全局加载状态监控的技术方案

背景介绍

在现代前端应用中，全局加载状态指示器是一个常见的需求。它能够为用户提供统一的视觉反馈，告知应用当前是否有后台请求正在进行。urql 作为一款流行的 GraphQL 客户端，其核心设计理念强调可插拔性（pluggability），通过交换（exchange）机制实现高度可定制化。

核心问题

在 urql 项目中，开发者希望实现类似 tanstack query 中 useIsFetching 的功能，能够全局监控所有请求的加载状态。这需要在不破坏 urql 核心设计理念的前提下，提供一个优雅的解决方案。

技术实现方案

基于交换机制的解决方案

urql 的交换机制为解决这一问题提供了完美的架构基础。我们可以创建一个专门的 isFetchingExchange 来实现全局请求状态监控：

1. 交换器设计：

   • 维护一个请求键（key）数组来跟踪所有进行中的请求
   • 提供订阅/取消订阅接口供组件监听状态变化
   • 在请求开始和结束时更新状态并通知订阅者

2. 状态管理：

   • 使用数组存储所有进行中请求的键
   • 当数组长度从0变为1时，通知订阅者状态变为"加载中"
   • 当数组长度从1变为0时，通知订阅者状态变为"空闲"

3. 性能优化：

   • 通过独立的 IsFetching 组件最小化重新渲染范围
   • 只在状态实际变化时通知订阅者

实现代码示例

const isFetchingExchange = () => {
  const activeRequests = [];
  const subscribers = [];

  const notify = (isLoading) => {
    subscribers.forEach(cb => cb(isLoading));
  };

  return {
    exchange: ops$ => {
      const forward$ = pipe(
        ops$,
        tap(op => {
          activeRequests.push(op.key);
          if (activeRequests.length === 1) notify(true);
        })
      );
      
      return pipe(
        forward(forward$),
        tap(op => {
          const index = activeRequests.indexOf(op.key);
          if (index !== -1) {
            activeRequests.splice(index, 1);
            if (activeRequests.length === 0) notify(false);
          }
        })
      );
    },
    subscribe: cb => subscribers.push(cb),
    unsubscribe: cb => {
      const index = subscribers.indexOf(cb);
      if (index !== -1) subscribers.splice(index, 1);
    }
  };
};

架构优势

1. 非侵入式设计：完全基于 urql 现有的交换机制，不修改核心逻辑
2. 高性能：通过细粒度的订阅机制避免不必要的组件渲染
3. 可扩展性：可以轻松添加更多功能，如按请求类型分类监控
4. 灵活性：开发者可以根据需要定制通知逻辑和状态存储方式

实际应用建议

在实际项目中，建议将这一功能封装为独立模块：

1. 创建专门的 useIsFetching 自定义 Hook
2. 提供配置选项，如过滤特定类型的请求
3. 考虑添加防抖功能以避免状态快速切换导致的闪烁
4. 提供 TypeScript 类型定义确保类型安全

总结

通过 urql 的交换机制实现全局加载状态监控，不仅保持了 urql 的核心设计理念，还展示了其架构的灵活性和可扩展性。这种解决方案为开发者提供了一种高效、非侵入式的方法来增强用户体验，同时保持了代码的整洁和可维护性。对于需要全局加载指示器的 urql 项目来说，这是一个值得考虑的技术方案。