React Queryのリトライを理解する

はじめに

React 等の SPAアプリでは、データの取得・更新処理はバックエンド側の API で呼び出すことが多い。そして、API の呼出しでエラーが発生した場合、適切にリトライ処理を行う必要がある。リトライの実装が適切でないと、通信の瞬断などのちょっとした要因によってアプリケーションがエラーで動かなくなり、結果、使い勝手が悪いアプリとなってしまう。。。

上述のリトライの実装について異論を唱える人は少ないだろう。ただ、正直、「エラーなんてきっと起きないハズ」と思って後回しか、そもそも実装すらしないことがある。。。（私だけ？）

その点、React Query ではデフォルトでエラー発生時にリトライを行ってくれる。ただし、React Query のリトライ機能について理解をしておかないと、思わぬ落とし穴にはまってしまうので注意が必要である。

この記事では、React Query のリトライ制御について紹介する。

スポンサーリンク

リトライ回数、リトライ間隔のデフォルト値

まず、React Queryのデフォルトのリトライ回数（retry）のデフォルトは 3 に設定されている。

リトライ間隔（retryDelay） については、 １回目のリトライが 1秒、２回目が 2秒、３回目が 4秒と、リトライ回数が増えるたびにリトライ間隔が伸びる。

具体的には、次のようにデフォルト値が設定されている。

const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       retry: 3,
       retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
     },
   },
 })

ほとんどのアプリケーションでは、上記デフォルトの設定で問題ないであろうが、設定を変更してリトライを禁止したり、リトライ回数を変更したりすることも可能である。

これ以降では、リトライの設定をカスタマイズする方法を解説する。

リトライ回数を指定

APIなどのデータ取得のリトライ回数指定する場合は、retry オプションにリトライする回数を指定する。

以下は、リトライ回数に３回を指定する例である。

const { data } = useQuery(queryKey, getData, { 
  retry: 3,
});

リトライ間隔を指定

リトライ間隔（エラー発生後、もう一度 API を実行するまでの待ち時間）を指定する場合は、retryDelay オプションを指定する。

以下は、リトライ回数を２秒に設定する例である。この場合、２秒おきに最大３回まで APIの実行をリトライする。

const { data } = useQuery(queryKey, getData, { 
  retry: 3,
  retryDelay: 2000
});

リトライを禁止する

API の実行でエラーが発生してもリトライしない場合は、useQuery の retry オプションに false を指定する。

const { data } = useQuery(queryKey, getData, { 
  retry: false,
});

リトライする条件を指定する

retry オプションに関数を指定すると、リトライする条件を細かく制御できる。

例えば、HTTP 500番台のエラーではリトライするが、HTTP 400番台のエラーではリトライしないと言った、細かな条件を指定できる。

const { data } = useQuery(queryKey, getData, { 
  // HTTP 500番台のエラー時、３回までリトライする場合
  retry: (failureCount, error) => {
    return failureCount <= 3 && (error?.status ?? 500) >= 500
  }
});

スポンサーリンク

リトライを前提としたアプリにせよ

SPA アプリからの API 呼出しは、当然、ブラウザからバックエンドのサーバーへの通信処理となるため、WI-FI が一時的に切れている、バックエンド側のサーバー再起動など、さまざまな要因で一時的にエラーが発生することがある。

特にバックエンドの API をクラウド上に構築している場合、クラウドサービス側のメンテナンスや、リソース再配置による一時的なサーバー停止などは、よく耳にする話です。そのため、クラウドでバックグラウンドを実装している場合は、クライアントサイドのリトライの実装は必須と言えるでしょう。