如何在 React Query 中处理错误和重试，有哪些最佳实践？
React Query 提供了强大的错误处理和重试机制，帮助开发者构建更健壮的应用：错误处理基本错误处理： const { data, error, isError } = useQuery('todos', fetchTodos); if (isError) { return <div>Error: {error.message}</div>; }全局错误处理：通过 QueryClient 配置 const queryClient = new QueryClient({ defaultOptions: { queries: { onError: (error) => { console.error('Query error:', error); // 可以在这里添加全局错误通知 }, }, }, });Mutation 错误处理： const mutation = useMutation(addTodo, { onError: (error, variables, context) => { console.error('Mutation error:', error); // 错误处理逻辑 }, });重试机制基本重试配置： const { data } = useQuery('todos', fetchTodos, { retry: 3, // 默认值为 3 });高级重试配置： const { data } = useQuery('todos', fetchTodos, { retry: (failureCount, error) => { // 自定义重试逻辑 if (error.status === 404) return false; // 404 不重试 if (failureCount >= 3) return false; // 最多重试 3 次 return true; }, retryDelay: (attemptIndex) => { // 指数退避策略 return Math.min(1000 * 2 ** attemptIndex, 30000); }, });最佳实践错误边界：使用 React 错误边界捕获查询错误 <ErrorBoundary fallback={<ErrorComponent />}> <QueryComponent /> </ErrorBoundary>错误状态 UI：为不同类型的错误提供不同的 UI 反馈 if (isError) { if (error.status === 401) { return <div>请先登录</div>; } else if (error.status === 404) { return <div>资源不存在</div>; } else { return <div>发生错误：{error.message}</div>; } }重试策略：对网络错误使用重试对 5xx 服务器错误使用重试对 4xx 客户端错误（如 401、404）不使用重试错误日志：集成错误监控服务（如 Sentry） const queryClient = new QueryClient({ defaultOptions: { queries: { onError: (error) => { Sentry.captureException(error); }, }, }, });用户反馈：显示加载状态显示错误信息提供重试按钮乐观更新错误处理：在 mutation 中正确处理回滚 const mutation = useMutation(updateTodo, { onMutate: () => { /* 乐观更新 */ }, onError: (error, variables, context) => { // 回滚数据 queryClient.setQueryData('todos', context.previousTodos); // 显示错误信息 showNotification('更新失败', 'error'); }, });通过合理配置错误处理和重试机制，可以显著提高应用的可靠性和用户体验。
