如何在 React Query 中处理错误和重试，有哪些最佳实践？

React Query 提供了强大的错误处理和重试机制，帮助开发者构建更健壮的应用：

错误处理

1. 基本错误处理：

   javascript
   const { data, error, isError } = useQuery('todos', fetchTodos);
   
   if (isError) {
     return <div>Error: {error.message}</div>;
   }

2. 全局错误处理：通过 QueryClient 配置

   javascript
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
         onError: (error) => {
           console.error('Query error:', error);
           // 可以在这里添加全局错误通知
         },
       },
     },
   });

3. Mutation 错误处理：

   javascript
   const mutation = useMutation(addTodo, {
     onError: (error, variables, context) => {
       console.error('Mutation error:', error);
       // 错误处理逻辑
     },
   });

重试机制

1. 基本重试配置：

   javascript
   const { data } = useQuery('todos', fetchTodos, {
     retry: 3, // 默认值为 3
   });

2. 高级重试配置：

   javascript
   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);
     },
   });

最佳实践

1. 错误边界：使用 React 错误边界捕获查询错误

   javascript
   <ErrorBoundary fallback={<ErrorComponent />}>
     <QueryComponent />
   </ErrorBoundary>

2. 错误状态 UI：为不同类型的错误提供不同的 UI 反馈

   javascript
   if (isError) {
     if (error.status === 401) {
       return <div>请先登录</div>;
     } else if (error.status === 404) {
       return <div>资源不存在</div>;
     } else {
       return <div>发生错误：{error.message}</div>;
     }
   }

3. 重试策略：

   • 对网络错误使用重试
   • 对 5xx 服务器错误使用重试
   • 对 4xx 客户端错误（如 401、404）不使用重试

4. 错误日志：集成错误监控服务（如 Sentry）

   javascript
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
         onError: (error) => {
           Sentry.captureException(error);
         },
       },
     },
   });

5. 用户反馈：

   • 显示加载状态
   • 显示错误信息
   • 提供重试按钮

6. 乐观更新错误处理：在 mutation 中正确处理回滚

   javascript
   const mutation = useMutation(updateTodo, {
     onMutate: () => { /* 乐观更新 */ },
     onError: (error, variables, context) => {
       // 回滚数据
       queryClient.setQueryData('todos', context.previousTodos);
       // 显示错误信息
       showNotification('更新失败', 'error');
     },
   });

通过合理配置错误处理和重试机制，可以显著提高应用的可靠性和用户体验。