(리액트 쿼리v3) 문서 - useQuery

useQuery 훅

useQuery 사용

• const {isLoading, data} = useQuery("allMovies", fetchMovies);
• useQuery("쿼리key", fetcher함수) 는 fetcher를 가져오고 fetcher 가 로딩중에는 isLoading가 true (data는 undefined), fetcher 가 로딩이 끝나면 false로 변경된다.
• fetcher 가 끝나면 fetcher의 json리턴을 data 에 저장한다.
• key 값은 유일해야 한다. key 값으로 캐시에 저장하고 불러와야 하기 때문
• fetcher (쿼리함수)가 변수에 의존한다면 그 변수를 쿼리키에 넣어줘야 한다

 function Todos({ todoId }) {
   const result = useQuery(['todos', todoId], () => fetchTodoById(todoId))
 }

useQuery 훅이 리턴하는 값들 (몇 가지만 추렸음)

옵션명	타입	default	설명
status	string		"idle", "loading", "error", "success" 상태가 있다.
data	TData	undefined	쿼리를 성공한 resolved data
dataUpdatedAt	number		status==="success"로 가장최근 업데이트 된 쿼리의 타임스탬프
error	null | TError	null	쿼리에 대한 에러오브젝트
errorUpdatedAt	number		status==="error"로 가장최근 업데이트 된 쿼리의 타임스탬프
failureCount	number	0	쿼리가 실패한 횟수
isError	boolean		status==="error" 의 값
isFetched	boolean		쿼리가 패치된 이후인지 여부
isFetching	boolean		쿼리가 패칭 도중인지 여부(백그라운드 패칭과 현재 패칭 둘다 포함)
isRefetching	boolean		isFetching && !isLoading 과 같은 의미
isIdle	boolean		status==="idle" 의 값
isLoading	boolean		status==="loading" 의 값
isLoadingError	boolean		true면 첫번째 패칭 도중 실패 했음을 의미
isPlaceholderData	boolean		보여지는 data가 placeholder data인지 여부
isPreviousData	boolean		keepPreviousData가 켜졌을 때, 데이터가 이전 쿼리로 리턴된 데이터인지 여부
isRefetchError	boolean		리패칭도중에 에러가 발생했을 경우
isStale	boolean		캐시에 있는 데이터가 invalid거나 staleTime 으로 설정된 값보다 오래된 데이터인지 여부
isSuccess	boolean		status==="success" 의 값
refetch	(options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise		매뉴얼적으로 쿼리를 리패치 하는 함수 throwOnError: 쿼리 에러시 에러는 기록에만 남는다. 하지만 이 에러를 throw 하고 싶으면 켜라 cancelRefetch: 이게 true가 되면, 현재 요청된 request가 새로운 request가 만들어지기 전에 캔슬된다.
remove	()=>void		캐시에서 쿼리를 삭제해주는 함수

useQuery 훅의 두번째 인자 : fetcher 함수

• 리액트쿼리를 쓸려면 우선 fetcher 함수를 만들어야 한다.
• API 와 관련된 것들은 따로 모듈화 해서 컴포넌트들과 멀리 떨어져 있도록 하자 (컴포넌트가 fetch 하지 않도록) (권장)
• 중요: fetcher 함수는 fetch promise (json date의 Promise)를 리턴해야 한다!

// ./src/api.ts
export function fetchCoins() {
  return fetch("https://api.coinpaprika.com/v1/coins").then((response) =>
    response.json()
  );
}

useQuery 훅의 세번째 인자 : option object

• useQuery("쿼리key", fetcher, {...options} )
• 세번째 Object 는 넣어도 되고 안넣어도 된다.

옵션명	타입	default	설명
refetchInterval	number | false | ((data: TData | undefined, query: Query) => number | false)		숫자(ms)를 넣으면 주기마다 리패치,함수를 넣으면 주기를 계산해서 리턴
staleTime	number | Infinity	0	시간(ms)이 지나면 데이터를 stale 상태로 바꾼다
cacheTime	number | Infinity	5 * 60 * 1000	시간(ms)지나면 비활성화된 캐시 데이터가 메모리에서 사라짐
retryDelay	number | (retryAttempt: number, error: TError) => number		숫자 및 리턴값은 재시도주기, retryAttempt 는 재시도 횟수(지수적으로 주기를 늘릴수 있음)
retryOnMount	number | (retryAttempt: number, error: TError) => number	true	false면 에러시 마운트에 쿼리를 재시도 하지 않음
retry	boolean | number | (failureCount: number, error: TError) => boolean	false	실패시 재시도 할지 여부
onSuccess	(data: TData) => void		새로운 데이터를 패치하거나 setQueryData로 캐시가 업데이트시 작동할 함수
onError	(error: TError) => void		에러 발생시 작동할 함수
onSettled	(data?: TData, error?: TError) => void		쿼리 결과에 상관없이 종료하면 작동할 함수
select	(data: TData) => unknown		쿼리함수가 리턴한 데이터를 변경하거나 선택할때 사용할 함수
suspense	boolean		true면, useQuery 가 status==='loading' 이면 연기되고, status==='error' 면 런타임 에러를 던짐
initialData	TData | () => TData		초기 캐시 데이터 설정(stale 상태로 간주된다)
keepPreviousData	boolean	false	쿼리키 변경으로 패치가 되는 동안 이전 데이터가 유지된다.
refetchOnWindowFocus	boolean | "always" | ((query: Query) => boolean | "always")	true	true면 데이터가 stale일때 윈도우 포커스만으로 refetch한다. 'always'면 stale 여부 따지지 않고 윈도우 포커스로 refetch한다.
refetchOnMount	boolean | "always" | ((query: Query) => boolean | "always")	true	true면 데이터가 stale일때 마운트할때마다 refetch한다.
queryKeyHashFn	(queryKey: QueryKey) => string		이 함수는 쿼리키를 문자열로 해싱한다
enable	boolean	true	자동으로 쿼리를 실행하는 기능의 on/off 여부