[React-query] refetch와 invalidate의 차이

1. refetch와 invalidate의 차이

React Query에서 데이터 쿼리를 관리하는 두 가지 주요 방법은 refetch와 invalidate입니다. 이 둘은 쿼리 데이터를 갱신하는 방식에서 중요한 차이를 보입니다.

1. refetch는 강제로 데이터를 다시 가져오는 동작을 수행합니다. 즉, 호출되면 조건과 상관없이 데이터를 서버로부터 새로 불러옵니다.
2. 반면, invalidate는 쿼리 데이터를 "stale"으로 표시하고, 이 쿼리를 관찰하는 컴포넌트가 마운트될 때 데이터를 다시 가져오도록 합니다. 이렇게 하면 불필요한 네트워크 요청을 줄일 수 있습니다.

2. refetch의 특징

1. refetch는 사용자가 명시적으로 쿼리를 다시 실행하고자 할 때 유용합니다. 예를 들어, 사용자가 데이터를 최신 상태로 갱신하고 싶을 때 '새로 고침' 버튼을 클릭하면 refetch를 사용할 수 있습니다.
2. refetch는 enabled: false 상태인 쿼리도 실행할 수 있어서, 필요에 따라 쿼리를 실행할 수 있는 유연성을 제공합니다. (enabled는 useQuery의 옵션 값으로, 자동적으로 쿼리를 세팅하는지에 대한 값입니다!)

3. invalidate의 특징

1. invalidate는 데이터가 변경되었을 수 있음을 알리는 더 좋은 기능을 제공합니다. 데이터를 즉시 가져오지 않고, 데이터가 필요한 다음 시점까지 기다립니다. 이 방법은 특히 데이터 변경이 자주 발생하지 않거나 데이터를 최신 상태로 유지할 필요가 없는 경우 네트워크 트래픽을 줄이는 데 효과적입니다.
2. 대부분의 경우, invalidate는 데이터 변동이 발생한 후, (데이터를 수정하는 mutation 작업이 성공한 후) 호출됩니다.

4. 결론

1. refetch와 invalidate는 각각의 상황에 따라 유용합니다. refetch는 즉각적인 데이터 갱신이 필요할 때 확실하게 데이터를 최신 상태로 유지하는 반면, invalidate는 데이터 필요할 때 까지 기다리면서 비용을 효율적으로 사용할 수 있게 합니다.