[React Query] useQuery의 isLoading과 isError

💻 useQuery

데이터가 로딩 중인지 여부와 데이터를 가져올때 오류가 있는지를 가르쳐준다.

🖤 isLoading와 isFetching

• isFetching: 어떠한 react-query요청 내부의 비동기 함수가 처리되었는지 여부에 따라 true/false로 나누어 진다.
• isLoading: 캐시된 데이터조차 없이, 처음실행된 쿼리일때 로딩여부에 따라 true/false로 나누어 진다.
  즉 결론적으로 isLoading과 isFetching은 비슷하게 로딩이라는 개념을 사용하지만 기존에 캐시된 데이터가 있냐없냐에 따라 다르며, 어떤 데이터를 처음 가져올 때는 isLoading를, 데이터를 다시 가져와야 할 때는 isFetching를 사용할 수 있다.
• isLoading: 서버에 데이터 요청을 처음 할 때
• isFetching: 서버에 데이터 요청을 다시 할 때 (캐시된 데이터가 있을 때)

캐시된 데이터: 캐시는 컴퓨터내부의 임시저장공간으로, 사이트 방문 시 다운로드한 파일들이 캐시에 저장된다. 캐시를 사용하면 재방문시 시스템이 모든 정보를 다시 로드하지 않아도 된다.
흩어진 데이터를 모아 의미 있는 데이터로 새로 탄생시키는 작업을 데이터 패칭이라고 한다.

✔ isLoading 적용

const { data, isLoading } = useQuery("posts", fetchPosts);
    // 우리가 매핑하는 데이터는 fetchPosts에서 반환된 데이터가 되고 바로 이 HTTP요청에서 반환된 JSON이 된다.
 if (isLoading) return <h3>Loading...</h3>;

• 결과
  
  데이터를 받기전까지 Loading...가 출력되는것을 확인할 수 있다.

🖤 isError

해당쿼리함수에서 오류가 발생하면 데이터를 얻지 못하고 데이터가 정의되지 않았으므로 조기 반환이 필요하다. react-query는 기본적으로 데이터 요청을 3번시도한 뒤 에러 결정을 내린다.

✔ 적용

    const { data, isError, isLoading } = useQuery("posts", fetchPosts);
    if (isError) return <h3>ERROR!!</h3>;

• 결과
  
  데이터 요청 시도하는 동안 로딩중으로 표시되고 이후 에러메시지가 표시된다.

✔ error

isError처럼 불리언으로 반환하는 것 외에 쿼리함수에서 전달하는 에러메시지를 반환할수있다.

    const { data, isError,error, isLoading } = useQuery("posts", fetchPosts);
    if (isError) return 
			<>
                <h3>ERROR!!</h3>
                <p>{error.toString()}</p>
            </>;

• 결과
  

참고자료
isLoading이랑 isFetching은 뭐가 다르지?