[React] 리페칭(Re-fetching)에 대해서

일정 시간이 지나면 서버는 만료된 데이터를 삭제한다. 리페칭은 페이지를 벗어났다가 다시 돌아왔을 때 볼 수 있는데, 만료된 데이터를 다시 가져오는 것이다. stale 쿼리는 아래 경우에서 자동적으로 리페칭이 일어난다.

 

✅ 리페칭이 일어나는 경우

- 새로운 쿼리 인스턴스가 많아지는 경우

- 쿼리 키가 처음 호출되는 경우

* 쿼리를 호출하는 반응 컴포넌트를 증가시킨 경우

- 창을 재포커스 하는 경우

- 만료된 데이터의 업데이트 여부를 확인할 수 있는 네트워크가 다시 연결된 경우

 

또한 리페칭 간격이 지난 경우도 해당되는데

이 경우는 간격에 리페칭을 해서 서버를 풀링하고 사용자 조치가 없더라도 데이터가 업데이트 되는 경우다.

 

🤔 리페칭을 제한하고 싶으면?

1. stale 시간을 증가시킨다.

창을 재포커스 하거나 네트워크에 재연결하는 트리거는 데이터가 실제로 만료된 경우에만 작용을 하기 때문이다.

2. refetchOnMount, refetchOnWindowFocus, refetchOnReconnect 옵션 중 하나 혹은 전체를 끈다.

 

리페칭을 제한할 때는 신중해야 한다. 변동이 잦지 않은 데이터에 적용해야 하며, 미세한 변동에도 큰 변화를 불러오는 데이터에는 적용하지 말아야 한다.

 

👉 리페칭을 제한하면

네트워크 호출을 줄일 수 있다!