[Next.js] Tanstack-Query 커스텀 훅으로 관리하기

1. 서버 통신 함수 작성 (mutateFn으로 들어갈 함수)

export const addScrap = async ({
  userId,
  recipeId
}: {
  userId: string | undefined;
  recipeId: string;
}) => {
  const { error } = await supabase
    .from("scrap")
    .insert([{ user_id: userId, recipe_id: recipeId }]);

  if (error) {
    console.error("스크랩 추가 에러 => ", error);
    return alert("스크랩을 추가하는 동안 오류가 발생했습니다.");
  }
};

 

2. mutate 생성

export const useAddScrapMutation = () => {
  const queryClient = useQueryClient();
  const addScrapMutation = useMutation({
    // addScrapMutation을 호출하는 부분에서 addScrap 함수가 필요로하는 인자를 전달해주면 타입 에러가 나지 않는다.
    mutationFn: addScrap,
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: [QueryKeys.SCRAP]
      });
    }
  });

  return addScrapMutation;
};

 

3.import 및 사용

  const addScrapMutation = useAddScrapMutation();

      try {
        addScrapMutation.mutate({ userId, recipeId });
      } catch (error) {
        alert("일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
      }