React Query의 옵션과 리턴 값

최종 수정일 : 2024-07-22

React Query의 옵션과 리턴 값

useQuery -TanStack Query 공식 문서

useQuery | TanStack Query React Docs

 

로딩과 에러 처리 구현하기

리액트 쿼리에서는 에러가 발생하면 기본적으로 3번의 재시도를 한다. 그러나, 테스트를 위해서는 retry 횟수를 0으로 조정하면 에러 화면을 더 발리 볼 수 있어 편하게 테스트할 수 있다.

function HomePage() {
  const {
    data: postsData,
    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>
  );
}

 

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

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