React项目中高效使用TanStack Query的五个实用技巧

TanStack Query是react生态中广受欢迎的数据管理工具。它不仅能获取数据，还能智能地同步数据状态。掌握它的核心用法可以帮助我们构建响应更快、更稳定的应用。下面介绍五个实用技巧。

1. 处理有依赖关系的数据请求

实际开发中经常遇到这样的情况：需要先获取一些基础数据，然后根据这些数据去请求更多信息。比如先拿到用户ID，再去获取用户详情。

TanStack Query提供了简单的方法来处理这种依赖关系：

// 首先获取用户ID
const { data: userId } = useQuery({
  queryKey: ['selectedUserId'],
  queryFn: fetchUserId,
});

// 等userId存在后，再获取用户详情
const { data: userDetails } = useQuery({
  queryKey: ['user', userId],
  queryFn: () => fetchUserDetails(userId),
  enabled: !!userId, // 只有userId存在时才执行
});

这种方法的好处是逻辑清晰，避免了不必要的请求。当userId变化时，查询会自动重新执行。

2. 使用乐观更新提升用户体验

传统的更新操作需要等待服务器响应，用户会看到加载状态。乐观更新则不同，它先假设操作会成功，立即更新界面，如果失败再回退。

适用场景：

标记任务完成
删除列表项
编辑内容
点赞或收藏

下面是一个任务列表的乐观更新示例：

const queryClient = useQueryClient();

const mutation = useMutation({
  mutationFn: updateTodo, // 实际更新数据的函数

  // 在发送请求前立即执行
  onMutate: async (updatedTodo) => {
    // 停止正在进行的查询，避免数据冲突
    await queryClient.cancelQueries(['todos']);

    // 保存当前数据，用于可能的回退
    const previousTodos = queryClient.getQueryData(['todos']);

    // 立即更新本地数据
    queryClient.setQueryData(['todos'], (oldTodos) =>
      oldTodos.map((todo) =>
        todo.id === updatedTodo.id ? { ...todo, ...updatedTodo } : todo
      )
    );

    return { previousTodos };
  },

  // 如果请求失败，回退到之前的状态
  onError: (error, updatedTodo, context) => {
    if (context?.previousTodos) {
      queryClient.setQueryData(['todos'], context.previousTodos);
    }
  },

  // 无论成功失败，最后都重新获取最新数据
  onSettled: () => {
    queryClient.invalidateQueries(['todos']);
  },
});

这种方法让应用感觉更快，用户操作后能立即看到结果。

3. 合理管理缓存数据

数据更新后，我们需要确保相关的缓存数据也被正确更新。简单的做法是让所有相关查询失效，但我们可以做得更精确。

比如删除一个商品后：

const mutation = useMutation({
  mutationFn: deleteProduct,
  onSuccess: (_, productId) => {
    // 更新商品列表
    queryClient.invalidateQueries({ queryKey: ['products'] });
    
    // 移除该商品的详情缓存
    queryClient.removeQueries({ queryKey: ['product', productId] });
  },
});

这样做的好处：

列表数据会重新获取，保持最新
已删除商品的详情页缓存被清理
避免用户看到不存在的数据

4. 合理组织查询键名

查询键名不仅用于标识查询，还影响缓存行为。在处理动态数据时，应该把过滤条件、排序参数等都包含在键名中。

const filters = { category: 'electronics', sortBy: 'price' };

const { data: products } = useQuery({
  queryKey: ['products', filters],
  queryFn: () => fetchProducts(filters),
});

如果过滤参数来自组件状态，可以使用useMemo优化：

const filters = useMemo(() => ({ category, sortBy }), [category, sortBy]);

这样组织键名的好处：

不同参数的查询有独立的缓存
可以精确控制缓存失效
支持页面刷新后恢复状态

5. 实现无限滚动加载

对于长列表数据，无限滚动是常见的需求。TanStack Query提供了专门的方法：

const {
  data,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage,
} = useInfiniteQuery({
  queryKey: ['posts'],
  queryFn: ({ pageParam = 1 }) => fetchPosts(pageParam),
  getNextPageParam: (lastPage, allPages) => {
    return lastPage.hasMore ? allPages.length + 1 : undefined;
  },
});

渲染数据时，需要处理分页结构：

<div>
  {data?.pages.map((page, pageIndex) => (
    <div key={pageIndex}>
      {page.items.map((item) => (
        <PostCard key={item.id} {...item} />
      ))}
    </div>
  ))}
</div>

{hasNextPage && (
  <button 
    onClick={() => fetchNextPage()} 
    disabled={isFetchingNextPage}
  >
    {isFetchingNextPage ? '加载中...' : '加载更多'}
  </button>
)}

可以结合Intersection Observer实现自动加载：

// 创建观察目标
const loadMoreRef = useRef();

useEffect(() => {
  if (!hasNextPage || isFetchingNextPage) return;

  const observer = new IntersectionObserver(
    (entries) => {
      if (entries[0].isIntersecting) {
        fetchNextPage();
      }
    }
  );

  if (loadMoreRef.current) {
    observer.observe(loadMoreRef.current);
  }

  return () => observer.disconnect();
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);

// 在加载更多按钮上添加ref
<button ref={loadMoreRef}>加载更多</button>

额外建议：错误处理

在实际项目中，统一的错误处理很重要：

const { data, error, isLoading } = useQuery({
  queryKey: ['data'],
  queryFn: fetchData,
  retry: 3, // 失败时重试3次
  staleTime: 5 * 60 * 1000, // 数据保鲜时间5分钟
});

if (error) {
  return <ErrorPage error={error} />;
}

if (isLoading) {
  return <LoadingSpinner />;
}

总结

TanStack Query提供了很多实用功能来简化数据管理。通过合理使用依赖查询、乐观更新、缓存管理、键名组织和无限滚动，我们可以构建出用户体验更好的应用。

关键是要理解每个功能的使用场景，避免过度优化。先从基础用法开始，根据需要逐步引入高级特性。这样既能保证代码质量，又不会增加不必要的复杂度。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12992