Published on

refetch vs invalidateQueries

Authors
  • avatar
    Name
    윤영서
    Twitter

Tanstack Query(구 React Query)를 사용하다 보면 데이터를 새로 가져와야 하는 상황이 자주 발생합니다. 특히 목록 등의 데이터에서 POST, PUT, DELETE 등의 요청으로 데이터 변경이 있을 때 이런 필요성이 더욱 두드러집니다. 이런 경우 주로 사용되는 두 가지 방법이 refetch와 invalidateQueries입니다.

이 두 메서드는 언뜻 보기에 비슷한 기능을 수행하는 것 같지만, 실제로는 중요한 차이점들이 있습니다. 이 글에서는 두 메서드를 자세히 비교하고, 각각의 사용 사례를 살펴보겠습니다.

refetch

refetch는 이름에서도 알 수 있겠지만, 특정 쿼리를 다시 실행하는 메서드입니다. 이 메서드는 쿼리의 데이터를 강제로 새로고침하며, 호출 즉시 쿼리를 재실행합니다.

✏️ 주요 특징

  1. 즉시 실행: refetch를 호출하면 해당 쿼리가 즉시 다시 실행됩니다.
  2. 쿼리 상태 유지: 쿼리의 상태(fresh/stale)를 변경하지 않습니다. 쿼리가 이미 fresh 상태라면 그대로 유지됩니다.
  3. 특정 쿼리 대상: 특정 쿼리 인스턴스에 대해서만 작동합니다.
  4. 옵저버 독립적: 활성 옵저버(active observer)의 유무와 관계없이 항상 새 데이터를 가져옵니다.

refetch는 즉각적인 데이터 갱신이 가능하므로 사용자의 액션에 즉시 반응해야 할 때 유용합니다. 그러나 활성 옵저버 유무와 상관없이 항상 새 데이터를 가져오므로 불필요한 네트워크 요청을 발생시킬 수 있고, 여러 관련된 쿼리를 한 번에 갱신할 수 없습니다.

invalidateQueries

invalidateQueries는 하나 이상의 쿼리를 '무효화'하는 메서드입니다. 이 메서드는 쿼리를 'stale'(오래된) 상태로 표시하고, 특정 조건에서 자동으로 리페치를 트리거합니다.

✏️주요 특징

  1. 지연 실행: 쿼리를 즉시 리페치하지 않고, 다음에 해당 쿼리가 사용될 때 리페치합니다.
  2. 쿼리 상태 변경: 쿼리를 무조건 stale 상태로 만듭니다.
  3. 다중 쿼리 대상: 여러 쿼리를 한 번에 무효화할 수 있습니다.
  4. 옵저버 의존적: 활성 옵저버가 있는 경우에는 즉시 리페치가 트리거되고, 활성 옵저버가 없는 경우에는 다음 옵저버가 마운트될 때 리페치가 트리거 됩니다.

invalidateQueries는 여러 관련 쿼리를 효율적으로 관리할 수 있고, 불필요한 네트워크 요청을 줄일 수 있습니다. 또한 더 유연한 데이터 갱신 전략을 구현할 수 있습니다.

어떤 것을 선택해야 할까?

그렇다면 어떤 것을 선택해야 할까요? 만약 즉각적인 데이터 갱신이 필요한 경우라면, refetch를 사용하는 것이 좋습니다. invalidateQueries는 쿼리를 무효화하고 다음에 사용될 때 리페치하기 때문에, 즉각적인 갱신이 필요한 경우에는 적합하지 않습니다.

관련된 여러 쿼리를 갱신해야 하는 경우라면 invalidateQueries를 사용하는 것이 좋습니다. invalidateQueries를 사용하면 관련된 여러 쿼리를 한 번에 무효화할 수 있습니다. 이 쿼리들은 다음번에 사용될 때 자동으로 리페치됩니다.

조건부 리페치의 경우에는 invalidateQueries와 enabled 옵션을 조합하여 사용할 수 있습니다. Disabling/Pausing Queries 공식 문서에는 'When enabled is false : The query will ignore query client invalidateQueries and refetchQueries calls that would normally result in the query refetching.'이라고 언급되어 있는데, 이는 enabled: false 옵션을 주면 queryClient가 쿼리를 다시 가져오는 방법 중 invalidateQueries와 refetchQueries를 무시한다.는 뜻입니다. 위를 이용하여 조건부 리페치를 구현할 수 있습니다. 반면 refetch의 경우에는 enabled 옵션을 무시합니다.

✏️ 출처

https://tanstack.com/query/v5/docs/framework/react/guides/disabling-queries
https://github.com/TanStack/query/discussions/2468

Discuss on Twitter • View on GitHub