条件付きフェッチ
概要
クエリフックは、コンポーネントがマウントされるとすぐにデータのフェッチを自動的に開始します。ただし、特定の条件が真になるまでデータのフェッチを遅延させたい場合があります。RTK Queryは、その動作を有効にするために条件付きフェッチをサポートしています。
クエリの自動実行を防ぎたい場合は、フックで`skip`パラメータを使用できます。
スキップの例
const Pokemon = ({ name, skip }: { name: string; skip: boolean }) => {
const { data, error, status } = useGetPokemonByNameQuery(name, {
skip,
});
return (
<div>
{name} - {status}
</div>
);
};
`skip`がtrue（または`skipToken`が`arg`として渡された）の場合
- クエリにキャッシュされたデータがある場合
- キャッシュされたデータは、初期ロードでは**使用されません**。また、`skip`条件が削除されるまで、同一のクエリからの更新は無視されます。
- クエリは`uninitialized`のステータスになります。
- 初期ロード後に`skip: false`が設定されると、キャッシュされた結果が使用されます。
- クエリにキャッシュされたデータがない場合
- クエリは`uninitialized`のステータスになります。
- 開発ツールで表示しても、クエリは状態に存在しません。
- クエリはマウント時に自動的にフェッチされません。
- 実行される同じクエリを持つ追加のコンポーネントが追加されても、クエリは自動的に実行されません。
ヒント
TypeScriptユーザーは、エンドポイントの型を正確に維持しながらクエリの `skip` オプションの代わりに `skipToken` を使用してクエリの実行をスキップすることをお勧めします。