【React】TanStackQuery(旧ReactQuery)でデータ取得を手動で起動したい

概要

TanStackQuery（旧ReactQuery）で、データ取得を行う場合はuseQueryを使用すると思います。
基本的にはComponentを読み込む時に、useQueryのデータ取得が起動されるのですが、このデータ取得を手動で行いたい場合はどうすれば良いかというのを、今回メモ書きします。

対応方法案

stackoverflowのReact-Query: How to useQuery when button is clickedの記事に対応案がいくつか挙げられてますが、enabledの設定をfalseにして取得時にrefetchする実装が良いかなと思いました。
なお、enabledの設定の詳細については、TanStackQueryのドキュメントDisabling/Pausing Queriesを参照ください。

前提

• 今回使用したTanStackQueryのバージョンは4.29.1です。

実装サンプル

stackoverflowで紹介されていた実装サンプルほぼそのままですが、ボタンをクリックしたらデータ取得をする実装を、以下に記載します。

export default function SampleComponent() {
  const { data, isLoading, isError, refetch } = useQuery(
    ["getDataManually"],
    async () => {
      // APIをコールする（処理詳細は記載割愛）
      return await getData();
    },
    {
      refetchOnWindowFocus: false,
      enabled: false,
    }
  );

  const handleClick = () => {
    // manually refetch
    refetch();
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}