useQuery

 

useQuery ?

• API연동에 특화된 라이브러리로 Hook을 기반으로 데이터 로딩을 편하게 구현하도록 도와줍니다.
• 반환 값을 활용하여 성공, 실패 처리가 가능합니다. ( isFetching, isLoading, error, state 등 )

 

Status

• isLoading : 현재 데이터 요청 중
• isError : 오류 발생
• isSuccess : 데이터 요청 성공
• data : 요청 성공한 데이터
• refetch : 다시 요청을 시작하는 함수

const Ex = () => {
  const result = useQuery('posts', postData);
  const { data, error, isLoading } = result;

  if (isLoading) return <>Loading...</>;
  if (error) return alert(Error!);

  return <Container>{data}</Container>
}

 

 

Option

• staleTime
  
  • fresh -> stale 까지의 시간
  • fresh : 데이터 fetch가 막 이루어진 상태
  • stale : not fresh. 오래된 데이터이므로 업데이트가 필요함.
  • fresh 상태에서 unmount 이후 다시 mount 되어도 fetch 하지 않고 fresh 데이터 사용
  • 기본 값은 0, 0 ~ Infinity까지 설정 가능
• cacheTime
  • stale 상태의 데이터가 unmount 된 이후 캐시 데이터가 메모리에 남아있는 시간
  • 시간이 지나면 캐시 데이터는 GC가 수집함
  • 그 전에 다시 mount 된다면 fetch 되는 동안에는 캐시된 데이터 사용
  • 기본 값은 5분, 0 ~ Infinity까지 설정 가능
• refetchOnMount ( boolean | "always" )
  • stale 일 때 마운트 시 refetch 실행 여부
  • 기본 값은 true.
  • always 일 경우 fresh 상태에서도 refetch 한다.
• retry (boolean | number )
  • 쿼리가 실패했을 때 재시도하는 옵션
  • true : 계속 재시도
  • false : 재시도 X
  • number : 그 수 만큼 재시도
  • 기본 값은 3
• enabled
  • true인 경우만 쿼리 실행

const Ex = () => {
  const result = useQuery('posts', postData, { 
    //Options
    enabled: true,
    refetchOnMount: true,
  });
);