react-query를 통해서 post 요청을 보내고, response 를 처리하는 방식이다. 이 방식은 post 요청이 성공했을 때, 바로 같은 key 가진 get 요청을 보냄으로써 서버와 클라이언트의 싱크를 일치시킨다. 그래서 network 요청이 2번 발생한다.useQueryClient
의 invalidateQueries
를 사용한다.
useAddCard.ts (hook)
// fetcher
const addCard = (cardInfo: TyCard) => {
return todoApi.addTodo(cardInfo);
};
// hook
export const useAddCard = () => {
const queryClient = useQueryClient();
return useMutation(addCard, {
onSuccess: () => {
queryClient.invalidateQueries("allTodos"); // allTodos의 키를 가진 api 바로 요청
},
});
};
만든 훅은 post 요청이 발동시킬 핸들러에서 사용한다.
const [card, setCard] = useState({ title: "", content: "" });
const { mutate } = useAddCard();
const onSubmitHandler = useCallback(
(e) => {
e.preventDefault();
mutate(card);
},
[card, mutate]
);
2번의 네트워크 요청이 발생하긴 하지만, 간단하게 클라이언트 화면을 업데이트 시킬 수 있다.