🖐️ TanStack Query에서 "다시 데이터를 요청하는" 5가지 방법

언제 어떤 걸 써야 하는지까지 알아보자! 🖐️ 🤓 🖐️

1. queryClient.invalidateQueries()

[ 가장 흔한 무효화 방식 ]

queryClient.invalidateQueries({ queryKey: ['mini'] });

• 해당 키의 staleTime을 무시하고, stale 상태로 만든다.
• 다음 렌더링 혹은 포커스 이벤트 시 자동으로 다시 refetch 된다.
• 지금 바로 다시 요청하지는 않는다! (중요한 차이점)

💡 실제로 refetch를 트리거하려면 refetchOnMount, refetchOnWindowFocus 옵션이 활성화되어 있어야 한다.

2. queryClient.refetchQueries()

[ 즉시 refetch ]

queryClient.refetchQueries({ queryKey: ['mini'] });

• 해당 queryKey를 즉시 다시 요청한다.
• stale 여부를 따지지 않고 바로 네트워크 요청을 보낸다.

invalidateQueries	refetchQueries
상태만 stale로, 게으른 요청	바로 요청, 즉시 요청

💡 즉각적인 UI 업데이트가 필요한 경우 refetchQueries를 쓰는 게 더 직관적이다.

3. useQuery().refetch()

[ 컴포넌트 내부에서 수동 refetch ]

const { data, refetch, isFetching } = useQuery({
  queryKey: ['mini'],
  queryFn: fetchMini,
});

<button onClick={() => refetch()}>다시 불러오기</button>

• 컴포넌트 안에서 트리거 가능한 가장 간단한 수동 방식
• 주로 버튼 클릭, 이벤트 핸들링 등과 함께 사용됨

💡 refetch()는 내부적으로 fetchQuery()를 호출한다.

4. queryClient.fetchQuery()

[ 쿼리를 강제로 다시 fetch ]

await queryClient.fetchQuery({ queryKey: ['mini'], queryFn: fetchMini });

• 캐시에 없으면 fetch, 있으면 stale 여부를 확인 후 fetch
• 필요 시 force: true 옵션으로 강제 fetch 가능

queryClient.fetchQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos,
  staleTime: 0,
  gcTime: 0,
});

💡 fetchQuery()는 주로 쿼리를 미리 캐시에 채우거나, 특정 시점에 명확히 데이터를 받아야 할 때 사용한다.

5. queryClient.setQueryData()

[ 서버 요청 없이 데이터 갱신 ]

queryClient.setQueryData(['mini'], (old) => [...old, newMini]);

• 네트워크 요청 없이 캐시만 갱신
• 낙관적 UI 업데이트 (Optimistic UI)에 유용

💡 이후 refetchQueries()로 새로고침을 트리거해줄 수도 있다.

🤓 정리

목적	메서드	특징
자동 stale 처리 + 리렌더링 시 refetch	invalidateQueries()	가장 많이 사용됨. 즉시 요청은 아님
즉시 다시 fetch	refetchQueries()	강제 fetch, 지금 바로 요청
컴포넌트 안에서 수동 요청	useQuery().refetch()	버튼 클릭 등에서 사용
명확히 fetch 시점 제어	fetchQuery()	쿼리 prefetch, SSR, 미리 캐시 등
서버 없이 캐시만 수정	setQueryData()	Optimistic update 등