React Query でデータベース クエリの失敗した再試行を実装する

React Query でデータベース クエリの失敗した再試行を実装する

React Query は、データを簡単に処理するのに役立つ強力なデータ クエリおよび状態管理ライブラリです。クエリおよびステータス管理タスク。実際のアプリケーションではデータベースクエリの失敗が頻繁に発生するため、クエリの安定性を向上させるために自動失敗リトライ機構を実装する必要があります。この記事では、React Query でデータベース クエリの失敗した再試行を実装する方法と、具体的なコード例を紹介します。

React Query では、クエリ フックを使用してデータベース クエリを実行できます。 Query フックでは、queryKey と queryFn を指定してクエリを定義できます。 queryKey はクエリの名前を識別する一意のキーであり、queryFn は実際のクエリ操作を実行する非同期関数です。 Query フックを呼び出すと、React Query は自動的に queryFn を実行し、クエリ結果をグローバル キャッシュに保存します。

データベース クエリの失敗した再試行を実装するには、React Query の onError コールバックを使用できます。 queryFn がエラーをスローすると、React Query は自動的に onError コールバックをトリガーします。 onError コールバックに再試行ロジックを実装できます。以下はサンプル コードです。

import { useQuery } from 'react-query';

const fetchUser = async (userId) => {
  const response = await fetch(`https://example.com/api/users/${userId}`);
  if (!response.ok) {
    throw new Error('Failed to fetch user');
  }
  return response.json();
};

const User = ({ userId }) => {
  const queryKey = ['user', userId];

  const { data, isError, error } = useQuery(queryKey, fetchUser, {
    retry: 3,
    retryDelay: 1000,
    onError: (error, key, config) => {
      console.error('An error occurred:', error);
    },
  });

  if (isError) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
};

export default User;

上記のコードでは、ユーザー情報をクエリするための fetchUser という名前の非同期関数を定義します。クエリが失敗すると、カスタム エラーがスローされます。次に、retry パラメーターと retryDelay パラメーターを設定して、Query フックに再試行ロジックを実装します。 retry パラメータは再試行の回数を指定し、retryDelay パラメータは各再試行間の遅延を指定します。また、onError コールバックを通じてエラー情報を処理します。これにより、コンソールにエラー ログを出力したり、他の処理を実行したりできます。

上記のコード例を使用すると、React コンポーネントの User コンポーネントを呼び出してユーザー情報をクエリできます。クエリが失敗した場合、React Query は自動的に再試行ロジックを実行し、毎回 1 秒間隔で最大 3 回再試行します。リトライ回数が制限を超えるとisErrorプロパティがtrueとなり、エラープロンプトを表示するなど、コンポーネント内でエラー情報を扱うことができます。

概要:
React Query の onError コールバックを使用すると、データベース クエリの失敗した再試行ロジックを簡単に実装できます。特定のクエリ関数でエラーをスローし、エラー情報を処理して onError コールバックで再試行をトリガーします。これにより、クエリの安定性が向上し、データの正確性が保証されます。同時に、React Query は、実際の状況に応じて調整できる、再試行回数や再試行間隔などの他の柔軟な構成パラメーターも提供します。

以上がReact Query でデータベース クエリの失敗した再試行を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。