RQ - 22. Query invalidation

해당 강의를 참고했습니다.

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번의 네트워크 요청이 발생하긴 하지만, 간단하게 클라이언트 화면을 업데이트 시킬 수 있다.