[TIL][24.01.18] zustand 작업, query hooks로 빼기

개요

기존 query와 zustand 둘 다 익숙치 않아서 조금은 직관적인 zustand로만 작업을 이어왔다.

기능 개발이 어느정도 마무리되고 리팩토링하면서 코드개선에 들어갔다.

import { addCategory, removeCategory, updateCategoryName } from '@/server/api/supabase/menu-category';
import { useMutation, useQueryClient } from '@tanstack/react-query';

const enum QUERY_KEY {
  MENU_CATEGORY = 'menu-category',
}

export const useSetCategories = () => {
  const queryClient = useQueryClient();

  const addMutate = useMutation({
    mutationFn: addCategory,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MENU_CATEGORY] });
    },
    onError: error => {
      console.error(error);
    },
  });

  const updateNameMutate = useMutation({
    mutationFn: updateCategoryName,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MENU_CATEGORY] });
    },
  });

  const deleteMutate = useMutation({
    mutationFn: removeCategory,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: [QUERY_KEY.MENU_CATEGORY] });
    },
  });

  return {
    addMutate: addMutate.mutate,
    updateNameMutate: updateNameMutate.mutate,
    deleteMutate: deleteMutate.mutate,
  };
};

export default useSetCategories;