다양한 query 객체

useQuery를 이용하여 쿼리를 만들 때 다양한 내장 객체를 이용할 수 있다.
오늘 다룰 것들은 isFetching과 isLoading이다.
이들은 boolean값을 반환하는 객체로 다소 비슷해보여 조금 자세하게 정리하려 한다.

아래는 useQuery를 이용하여 isFetching과 isLoading을 사용하는 예시 코드이다.

const { data, isFetching, isLoading } = useQuery({
    queryKey: ["posts", currentPage],
    queryFn: () => fetchPosts(currentPage),
});

구조 분할을 이용하여 query 객체에서 isFetching과 isLoading을 명시하여 사용한다.

isFetching VS isLoading

• isFetching

  • 비동기 쿼리가 아직 해결되지 않았다는 것
  • 비동기 쿼리 함수가 아직 해결되지 않았을 때 true
    • 데이터를 아직 가져오고 있는 상태
  • 아직 fetch가 완료되지 않았지만, Axios 호출이나 GraphQL 호출 같은 다른 종류의 데이터를 가져오는 작업일 수 있다.

• isLoading

  • 비동기 쿼리가 실행되고 쿼리가 성공하기 전의 상황
  • isFetching이 true고 해당 쿼리에 대한 캐시된 데이터가 없는 상태일 때
  • 즉, 쿼리의 완료를 기다리는 상황
  • ex) 데이터 fetching 로직이 동작하고 데이터를 받아오기 이전의 상황

isLoading은 isFetching의 하위 집합!

Handling

데이터를 받아오기 전 상황을 핸들링할 때의 실제 코드를 이용해서 비교해보자.
먼저 isFetching을 사용했을 때이다.

  const { data, isError, error, isFetching } = useQuery({
    queryKey: ["posts", currentPage], 
    queryFn: () => fetchPosts(currentPage),
    staleTime: 2000, 
  });

  if (isFetching) {
    return <h3>Loading...</h3>;
  }

위 코드를 실행하고 데이터를 받아오면
캐시된 데이터가 있음에도 Loading...을 리턴한다.
이는 isFetching의 동작이 캐시된 데이터와는 무관하게 쿼리 함수가 실행 중이라면 true를 반환한다는 것을 알 수 있다.
하지만 이는 내가 바라는 동작이 아니다.
나는 캐시된 데이터가 있다면 그저 그 데이터를 사용하고 Loading... 문구는 캐시된 데이터가 없어 새로 데이터를 가져와야 할 때에만 등장하도록 하고싶다.

이번에는 isLoading을 이용해보자.

  const { data, isError, error, isLoading } = useQuery({
    queryKey: ["posts", currentPage], 
    queryFn: () => fetchPosts(currentPage),
    staleTime: 2000,
  });

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

isLoading을 사용하면 캐시된 데이터가 있다면 Loading... 없이 해당 캐시 데이터를 사용하고, 만약 캐시된 데이터가 없고 isFetching이 true라면 Loading... 문구를 띄운다.

즉, isLoading은 쿼리의 완료를 기다리는 상황이며 비동기 쿼리가 실행되고 쿼리가 성공하기 전의 상황이다.
때문에 캐시된 데이터가 있다면 해당 데이터를 이용하고 데이터를 새로 가져오는 상황에서 개발자의 의도대로 핸들링 할 수 있는 것이다.