🔗 Handling Error 기본 pattern

나머지 부분은 React-query / Fetching Data 와 동일하다.

1. results 를 destructuring 해서 isError 와 error 를 추가로 꺼내준다.

result => { isLoading, data, isError, error }

import { useQuery } from 'react-query';

2. 불러온 값을 활용해서 jsx 렌더링 하기

상태값이 에러면 아래의 에러메세지를 가져와서 보여주기
Request failed with status code 404

if (isError) {
  return <h2>{error.message}</h2>;
}

📄 code example

import { useQuery } from 'react-query'; // import data fetching Hook
import axios from 'axios';

export const RQSuperHeroesPage = () => {
  // Hook 불러오기 // 1. (unique key) 와 2. (promise 를 리턴하는 함수)를 인자로 받는다.
  // ex) 함수는 json server 로부터 get request 를 한다.
  // query hook 을 통해서 리턴된 query result 를 사용한다.
  // results 는 현재 query 에서 내가 필요로한 모든 것이 담겨있다.
  // results 안에서 내가 필요한 요소만 destructuring 한다. result => { isError, ..}
  // useQuery 의 두번째 인자에 inline 으로 data fetching 함수를 넣지 않고
  // 밖에서 선언하는 것(fetchSuperHeroes)이 react query 의 일반적인 pattern
  const fetchSuperHeroes = () => {
    return axios.get('http://localhost:5000/superheroes1');
  };

  const { isLoading, data, isError, error } = useQuery(
    'super-heroes',
    fetchSuperHeroes
  );

  if (isLoading) {
    return <h2>Loading...</h2>;
  }

  // 불러온 값을 활용해서 jsx 렌더링 하기
  if (isError) {
    return <h2>{error.message}</h2>;
  }

  return (
    <>
      <h2>React Query Super Heroes Page</h2>
      {data?.data.map((hero) => {
        return <div key={hero.name}>{hero.name}</div>;
      })}
    </>
  );
};

React Query Tutorial 참고하며 공부한 내용입니다.