[7/22] React Query - useQuery

useQuery

- React Query에서 제공하는 훅

- 비동기 데이터를 가져오고 그 상태를 관리하는 역할

const { data, error, isLoading } = useQuery<WeatherData>){
	queryKey: ['weatherData'],
    queryFn: fetchWeather
});

queryKey: ['weatherData']

• 이 쿼리를 고유 식별 키
• 이 키를 기준으로 캐시르 저장하고 관리
• 키가 같으면 캐시를 재사용하고, 다르면 새로 요청함
• 배열로 만드는 이유: 여러 조건을 함께 키로 만들 수 있기 때문

queryKey: ['weatherData', city] // city가 바뀌면 refetch 됨

queryFn: fetchWeather

• 데이터를 실제로 가져오는 비동기 함수
• useQuery가 내부적으로 호출함
• 실패하면 자동으로 에러로 간주되고, 성공하면 data에 결과가 담김

const fetchWeather = async (): Promise<WeatherData> => {
	const { data } = await axios.get(url);
    reuturn data;
}

 

const { data, error, isLoading, refetch } = useQuery({
	queryKey: ['weatherData', cityName],
    queryFn: () => fetchWeather(cityName),
    staleTime: 1000 * 60 * 5, // 데이터 신선도 유지 시간
    cacheTime: 1000 * 60 * 10, // 데이터 캐시 유지 시간
    enabled: !!cityName, // 조건이 참일 때만 실행
    retry: 2, // 실패 시 재시도 횟수
    refetchOnWindowFocus: false, // 탭 포커스시 자동 재요청 여부 
});

staleTime: 데이터가 신선하다고 여겨지는 시간

• 기본값: 0 (즉시 stale 처리됨)
• staleTime 동안은 자동 refetch를 막아줌
• 위는 5분 동안은 fresh 상태
• 캐싱된 데이터가 있고 아직 fresh하다면, 네트워크 요청 없이 바로 보여줌

cacheTime: 데이터가 메모리에 유지되는 시간

• 기본값: 5분
• staleTime가 달리, 컴포넌트가 언마운트되어도 캐시를 메모리에 보존할지 결정함
• 위는 10분 동안 캐시 유지
• 10분 내 다시 같은 쿼리가 실행되면 네트워크 요청 없이 재사용 가능

enabled: 조건부 쿼리 실행

• 기본값: true
• false로 설정하면 초기에는 쿼리가 실행되지 않음
• 유저 입력이 있을 때만 요청하고 싶을 때 사용 

retry: 실패 시 재시도 횟수

• 기본값: 3
• retry: false로 설정하면 실패 시 재시도 안 함

refetchOnWindowFocus: 탭이 다시 포커스될 때 자동으로 refetch

• 기본값: true
• 일반적으로 사용자 경험을 위해 false로 꺼두는 경우 많음

refetch() 수동 재요청

const { data, refetch } = useQuery(...);

<button onClick={() => refetch()}>새로고침</button>

• refetch()를 호출하면, 수동으로 데이터를 다시 가져옴
• enabled: false인 경우에도 수동으로 호출 가능함

select 옵션: 데이터 가공 후 리턴

useQuery({
	queryKey: ['user'],
    queryFn: fetchUser,
    select: data => data.name, // 가공해서 name만 추출
})

• 데이터에서 필요한 부분만 반환하도록 가공할 수 있음
• 이때 반환된 데이터가 data로 들어옴

실시간 갱신: refetchInterval

useQuery({
	queryKey: ['stock'],
    queryFn: fetchStockPrice,
    refetchInterval: 10000 // 10초마다 자동 refetch
});

• 자동 갱신 기능. 주기적으로 데이터를 새로 요청함
• refetchIntervalInBackground 옵션과 함께 쓰면 백그라운드에서도 갱신 가능