[react-query] 2. react-query의 status

리액트 쿼리에는 두 가지 status가 있다.

1. query-status
   1. 실제로 받아온 data값이 있는지 없는지를 나타내는 상태값
   2. useQuery()결괏값의 status값을 통해 확인 가능 
2. fetch-status
   1. queryFn함수가 현재 실행되는 중인지 아닌지를 나타내는 값
   2. fetch-status값을 통해 확인할 수 있다. 

1.QueryStatus

 

query-status 는 세 가지 상태값을 가진다.

1. success
   1. 데이터를 성공적으로 받아왔을때 
2. pending
   1. 아직 데이터를 받아오지 못했을때  
3. error
   1. 데이터를 받아오는 중 에러가 발생했을 때 

이 세 가지의 상태값들은 useQuery의 리턴값인 isSuccess, isPending, isError와 매칭되며 이 값들을 이용해 현재 쿼리의 상태를 알 수 있다. 

 

const Home = () => {
  const result = useQuery({
    queryKey: ["getposts"],
    queryFn: getPosts,
  });
  console.log(result)
  return <div>Home</div>;
};

export default Home;

 

useQuery의 결과값인 result를 확인해보면 

 

 2개의 결괏값이 출력되는데  첫번째 결괏값은 ispending이 true고 status값이 pending상태이고 

두번재 결괏값은  ispending이 false고 status값이 success상태인 것을 확인할 수 있다. 

이유는 처음 컴포넌트가 마운트 되고 useQuery가 실행되면서 데이터를 받아오기 전이므로 pending상태가 되고 그 후에는 성공적으로 데이터를 받아오기 때문에 success로 바뀐 것. success인 결괏값에서 받아온 실제 데이터들을 확인할 수 있다. 

 

2.fetchStatus

 

useQuery를 사용할 때 쿼리 함수를 queryFn으로 등록했는데 queryFn의 상태를 말해주는 값으로 fetch-status도 총 3가지의 상태값을 가진다

1. fetching
   1. queryFn이 실행되는 중일 때 
2. paused
   1. queryFn이 시작은 했는데 실제로 실행되고 있지 않는 상태
   2. 대표적으로 네트워크가 오프라인이 된 경우 
3. idle
   1. queryFn이 어떤 작업도 하고 있지 않은 상황, fetching도 paused도 아닌 상태
   2. refetch가 발생하면 다시 fetching상태로 돌아간다.