[ReactQuery(6)]로딩 상태와 에러 상태 처리하기

useQuery에서 반환되는 객체의 다른 속성들을 알아보자

isLoading, isError

isLoading, isError

• 데이터 로딩중이나 에러 발생 여부를 알려주는 boolean 값

isFetching vs isLoading

isFetching: 비동기 쿼리가 아직 해결되지 않았다는 것

• 아직 fetch가 완료되지 않았지만, axios 호출이나 graphql 호출 같은 다른 종류의 데이터를 가져오는 작업일 수 있다.

isLoading : isFetching의 하위 집합으로, 로딩 중이라는 것

• 쿼리 함수가 아직 미해결이지만, 캐시된 데이터도 없다.
• 이 쿼리를 전에 실행한적이 없어서 data를 가져오는 중이고, 캐시된 데이터도 없어서 보여줄 수 없다.

페이지네이션때 캐시된 데이터가 있는지 업는지 구분하는 것이 중요하다.

isError

만약 쿼리 함수를 통해 fetchPosts에서 에러가 발생했다면 데이터가 없다.
데이터는 undefined
그래서 일찍 반환하고 싶음.

일부로 error 발생하게 설정한 후,
새로고침 해보자.

시스템이 posts 즉, 쿼리 함수를 여러번 시도하고 있다.
이건 설정할 수 있지만, 기본적으로 리액트쿼리는 세번 시도 후 데이터를 가져올 수 없다고 판단한다 !

더 자세히 에러를 알 수도 있다.

에러가 있다고 판단되면 발생한 에러 객체를 보여준다.

• 사용자에게 알리거나 로그를 보낼 수 있다.