React Query - isPending vs isFetching

React Query - isPending vs isFetching

React Query에서 isPending과 isFetching의 차이점을 알아보고, 각각 어떤 상황에서 사용하면 좋은지 살펴보겠습니다.

isPending

• 초기 로딩 상태를 나타냄
• 캐시된 데이터가 전혀 없을 때 true
• 첫 번째 데이터 페치가 진행 중일 때 사용

  queryKey: ['todos'], 
  queryFn: fetchTodos 
});

if (isPending) {
  return <div>Loading...</div>;
}

isFetching

• 모든 로딩 상태를 나타냄
• 백그라운드 리페칭 포함
• 캐시된 데이터가 있더라도 새로운 데이터를 가져오는 중이면 true

  queryKey: ['todos'], 
  queryFn: fetchTodos 
});

{isFetching && <div>데이터 업데이트 중...</div>}

## 뮤테이션의 경우
뮤테이션에서는 `isPending`을 사용하는 것이 더 적절합니다:

``` export const useArticleMutations = ({
  token,
  queryKey,
}: UseArticleMutationsProps) => {
  if (token) {
    const favoriteArticle = useMutation({...});
    const unfavoriteArticle = useMutation({...});

    return {
      favoriteArticle,
      unfavoriteArticle,
      isPending: favoriteArticle.isPending || unfavoriteArticle.isPending
    };
  }
};

이유:

1. 뮤테이션은 캐시 개념이 없음
2. 항상 새로운 요청을 보내는 작업
3. 백그라운드 리페칭 같은 개념이 없음