[React] refetch()와 invalidateQueries의 차이

👋🏻 Intro

프로젝트 내에서 tanstack query를 사용하면 API 요청 시,
다양한 속성을 통해 데이터 관리 전략을 효율적으로 세울 수 있다.

처음에는 단순히 팀원들이 사용해서 따라 사용했던 라이브러리지만, 현재는 해당 라이브러리를 어떻게 사용하냐가 코드의 완성도를 높일 수 있다는 것도 차츰 알아가고 있는 것 같다.

그러다 문득, 나는 어떤 경우에 각각 refetch와 invalidateQueries가 헷갈려 하는 것일까...🤔 하는 생각이 들어 이번 기회에 정리해보려 한다.

우선 refetch()는 기존 데이터가 바뀌지 않으면 API 요청을 하지 않고, 기존의 캐시된 데이터를 사용한다.
하지만 invalidateQueries()는 데이터의 변함과 관계없이 무조건 API 요청을 수행한다.

즉, refetch()는 캐시된 데이터를 사용할 수도 있지만,
invalidateQueries()는 무조건 새 데이터를 가져온다는 것이다.

refetch()

데이터가 바뀌지 않으면 API 요청을 생략하고, 캐시된 데이터를 사용한다.

그래서 이는 데이터를 다시 불러옴에도 불구하고, 화면 깜빡임(flickering)이 없이 부드럽게 업데이트 되는 것과 같이 느껴질 수 있다.

invalidateQueries()

무조건 새로운 API 요청을 해서 기존 캐시 데이터를 무효화한다.

기존의 캐시 데이터를 날려버리기 때문에, API 요청으로 항상 신선한 데이터를 가져오게 된다.

사용 예시

그렇다면 이제 각 함수는 어떤 경우에 써야 하는지🤔가 궁금해질 것이다!

get과 같이 요청을 성공한 이후,
데이터가 매번 바뀌지 않는 경우는 refetch를 해당 컴포넌트 내에서 사용할 수 있다.

하지만 post, put, delete와 같이 서버에 데이터 변경을 요청하는 경우(mutation)는
무조건 invalidateQueries()를 사용해야 한다. (신선한 데이터를 필요로 하는 경우이기 때문에!)

const queryClient = useQueryClient();

const deleteUser = useMutation({
  mutationFn: (id: number) => axios.delete(`/api/users/${id}`),
  onSuccess: () => {
    // 요청에 성공하면 쿼리 키를 통해 데이터를 갱신한다.
    queryClient.invalidateQueries({ queryKey: ['users'] });
  },
});

그리고 refetch()는 현재 컴포넌트의 쿼리만 갱신할 뿐, 다른 컴포넌트에서 같은 데이터를 갱신할 수 없다.
invalidateQueries()는 queryKey를 사용해서 해당 쿼리키를 사용하는 모든 곳에서 데이터를 갱신할 수 있다.

🫡 정리

refetch() = "지금 이 useQuery() 하나만, 조용히 새로 한 번만 불러와줘!"
invalidateQueries() = "이 queryKey에 해당하는 모든 데이터, 다 새로 가져와!"