Expo および React Native による Tanstack Query Null エラー処理の修正

Expo と React Native を使用した Tanstack クエリの Null エラー処理の解決

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

エラー処理のための単体テスト

Tanstack Query を使用した React Native コンポーネントの Jest を使用したエラー処理のテスト

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. エラー オブジェクトが常に null になるのはなぜですか?
4. これは、Tanstack Query の場合によく発生します。 failureReason 属性が設定されていません。この属性は、メインのエラーが発生した場合でもエラーの詳細を保持します。 error オブジェクトがnullです。
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 と AppState ユーザーがアプリに戻ったときのアプリの再取得動作を設定します。
15. モバイル アプリにエラー境界が必要なのはなぜですか?
16. エラー境界は、未処理のエラーを捕捉し、フォールバック UI を表示します。これにより、空白画面が防止され、ネットワーク エラーなどの問題に関するフィードバックが提供されます。
17. クエリの読み込み状態を監視する方法はありますか?
18. はい、Tanstack Query は次のようなプロパティを提供します。 isLoading そして isFetching ローディング状態を追跡し、ローディング スピナーを効果的に管理します。
19. クエリ キャッシュを一元化するにはどうすればよいですか?
20. 使用する QueryClientProvider 共有で QueryCache インスタンスを使用すると、クエリ データをキャッシュし、アプリ全体で共有できます。

Tanstack Query を使用したエラー管理に関する重要なポイント

Expo および React Native で Tanstack Query を使用するには、特定のエラー処理構成に注意する必要があります。ここで、を使用して、 クエリクライアントプロバイダー カスタムで onError コールバックを使用すると、エラーを確実にログに記録して表示できるため、非同期コンテキストでのデバッグがはるかに簡単になります。この設定は、集中エラー管理システムを必要とする複数のコンポーネントを含むアプリ構造で特に役立ちます。

これらの戦略を実装すると、開発者はユーザーに明確なエラー メッセージを表示し、ネットワーク切断などの問題のデバッグ時間を短縮できます。この構造化されたエラー処理アプローチにより、開発者のエクスペリエンスが向上するだけでなく、アプリのパフォーマンスも向上し、ユーザーが遭遇するサイレントエラーが減り、より信頼性の高いフィードバックを受け取ることができるようになります。 📱