[Tanstack Query] 4. 쿼리 리페치와 데이터 동기화

리페치

리페치는 이미 존재하는 쿼리의 데이터를 다시 가져오는 것을 의미한다.

invalidateQueries(): 쿼리를 무효화

refetch(): 즉시 데이터 다시 불러오기

1. 수동 데이터 갱신 : refetch()

useQuery의 refetch 메서드를 사용해 원하는 시점에 데이터를 갱신할 수 있다.

const { data, refetch } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
})
// 버튼 클릭 시 리페치 실행
const handleRefresh = () => {
  refetch()
}

2. 특정 조건에 데이터 가져오기 : enabled

useQuery는 일반적으로 마운트 될 때 자동으로 실행된다.

하지만 enabled옵션을 설정해 특정 조건에서만 실행 시킬 수 있다.

const isReady = ref(false)

const { data } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  enabled: isReady, // isReady가 true일 때만 실행
})
// 버튼 클릭 시 쿼리 활성화
const enableFetching = () => {
  isReady.value = true
}

3.  브라우저 포커스 시 자동 리페치 : refetchOnWindowFocus

refetchOnWindowFocus 옵션을 설정해 사용자가 브라우저 탭을 다시 활성화할 때 자동으로 데이터를 다시 가져온다.

다른 작업 후 복귀 시 최신 데이터를 보여줄 수 있다.

const { data } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  refetchOnWindowFocus: true, // 기본값: true
})

4. 일정 시간마다 데이터 새로고침 : refetchInterval

refetchInterval옵션을 설정하면 일정 주기마다 자동으로 데이터를 갱신할 수 있다.

그래서 실시간 데이터를 보여줄 때 유용하다.

const { data } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
  refetchInterval: 5000, // 5초마다 자동 리페치
})