TanStack 的数据缓存机制

TanStack Query（以前叫 React Query）提供了强大的数据缓存系统。以下是核心概念：

缓存的基本原理

当你使用 useQuery 获取数据时，TanStack Query 会自动将数据缓存在内存中。每个查询通过唯一的查询键（query key）来标识。

javascript

const { data } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos
});

缓存时间配置

staleTime：数据被视为新鲜的时间。在此期间内，不会重新请求数据。

默认值：0（立即过期）
设置为 Infinity 可以让数据永不过期

cacheTime (现在叫 gcTime)：数据在缓存中保留的时间，即使没有观察者。

默认值：5分钟
超时后，未使用的数据会被垃圾回收

javascript

const { data } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos,
  staleTime: 1000 * 60 * 5, // 5分钟内数据保持新鲜
  gcTime: 1000 * 60 * 10    // 10分钟后清除缓存
});

缓存更新策略

TanStack Query 会在以下情况自动重新获取数据：

窗口重新获得焦点（refetchOnWindowFocus）
网络重新连接（refetchOnReconnect）
组件挂载（refetchOnMount）
定时轮询（refetchInterval）

手动操作缓存

你可以手动操作缓存数据：

javascript

import { useQueryClient } from '@tanstack/react-query';

const queryClient = useQueryClient();

// 使缓存失效
queryClient.invalidateQueries({ queryKey: ['todos'] });

// 直接设置缓存数据
queryClient.setQueryData(['todos'], newData);

// 获取缓存数据
const data = queryClient.getQueryData(['todos']);

// 预取数据
queryClient.prefetchQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos
});

乐观更新

在修改数据时，可以立即更新缓存，提供更好的用户体验：

javascript

const mutation = useMutation({
  mutationFn: updateTodo,
  onMutate: async (newTodo) => {
    await queryClient.cancelQueries({ queryKey: ['todos'] });
    const previousTodos = queryClient.getQueryData(['todos']);
    queryClient.setQueryData(['todos'], (old) => [...old, newTodo]);
    return { previousTodos };
  },
  onError: (err, newTodo, context) => {
    queryClient.setQueryData(['todos'], context.previousTodos);
  },
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] });
  }
});

这个缓存系统让你可以避免重复请求，提升应用性能，同时保持数据的同步。

字节笔记本

TanStack 缓存管理完全指南

TanStack 的数据缓存机制

缓存的基本原理

缓存时间配置

缓存更新策略

手动操作缓存

乐观更新