react-query focus시 refetch방지하기

useQuery로 라이엇 API를 받아서 웹 애플리케이션을 개발하는데, visual studio에서 코드를 작성하다가 혹은 다른 탭을 보다가 애플리케이션으로 돌아오면 useQuery는 api를 refetch하게 된다.

그런데 문제는 라이엇 API는 RATE LIMITS가 있어서 1초에 20번, 2분에 100번 요청까지만 가능하다.

그렇기 때문에, 계속해서 데이터를 refetch하다보면 다음과 같은 에러가 발생한다.

{"status":{"message":"Rate limit exceeded","status_code":429}}

이것을 방지하기 위해, 애플리케이션이 focus될 시, refetch하는 것을 막으려 한다.

방법은 다음과 같다.

Disabling Globally(전체적으로 막기)
-queryClient에서 설정해주기

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
})
function App() {
  return <QueryClientProvider client={queryClient}>...</QueryClientProvider>
}

Disabling Per-Query(개별적으로 막기)

useQuery(['todos'], fetchTodos, { refetchOnWindowFocus: false })

#REFRENCE

Window Focus Refetching