TanStack Query中QueryCache状态同步问题的解决方案

问题背景

在React Native应用开发中，我们经常会遇到需要处理离线模式的场景。在使用TanStack Query（原React Query）时，一个常见的需求是根据应用的离线状态来控制错误提示的显示。本文讨论的问题就是在QueryClient的onError回调中，无法正确获取最新的应用状态（如离线模式开关状态）的技术难题。

问题现象

开发者尝试在QueryClient的配置中，通过onError回调函数来处理网络请求错误。当应用处于离线模式时，希望屏蔽某些错误提示。然而发现onError回调中获取的上下文状态（如isOffline）始终是初始值，无法反映用户后续的切换操作。

问题分析

这个问题的根源在于QueryClient和QueryCache的初始化时机和闭包陷阱：

1. 初始化时机问题：QueryClient通常在应用启动时只初始化一次，而onError回调在初始化时就确定了闭包环境
2. 闭包陷阱：回调函数捕获的是初始化时的上下文状态，后续状态更新不会影响已创建的闭包
3. 性能问题：尝试通过useMemo和依赖项来重建QueryClient会导致缓存丢失，这不是推荐的做法

解决方案

正确的实现方式

1. 避免重建QueryClient：不应该因为状态变化而重建整个QueryClient实例，这会丢失所有缓存数据
2. 使用命令式状态获取：改为在回调函数内部实时获取最新状态，而不是依赖闭包

// 使用zustand作为示例状态管理
import { useStore } from './your-store';

export function QueryClientInstanceProvider({ children }) {
  const toast = useToast();
  
  const queryClient = useMemo(() => new QueryClient({
    queryCache: new QueryCache({
      onError: (error) => {
        // 命令式获取最新状态
        const isOffline = useStore.getState().isOffline;
        if (isOffline && error.code === 'NETWORK_ERROR') return;
        toast.show(error.message);
      }
    }),
    // 其他配置...
  }), []); // 注意这里没有依赖项

  return (
    <QueryClientProvider client={queryClient}>
      {children}
    </QueryClientProvider>
  );
}

其他可行的方案

1. 使用Ref保存最新状态：通过useRef来保持对最新状态的引用
2. 使用全局变量：在简单场景下可以使用模块级别的变量来存储状态
3. 使用事件机制：通过发布订阅模式来通知状态变化

最佳实践建议

1. QueryClient应该是单例：在整个应用生命周期中尽量保持QueryClient实例不变
2. 谨慎使用依赖项：在创建QueryClient时避免使用会频繁变化的依赖项
3. 考虑错误处理的全局性：错误处理逻辑应该是稳定的，频繁变化的逻辑可能需要重新设计
4. 状态管理选择：选择适合你项目的状态管理方案，确保能够命令式获取最新状态

总结

在TanStack Query中处理动态状态时，我们需要特别注意QueryClient的生命周期和闭包问题。通过命令式获取状态而不是依赖闭包，可以有效地解决回调函数中状态不同步的问题。同时，保持QueryClient实例的稳定性对于应用的性能和正确性都至关重要。

对于需要根据应用状态动态调整行为的场景，建议采用本文介绍的命令式状态获取模式，这既能保证功能的正确性，又能维持良好的性能表现。