# React 查询最佳实践您是 React Query、TypeScript 和 React 开发方面的专家。 React Query（现在的 TanStack Query）通过内置缓存、后台更新和过时数据管理简化了数据获取逻辑。 ## 核心原则 * 使用 React Query 进行所有数据获取和缓存 * 利用 React Query 的内置状态管理而不是“useState”来管理服务器数据 * 使用 React Context 和 `useReducer` 来管理客户端全局状态 * 通过适当的缓存策略避免过多的API调用 * 始终正确处理加载状态和错误 ## 项目结构源代码/ 组件/ [特点]/ 索引.tsx querys.ts # 特定功能的查询挂钩 mutations.ts # 特定功能的突变钩子钩子/ useAuth.ts useApi.ts 服务/ 接口/ client.ts # axios/fetch 配置 users.ts # 用户API函数 posts.ts # 发布 API 函数提供商/ ReactQueryProvider.tsx 类型/ 索引.ts ## 设置 ### 提供者配置 // 提供商/ReactQueryProvider.tsx 从 'react-query' 导入 { QueryClient, QueryClientProvider }; 从'react-query/devtools'导入{ReactQueryDevtools}； const queryClient = 新的 QueryClient({ 默认选项：{ 查询：{ staleTime: 5 * 60 * 1000, // 5 分钟缓存时间: 30 * 60 * 1000, // 30 分钟重试：2， refetchOnWindowFocus: true, }, }, }); 导出函数 ReactQueryProvider({ 孩子 }: { 孩子: React.ReactNode }) { 返回（ {孩子} ）； } ## 查询模式 ### 基本查询挂钩从'react-query'导入{useQuery}；从 '@/services/api/users' 导入 { fetchUser, User }; 导出函数 useUser(userId: string) { 返回 useQuery<用户，错误>( ['用户', 用户ID], () => fetchUser(用户ID), { 启用：！！用户ID， staleTime: 1000 * 60 * 10, // 10 分钟 } ）； } ### 带有错误处理的查询服务应该抛出 React Query 可以捕获并显示的用户友好错误： // 服务/api/users.ts 导出异步函数 fetchUser(userId: string): Promise { const 响应 =等待 fetch(`/api/users/${userId}`); 如果（！response.ok）{ // 抛出用户友好的错误消息 throw new Error('无法加载用户配置文件。请重试。'); } 返回response.json(); } // 组件使用函数 UserProfile({ userId }: { userId: string }) { const { 数据：用户，正在加载，错误 } = useUser(userId); if (isLoading) 返回 ; if (错误) return ; 返回 ; } ### 相关查询函数 useUserWithPosts(userId: string) { const userQuery = useUser(userId); const postsQuery = useQuery( ['帖子'，用户ID]， () => fetchUserPosts(userId), { 启用：!!userQuery.data， } ）；返回 { userQuery, postsQuery }; } ### 分页查询函数 usePaginatedUsers(页数：数量，限制：数量 = 10) { 返回 useQuery( ['用户', '列表', { 页, 限制 }], () => fetchUsers({ 页, 限制 }), { 保留以前的数据：true， } ）； } ### 无限滚动从'react-query'导入{useInfiniteQuery}；函数 useInfiniteUsers() { 返回 useInfiniteQuery( ['用户', '无限'], ({ pageParam = 1 }) => fetchUsers({ page: pageParam }), { getNextPageParam: (lastPage) => lastPage.nextPage ??未定义， } ）； } ## 突变模式 ### 基本突变从 'react-query' 导入 { useMutation, useQueryClient }; 函数 useCreateUser() { const queryClient = useQueryClient(); 返回 useMutation(createUser, { 成功：() => { queryClient.invalidateQueries(['用户']); }, onError: (错误: 错误) => { toast.error(错误.消息); }, }); } ### 乐观更新函数 useUpdateUser() { const queryClient = useQueryClient(); 返回 useMutation(updateUser, { onMutate: 异步 (updatedUser) => { 等待 queryClient.cancelQueries(['user', UpdatedUser.id]); const previousUser = queryClient.getQueryData(['user', UpdatedUser.id]); queryClient.setQueryData(['用户',updatedUser.id],updatedUser); 返回 { previousUser }; }, onError：（错误，更新用户，上下文）=> { 如果（上下文？.previousUser）{ queryClient.setQueryData(['user',updatedUser.id],context.previousUser); } }, onSettled: (数据、错误、updatedUser) => { queryClient.invalidateQueries(['user', UpdatedUser.id]); }, }); } ## 状态管理集成 ### 与 Context/Reducer 结合使用 React Query 获取服务器状态，使用 Context/Reducer 获取客户端状态： // 带有上下文的客户端状态 const AppStateContext = createContext （未定义）； const AppDispatchContext = createContext |未定义>（未定义）；函数 AppProvider({ 孩子 }: { 孩子: React.ReactNode }) { const [状态，调度] = useReducer(appReducer，initialState); 返回（ {孩子} ）； } // 使用 React Query 的服务器状态函数用户仪表板（）{ const { 主题 } = useAppState(); // 客户端状态 const { 数据：用户 } = useUser(userId); // 服务器状态返回<仪表板主题={主题}用户={用户}/>; } ### 与 Zustand 结合（替代）从“zustand”导入{创建}； // 客户端状态存储 const useStore = 创建((set) => ({ 主题：“光”， setTheme: (主题) => set({ 主题 }), })); // 组件同时使用函数应用程序（）{ const theme = useStore((state) => state.theme); const { 数据：用户 } = useUser(userId); 返回<布局主题={主题}用户={用户}/>; } ## 性能优化 ### 查询关键最佳实践 // 结构化查询键 const 查询键 = { 用户：{ all: ['users'] 作为 const，列表： () => [...queryKeys.users.all, 'list'] as const, 列表：（过滤器：过滤器）=> [...queryKeys.users.lists（），过滤器] as const，详细信息： () => [...queryKeys.users.all, 'detail'] as const, 详细信息：(id: string) => [...queryKeys.users.details(), id] as const， }, }; ### 选择性订阅 // 只订阅用户名变化函数 useUserName(userId: string) { 返回 useUser(用户 ID, { 选择：（用户）=> 用户名， }); } ### 预取函数 UserListItem({ userId }: { userId: string }) { const queryClient = useQueryClient(); const handleMouseEnter = () => { queryClient.prefetchQuery( ['用户', 用户ID], () => fetchUser(用户ID), { 陈旧时间：60000 } ）； }; 返回（

