생성, 수정, 삭제 mutate

mutate에 이름을 붙일 수 있다.
평소에는 아래와 같이 한 페이지에서 mutate를 한번만 썼었다.

component.js

const { mutate } = useAddService();

serviceHooks.js

export const useAddService = () => {
	const queryClient = useQueryClient();
	return useMutation(({ token, data }: addServiceParams) => addService(token, data), {
		onSuccess: (newPost) => {
			alert('서비스 추가 성공');
			return queryClient.invalidateQueries(ServiceKeysEnum.ServiceList);
		},
		onError: () => {
			console.log('서비스 추가실패');
		},
	});
};

그런데 이번에 생성, 수정, 삭제 3개를 모두 mutate를 써야 해서 어떻게 하나 고민했다.

알고 보니 mutate에 이름을 붙일 수 있었다.

const { mutate: addService } = useAddService();
const { mutate: updateService } = useUpdateService();
const { mutate: deleteService } = useDeleteService();

그래서, 동작이 필요할 때 updateService() 이런식으로 사용 했다.