useQuery()에서 리턴하는 객체를 살펴 보면 정말 많은 값들이 있다.
리액트 쿼리 공식 문서에서 제공하는 useQuery()페이지를 통해 값들을 확인할 수 있다.

리턴 값들 중 가장 많이 활용하는 것은 백엔드에서 받아 온 데이터가 있는 data와 그 데이터를 받아오는 과정에서 보게 되는 pending, error와 같은 status 관련 값들이다.
이런 status 값을 활용해 상황에 맞는 로딩과 에러 메시지를 보여줄 수 있다.

먼저 처음 데이터를 받아오는 과정이라 아직 데이터가 없는 상황에서는 query status가 pending이 된다.
useQuery의 리턴 값들 중에 현재 pending 상태인지 아닌지를 확인하는 isPending이라는 값이 있다.
isPending이 true인 상황에서는 로딩 중이라는 메시지를 보여주면 된다.
또한 쿼리 함수를 실행했던 중에 에러가 발생하면 쿼리가 error 상태로 인식된다.

예를 들어 쿼리 함수 내에서 의도적으로 에러를 발생시키면, error 값에서 설정한 에러 메시지를 볼 수 있다.

const {error, isError} = useQuery({
 queryKey: ['posts'],
 queryFn: async (key) =>{
  throw new Error('An error occurred!');
 },
})

 console.log(error);
 console.log(isError);

이렇게 에러가 발생하면 isError라는 값이 true가 된다.
isError라는 값이 true가 되면 적절한 에러 메시지를 보여주는 식으로 에러 처리를 구현할 수 있다.

로딩과 에러 처리 구현하기

isPending과 isError값을 이용해서 로딩과 에러 처리를 구현해보자.
해당 상황에서 적절한 메시지를 리턴하면 된다.
참고로 리액트 쿼리에서는 에러가 발생하면 기본적으로 3번의 재시도를 하는데, 테스트 할 때는 retry횟수를 0으로 조정하면 에러 화면을 더 빨리 볼 수 있어 편하게 테스트 할 수 있다.

 function HomePage(){
  const {
   data: postData, 
   isPending,
   isError,
   } = useQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
    retry:0,
    });
    
    if(isPending) return '로딩 중입니다...';
    
    if(isError) return '에러가 발생했습니다.';
    
    const posts = postsData?.results ?? [];
    
    return(
     <div>
      <ul>
       {posts.map((post) =>(
        <li key={post.id}>
         {post.user.name} :{post.content}
         </li>
        ))}
        </ul>
        </div>
    );
    }

위의 코드를 실행하고, 크롬 개발자 도구의 네트워크 탭에서 네트워크 속도를 Slow 3G로 바꾸고 새로 고침해보면 다음과 같은 로딩 메시지를 볼 수 있다.

그리고 쿼리 함수에서 의도적으로 에러를 발생시켜 보면 에러 메시지를 볼 수 있다.

export async function getPosts(){
 const response = await fetch(`${BASE_URL}/posts`);
 throw new Error('An error occurred!');
 
}