const { data, error, isLoading } = useQuery(['articles'], getArticles);
첫 번째 인자 - 조회하고 싶은 데이터의 캐시 키
이 캐시 키를 사용하여 데이터를 캐싱
한 번 데이터를 받아온 다음, 나중에 같은 요청을 해야 하는 상황에서
데이터가 이미 존재한다면 기존에 있던 데이터를 바로 보여줌
설정에 따라 데이터를 새로 요청도 가능
캐싱에 관한 설정도 따로 할 수 있음
캐싱 기간, 캐싱 비활성화 등을 세 번째 파라미터로 설정
두 번째 인자 - Promise를 반환하는 함수
이 컴포넌트가 렌더링 될 때 해당 함수를 호출
이에 대한 상태가 관리됨
* 반환값
status: API의 요청 상태를 문자열로 나타냄
- 'loading': 아직 데이터를 받아오지 않았고, 현재 데이터를 요청 중
- 'error': 오류 발생
- 'success': 데이터 요청 성공
- 'idle': 비활성화된 상태(따로 설정해 비활성화한 경우)
isLoading: status === 'loading'
isError: status === 'error'
isSuccess: status === 'success'
isIdle: status === 'idle'
error: 오류가 발생했을 때 오류 정보
data: 요청 성공한 데이터
isFetching: 데이터가 요청 중일 때 true가 됨
(데이터가 이미 존재하는 상태에서 재요청할 때
isLoading은 false, isFetching은 true)
refetch: 다시 요청을 시작하는 함수
요청의 결과물이 특정 변수에 따라 달라진다면 꼭 캐시 키에 포함
세 번째 파라미터에 options 객체
enabled: boolean 타입의 값을 설정,
이 값이 false라면 컴포넌트가 마운트될 때
자동으로 요청하지 않음
refetch 함수로만 요청이 시작
retry: boolean | number | (failureCount: number, error: TError) => boolean
이 값을 true로 하면 실패했을 때 성공할 때까지 계속 반복 요청
이 값을 false로 하면 실패했을 때 재요청하지 않음
이 값을 3으로 하면 3번까지만 재요청
이 값을 함수 타입으로 설정하면 실패 횟수와 오류 타입에 따라
재요청할지 함수 내에서 결정
retryDelay: number | (retryAttempt: number, error: TError) => number
요청이 실패한 후 재요청할 때 지연 시간을 얼마나 가질지 설정
시간 단위는 ms
staleTime: 데이터의 유효 시간을 ms 단위로 설정, 기본 값은 0
cacheTime: 데이터의 캐시 시간을 ms 단위로 설정, 기본 값은 5
캐시 시간은 Hook을 사용하는 컴포넌트가 언마운트 되고 나서
해당 데이터를 얼마나 유지할지 결정
refetchInterval: false | number - n초마다 데이터를 새로 고침하도록 설정
refetchOnmount: boolean | 'always' 타입의 값을 설정
컴포넌트가 마운트될 때 재요청하는 방식을 설정
기본값은 true
- true일 때 는 데이터가 유효하지 않을 때 재요청
- false일 때는 컴포넌트가 다시 마운트되어도 재요청하지 않음
- 'always' 일 때는 데이터의 유효 여부와 관계 없이 무조건 재요청
onSuccess: (data: Data) => void 타입의 함수를 설정
데이터 요청이 성공하고 나서 특정 함수를 호출하고 싶을 때 사용
onError: (error: Error) => void 타입의 함수를 설정
데이터 요청이 실패하고 나서 특정 함수를 호출하고 싶을 때 사용
onSettled: (data?: Data, error?: Error) => void 타입의 함수
데이터 요청의 성공 여부와 관계 없이 요청이 끝나면 특정 함수를 호출하도록 설정
initialData: Data | () => Data
Hook에서 사용할 데이터의 초기값을 지정하고 싶을 때 사용