deckardger/tanstack-query-最佳实践

tanstack-query-最佳实践 是做什么的？

TanStack Query（React Query）在数据获取、缓存、变更和服务器状态管理方面的最佳实践。在构建具有服务器状态的数据驱动型 React 应用时激活。

数据获取

• 使用 useQuery 获取数据，并为每个查询提供唯一的 queryKey。
• 通过 staleTime 和 gcTime（或 cacheTime）控制缓存行为。
• 利用 refetchOnWindowFocus、refetchOnReconnect 等选项优化重新获取。

变更（Mutations）

• 使用 useMutation 处理数据创建、更新和删除操作。
• 结合 onMutate、onSuccess、onError 和 onSettled 回调实现乐观更新和错误处理。
• 通过 invalidateQueries 或 setQueryData 在变更后刷新相关查询。

缓存与服务器状态管理

• 理解查询缓存的工作原理，合理设置 staleTime 以减少不必要的网络请求。
• 使用 QueryClient 进行全局或局部缓存控制。
• 考虑使用 queryClient.prefetchQuery 预加载数据，提升用户体验。

分页与无限加载

• 使用 keepPreviousData 选项保持分页切换时的数据连续性。
• 利用 useInfiniteQuery 实现无限滚动或“加载更多”功能。

错误与加载状态

• 总是检查 isLoading、isError、error 和 data 以展示适当的 UI。
• 使用 QueryErrorResetBoundary 和 ErrorBoundary 优雅地处理错误。

开发工具

• 集成 @tanstack/react-query-devtools 以便调试查询状态和缓存。

遵循这些最佳实践，您将能够构建更健壮、可维护且高性能的数据驱动 React 应用。