data-fetching

# 数据获取模式 使用 TanStack Query 结合 Suspense 边界、缓存优先策略和集中式 API 服务进行现代数据获取。 --- ## 主要模式：useSuspenseQuery ### 为什么使用 useSuspenseQuery？ 对于**所有新组件**，请使用 `useSuspenseQuery` 而不是常规的 `useQuery`： **优势：** - 无需 `isLoading` 检查 - 与 Suspense 边界集成 - 组件代码更简洁 - 一致的加载用户体验 - 通过错误边界实现更好的错误处理 ### 基础模式 typescript import { useSuspenseQuery } from '@tanstack/react-query'; import { myFeatureApi } from '../api/myFeatureApi'; export const MyComponent: React.FC = ({ id }) => { // 无需 isLoading - Suspense 会处理它！ const { data } = useSuspenseQuery({ queryKey: ['myEntity', id], queryFn: () => myFeatureApi.getEntity(id), }); // 此处 data 始终已定义 (不是 undefined | Data) return ; }; // 包装在 Suspense 边界中 ### useSuspenseQuery 与 useQuery 对比 | 特性 | useSuspenseQuery | useQuery | |---------|------------------|----------| | 加载状态 | 由 Suspense 处理 | 手动 `isLoading` 检查 | | 数据类型 | 始终已定义 | `Data | undefined` | | 配合使用 | Suspense 边界 | 传统组件 | | 推荐用于 | **新组件** | 仅限遗留代码 | | 错误处理 | 错误边界 | 手动错误状态 | **何时使用常规 useQuery：** - 维护遗留代码 - 没有 Suspense 的简单场景 - 带有后台更新的轮询 **对于新组件：始终优先使用 useSuspenseQuery** --- ## 缓存优先策略 ### 缓存优先模式示例 **智能缓存**通过优先检查 React Query 缓存来减少 API 调用： typescript import { useSuspenseQuery, useQueryClient } from '@tanstack/react-query'; import { postApi } from '../api/postApi'; export function useSuspensePost(postId: number) { const queryClient = useQueryClient(); return useSuspenseQuery({ queryKey: ['post', postId], queryFn: async () => { // 策略 1: 优先尝试从列表缓存中获取 const cachedListData = queryClient.getQueryData([ 'posts', 'list' ]); if (cachedListData?.posts) { const cachedPost = cachedListData.posts.find( (post) => post.id === postId );