問題タブ [react-query]

反応クエリライブラリのヘルプが必要です。オブジェクトのリストを取得してから、別のサービスから追加のデータを取得する必要があるすべてのオブジェクトについて取得します。useQuery反応クエリフックでこれを行うにはどうすればよいですか?

例 1 :

エラー：

ESLint:useQueryコールバック内で React Hook を呼び出すことはできません。React フックは、React 関数コンポーネントまたはカスタム React フック関数で呼び出す必要があります。(react-hooks/rules-of-hooks)

私はreact-queryAPIを呼び出すために使用しています。呼び出しは適切に機能し、入力フィールドでクエリ値が更新されるたびに実行されます。
残念ながら、クエリが空の場合でも API 呼び出しがトリガーされます。

たとえば、ユーザーがアプリをロードすると、入力 (したがってクエリ) は空白になります。

クエリがある場合にのみ API 呼び出しをトリガーする方法は?

コード

API を呼び出すこの単純なアプリがあります。フェッチを行い、データをキャッシュするために、react-query を使用しています。ただし、関数が でラップされていても、React.memo理由useQueryもなく複数の再レンダリングが発生します。8 ではなく 2 レンダリングにする必要があります。

新しいプロジェクトで反応クエリを使用し、小さな問題があります。要件は、データが読み込まれる前に空のページに読み込み中のスピナーを表示し、ユーザーが別のクエリで新しい結果を取得して以前の結果の上にスピナーを表示することです。

最初のケースは非常に簡単で、十分に文書化されています。

しかし、2番目のケースを理解できません-クエリがreact-queryを変更した後、新しい結果のフェッチを行い、useQueryからのデータが空であるため、デフォルトの空の配列を取得し、その場合はその条件に該当します-if (isLoading && !data.length )

反応クエリの使用に問題があります。サーバーからの応答が Unauthorized である場合は常に、useQuery はフラグ status='success' および isError=false を返します。サーバーの応答ステータスは 401 で、json 応答の内容は です{ error: true, message: 'UNAUTHORIZED' }。反応クエリをカスタマイズしませんでした。

ReactQueryConfigProviderを使用していないか、呼び出しでオプションを渡して動作をカスタマイズしていません。

これは呼び出しです：

そして、これはサービスです：

トークンが無効であるため、サーバーは 401 ステータス コードとカスタム json 応答で応答しています。

これは、react-query のデータ オブジェクトとエラー オブジェクトです。