React Query でデータベース クエリのエラー処理メカニズムを実装する

React Query でのデータベース クエリのエラー処理メカニズムの実装

React Query は、データの管理とキャッシュに使用されるライブラリです。フロントエンド分野へようこそ。アプリケーションでは、データベースと対話する必要があることが多く、データベースのクエリによってさまざまなエラーが発生する可能性があります。したがって、アプリケーションの安定性とユーザー エクスペリエンスを確保するには、効果的なエラー処理メカニズムを実装することが重要です。

最初のステップは、React Query をインストールすることです。次のコマンドを使用して、これをプロジェクトに追加します。

npm install react-query

インストールが完了したら、必要なコンポーネントと関数をアプリケーションにインポートし、コードの記述を開始できます。

まず、React Query の QueryClient インスタンスを作成し、アプリケーションのルート コンポーネントでラップする必要があります。

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* 应用程序的其他组件 */}
    </QueryClientProvider>
  );
}

export default App;

次に、データベース クエリを実行する関数が必要です。この関数は、JavaScript のフェッチ API を使用してリクエストを作成し、結果を JSON 形式に解析します。

async function fetchResource(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error("请求出错");
  }
  return response.json();
}

クエリ関数では、応答のステータス コードをチェックすることで、リクエストが成功したかどうかを判断します。ステータス コードが 200 ～ 299 の範囲にない場合、エラーがスローされます。これにより、React Query のエラー処理メカニズムがトリガーされます。

次に、クエリ関数を呼び出し、React Query の useQuery フックを使用して結果を処理します。

import { useQuery } from "react-query";

function Resource() {
  const { data, error, isLoading } = useQuery("resource", () =>
    fetchResource("/api/resource")
  );

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>发生错误：{error.message}</div>;
  }

  return <div>数据：{JSON.stringify(data)}</div>;
}

export default Resource;

この例では、useQuery フックを使用して「resource」という名前のデータを取得します。 useQuery に渡す 2 番目の引数は、クエリ関数 fetchResource を実行する関数です。 React Query はデータ キャッシュと無効化ロジックを自動的に処理するため、リクエスト ステータスとエラー処理のみに集中する必要があります。

データが読み込まれると、isLoading が true になり、読み込みインジケーターを表示できます。エラーが発生し、エラーが空でない場合は、エラー メッセージを表示できます。リクエストが成功し、エラーがない場合、データにはサーバーから返されたデータが含まれます。

最後に、アプリケーションの他のコンポーネントで Resource コンポーネントを使用する必要があります。

import Resource from "./Resource";

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Resource />
    </QueryClientProvider>
  );
}

export default App;

この設定を使用すると、データベース クエリのエラー処理メカニズムを React Query に実装できます。ネットワーク エラーであっても、サーバーから返されたエラーであっても、React Query メカニズムを使用して均一に処理し、優れたユーザー エクスペリエンスを提供できます。

以上がReact Query でデータベース クエリのエラー処理メカニズムを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。