useQuery の enabled プロパティについて

はじめに

TanStack Query (旧 React Query) の useQuery を使っていると、値がまだ決まっていない状態で API が呼ばれてしまい、意図しないエラーが発生することがあります。

そういった状況を解決するために enabled プロパティがあることを知ったので、今回はそれをまとめようと思います。

useQuery の enabled プロパティについて

enabled プロパティとは

useQuery の enabled プロパティとは、クエリを自動で実行するかどうかを指定するためのプロパティです。

enabled が true の場合は、コンポーネントの表示と同時にクエリが実行されます。
逆に enabled が false の場合は、クエリは自動では実行されません。

使い方

ID があるときだけ実行したい場合

レンダリング時に、クエリを実行する際に使用する ID が undefined や null になる場合があります。その際、enabled プロパティを指定しないと、勝手にクエリが実行されてしまい、エラーになることがあります。

そのような場合は、ID の有無を使って enabled を指定します。

const { data, isLoading } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
    enabled: !!userId,
});

このように指定すると、userId がある時のみ実行されるようになります。

フロントエンドのアクションでのみ実行したい場合

enabled プロパティは、「画面表示時には実行したくない」場合にも使えます。

例えば、表示されているボタンをクリックした時のみ実行したい場合などに使えます。

const [enabled, setEnabled] = useState(false);

const { data, refetch } = useQuery({
  queryKey: ['search', keyword],
  queryFn: () => search(keyword),
  enabled,
});

~~

<button onClick={() => setEnabled(true)}>
  検索する
</button>

さいごに

useQuery の enabled プロパティは、クエリの自動実行を制御するプロパティです。自分が使う用途に応じて使用してみてください。