토이 3 프로젝트 작성한 코드 복기 (6) - tanstack-query 사용

 

지난 포스트인 https://vitamin3000.tistory.com/171에서 supabase에 접근하는 api 함수를 만들었다.

 

이번 포스트에서는 이 함수와 tanstack-query를 사용하여 서버 상태관리하는 방법에 대해 알아보고자 한다.

 

1. tanstack라이브러리 제공 함수와 만든 관련 api 함수를 import 한다

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { fetchCategories, deleteCategories } from '@/api/categories';
import { toastError, toastSuccess } from '@/utils/toast';

2. hook/useCategories.ts

hook으로 제작하기 때문에 앞에 use가 붙는다

const useCategories = (userId: string) => {
  const queryClient = useQueryClient();

  const categoriesQuery = useQuery({
    queryKey: ['categories', userId],
    queryFn: () => fetchCategories(userId),
    select: data =>
      data.map(category => ({
        ...category,
        updated_at: new Date(category.updated_at),
      })),
    enabled: !!userId,
  });

  const deleteCategoriesQuery = useMutation({
    mutationFn: (categoryId: string) => deleteCategories(categoryId),
    onSuccess: () => {
      toastSuccess('해당 카테고리가 삭제되었어요!');
      queryClient.invalidateQueries({ queryKey: ['categories'] });
    },
    onError: (error: Error) => {
      console.error('업로드 실패:', error);
      toastError('오류가 발생헜어요 ! 다시 시도해주세요');
    },
  });

  return {
    categoriesQuery,
    deleteCategoriesQuery,
  };
};

export { useCategories };

 

여기서 주의할 점은 queryKey는 중복되지 않는 값을 가져야하는 것이다.

그 이유는 tanstack-query에서 캐싱을 할 때 관련 queryKey를 참조하여 데이터를 비교 후에 값을 변경할지 말지를 결정하기 때문이다.

 

3. 필요한 컴포넌트에서 사용할 때는 fetchCategoires같은 api 보다 hook을 사용한다.

Hook을 사용하면 로딩 상태와 오류를 쉽게 관리할 수 있기 때문이다.