<链接到={`/users/${userId}`}>查看个人资料

）； } ## 错误处理模式 ### 全局错误处理程序 const queryClient = 新的 QueryClient({ 默认选项：{ 查询：{ onError: (错误: 错误) => { console.error('查询错误：', error); }, }, 突变：{ onError: (错误: 错误) => { toast.error(错误.消息); }, }, }, }); ### 错误边界从'react-query'导入{QueryErrorResetBoundary}；从'react-error-boundary'导入{ErrorBoundary}；函数应用程序（）{ 返回（ <查询错误重置边界> {({重置}) => ( <错误边界 onReset={重置} FallbackRender={({ 错误，resetErrorBoundary }) => (

出了点问题：{error.message}

)} > <用户资料/> )} ）； } ## 关键约定 1. 使用 React Query DevTools 检查缓存并跟踪查询状态 2. 在特定于功能的目录中对react-query hook进行分组（基于功能的组织） 3. 始终通过用户友好的消息和重试选项正确处理错误 4. 仅获取所需数据 - 使用 API 参数来减少数据传输 5. 避免深度嵌套查询——尽可能扁平化以获得更好的性能 6. 对特定于组件的数据使用本地状态，对共享数据使用全局状态 7. 利用 React Query 的内置缓存和状态管理功能 ## 要避免的反模式 * 不要使用`useEffect`来获取数据 * 不要将服务器数据存储在 `useState` 中 * 不要忘记加载和错误状态处理 * 如果没有适当的缓存失效策略，请勿创建查询 * 不要跳过条件查询的“enabled”选项 * 不要忽略查询响应的 TypeScript 类型

反应查询

包含技能