useQuery

개념

• react에서 비동기 로직(서버 상태 가져오기, 캐싱, 동기화, 업데이트)을 쉽게 다루게 해주는 라이브러리.

const { data, isLoading, status, error, isFetching } = useQuery(queryKey, queryFunction, options)

• queryFunction에는 서버에 데이터를 요청하고 Promise 또는 에러를 반환하는 함수를 전달함.
• queryKey에는 문자열과 배열을 넣을 수 있음. queryKey의 유연성이 캐싱 처리를 도와주는 핵심 역할. queryKey의 조합에 따라 key가 다르면 캐싱도 별도 관리하기 때문.

반환값

• data : queryFunction이 반환한 Promise resolve 데이터.
• isLoading : 캐시된 데이터가 없는 상태에서 데이터를 요청중일 때 true.
• isFetching : 캐시 데이터 유무와 상관없이 데이터를 요청중일 때 true.

옵션

• cacheTime : 기본값은 5분으로, unused / inactive 캐시 데이터를 메모리에서 유지시킬 시간.
  • Infinity로 설정하면 쿼리 데이터가 캐시에서 제거되지 않음.
• staleTime : 기본값은 0으로, 쿼리 데이터가 fresh에서 stale로 전환되는데 걸리는 시간.
  • Infinity로 설정하면 쿼리 데이터는 직접 캐시를 무효화할 때까지 fresh 상태로 유지.
  • 캐시는 메모리에서 관리되므로 브라우저 새로고침 후에는 다시 가져옴.
• onSuccess : queryFunction이 성공적으로 데이터를 가져왔을 때 호출되는 함수.
• onError : queryFunction에서 오류가 발생했을 때 호출되는 함수.
• onSettled : queryFunction이 성공, 실패한 경우 모두 실행되는 함수.
• keepPreviousData : queryKey가 변경되어 새로운 데이터를 요청하는 동안에도 마지막 data값을 유지.
  • 페이지네이션을 구현할 때 유용함. 캐시되지 않은 페이지를 가져올 때 화면에서 viewing 컴포넌트가 사라지는 현상을 방지할 수 있다.
  • isPreviousData값으로 현재의 queryKey에 해당하는 값인지 확인할 수 있다.
• initialData : 캐시된 데이터가 없을 때 표시할 초기값. placeholder와는 달리 캐싱 가능. 브라우저 로컬 스토리지에 저장해 둔 값으로 데이터를 초기화할 때 사용할 수 있음.
• refetchOnWindowFocus : 윈도우가 다시 포커스되었을 때 데이터를 호출할 것인지 여부. 기본값은 true.

예시