【React】React Queryでクエリの発行を抑制する考慮

概要

React Queryは、APIからデータを取得する際に使用するライブラリで、ローディングやエラー制御やキャッシュなどの機能があります。概要については初めてReact Queryを使う人のため設定方法と動作の理解の記事が参考になると思います。
使用にあたり設定自体は難しくないのですが、あまり考えずに使うとComponentがマウントされる時やブラウザのタブを切り替える時などにクエリが発行されてしまうので、意図しない限りはできるだけ発行されるのを抑えたいです。その際の設定をメモ書きします。

対応

React Queryには多数のオプションが設定できるのですが、Fetch a query only once until page refresh using React Queryの記事に、クエリを一度しか発行させないためのオプション設定の例が紹介されています。個人的にはデフォルトのオプションはクエリの発行を抑制するような設定を入れて、useQueryで必要に応じて個別に設定する形が良いかなとは感じました。

設定サンプル

少し試してみた感触だとrefetchOnWindowFocusとrefetchOnmountの設定をfalseにしておけば、そこまで無駄なクエリが発生することは無いかなと思います。
念の為、設定のサンプルを以下に記します。（ReactNativeがベースですがReactでもほぼ同様と思います）

App.js

import { QueryClient, QueryClientProvider } from "react-query";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import TopComponent from "./components/TopComponent";
import { SampleSearchProvider } from "./context/SampleSearchProvider";

export default function App() {
  const Stack = createStackNavigator();
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        refetchOnmount: false,
      },
    },
  });

  return (
    <SampleSearchProvider>
      <QueryClientProvider client={queryClient}>
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
              name="sample screen"
              component={TopComponent}
              options={{
                headerTitle: "サンプル",
                headerTitleAlign: "center",
              }}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </QueryClientProvider>
    </SampleSearchProvider>
  );
}