使用 Expo 和 React Native 修复 Tanstack 查询空错误处理

使用 Expo 和 React Native 解决 Tanstack 查询中的空错误处理

在 React Native 和 Expo 环境中使用 JavaScript 和 TypeScript 以及 Tanstack Query 进行异步数据获取

// Approach 1: Basic Error Handling with useQuery and try-catch block
import { KeyboardAvoidingView, Text } from 'react-native';
import { useQuery } from '@tanstack/react-query';
export default function Login() {
  const query = useQuery({
    queryKey: ['test'],
    queryFn: async () => {
      try {
        throw new Error('test error');
      } catch (error) {
        throw new Error(error.message);
      }
    }
  });
  if (query.isError) {
    return (
      <KeyboardAvoidingView behavior="padding">
        <Text>{query.error?.message || 'Unknown error'}</Text>
      </KeyboardAvoidingView>
    );
  }
  return (
    <KeyboardAvoidingView behavior="padding">
      <Text>Success</Text>
    </KeyboardAvoidingView>
  );
}

替代方法：使用 onError 回调自定义错误处理

利用 Tanstack Query 的 onError 选项来管理 React Native Expo 环境中的错误状态

import { KeyboardAvoidingView, Text } from 'react-native';
import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      onError: (error) => {
        console.error('Query error:', error);
      },
    },
  }
});
export default function AppWrapper() {
  return (
    <QueryClientProvider client={queryClient}>
      <Login />
    </QueryClientProvider>
  );
}
function Login() {
  const query = useQuery({
    queryKey: ['test'],
    queryFn: async () => {
      throw new Error('Test error');
    },
    onError: (error) => {
      console.log('Query-level error:', error.message);
    }
  });
  if (query.isError) {
    return (
      <KeyboardAvoidingView behavior="padding">
        <Text>{query.error?.message}</Text>
      </KeyboardAvoidingView>
    );
  }
  return (
    <KeyboardAvoidingView behavior="padding">
      <Text>Success</Text>
    </KeyboardAvoidingView>
  );
}

错误处理的单元测试

使用 Jest 和 Tanstack Query 测试 React Native 组件的错误处理

import { render, screen } from '@testing-library/react-native';
import Login from './Login';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
test('renders error message on failed query', async () => {
  const queryClient = new QueryClient();
  render(
    <QueryClientProvider client={queryClient}>
      <Login />
    </QueryClientProvider>
  );
  await screen.findByText(/test error/i);
  expect(screen.getByText('test error')).toBeTruthy();
});

有关 Expo 中 Tanstack 查询错误处理的常见问题

1. 如何在 Tanstack Query 中全局处理错误？
2. 要全局处理错误，您可以配置 onError 选项中 QueryClient 之内 QueryClientProvider。这会记录错误并在整个应用程序中提供反馈。
3. 为什么我的错误对象总是为空？
4. 当 Tanstack 查询时，经常会发生这种情况 failureReason 属性未设置。该属性保存错误详细信息，即使主 error 对象为空。
5. 如何创建自定义错误消息？
6. 使用组合 onError 在查询配置和自定义组件中带有错误边界，以显示用户友好的错误消息。
7. Tanstack Query 在 React Native 中支持离线模式吗？
8. 是的，通过将其与 React Native 集成 NetInfo，您可以在连接更改期间管理查询，从而允许在设备断开连接时进行离线处理。
9. 如何在 Jest 中测试错误处理？
10. 和 Testing Library，您可以使用类似的函数 screen.findByText 模拟错误并验证错误消息是否按预期在 UI 中呈现。
11. 我可以自动重试失败的查询吗？
12. 是的，您可以配置 retry 选项中 useQuery 在将查询标记为失败之前重试设定的次数。
13. 当应用程序处于焦点状态时如何重新获取数据？
14. 使用 focusManager.setFocused 和 17 号 设置用户返回应用程序时应用程序的重新获取行为。
15. 为什么移动应用程序需要错误边界？
16. 错误边界捕获未处理的错误并显示后备 UI，这可以防止出现空白屏幕并提供有关网络错误等问题的反馈。
17. 有没有办法监控查询的加载状态？
18. 是的，Tanstack Query 提供了类似的属性 isLoading 和 isFetching 跟踪加载状态并有效管理加载旋转器。
19. 如何集中查询缓存？
20. 使用 QueryClientProvider 与一个共享的 QueryCache 实例允许在应用程序中缓存和共享查询数据。

使用 Tanstack 查询管理错误的关键要点

在 Expo 和 React Native 中使用 Tanstack Query 需要注意特定的错误处理配置。在这里，使用 查询客户端提供者 与定制 错误时 回调使您能够可靠地记录和显示错误，从而使异步上下文中的调试变得更加容易。此设置对于具有多个组件且需要集中式错误管理系统的应用程序结构特别有用。

实施这些策略可以让开发人员向用户显示清晰的错误消息，并减少网络断开等问题的调试时间。这种结构化的错误处理方法不仅增强了开发人员的体验，还提高了应用程序的性能，确保用户遇到更少的无声故障并获得更可靠的反馈。 📱