React Queryでウィンドウフォーカス時のデータ再取得を止める

React Queryでウィンドウにフォーカスが当たるたび（refocusの時）に、データの再取得が走っているのに気付いた。どうも React Query のデフォルトの仕様の動きらしい。

頻繁にデータが更新されるソーシャル系のサイトでは必要な措置かもしれないが、そうでないサービスや、AWSなどの従量課金性のものを使っている場合、いちいちウィンドウにフォーカスがAPIの実行回数が無駄し増えるのはよろしくない。

フォーカス次のデータ再取得を止める

useQuery 使用時に、オプションの refetchOnWindowFocus に false を指定してやると、フォーカス取得時のデータ再取得が行われなくなる。

const getRepos = async () => {
	const res = await fetch('https://api.github.com/repos/facebook/react')
	return res.json()
}

// useQuery使用時にオプションで「refetchOnWindowFocus」を指定
const {data, error, isLoading} = useQuery('github', getRepos, {
    refetchOnWindowFocus: false   // ←これ
})