[RQ(17)]다른 useMutation 속성

이유정·2024년 4월 14일
0

React-Query

목록 보기
14/30

지난 강의


Posts 컴포넌트에서 useMutation을 호출하고 반환 값을,

PostDetail 컴포넌트로 전달했음.

PostDetail 컴포넌트 내에서, 그 반환값의 mutate 속성을 실행함.

이번 시간

  • 로딩과 에러

로딩과 에러


useMutation의 반환값의 속성이 useQuery에 비해 적음.

  • useMutation이 덜 복잡하기 때문임.
  • 캐시 data가 없고,
  • 다시 가져올 data도 없고 ,
  • stale 시간도 없음.
    -isLoadingisFetching 구분도 없음. => isPending만 있음.
    • cache가 없기 때문임.
    • isLoading과 isFetching의 유일한 차이점이 캐시 유무임.

삭제 후에는 변이의 상태에 따라 조건부로 표시될 문단과 문장을 만들 것임/ !

  • isPending을 이용했다.
  • isError을 이용했다.


useQuery에서는 data 자체가 성공의 표시였어서 success 상태를 사용하지 않았다.
하지만, 이 PostDetail 페이지에서는 데이터를 안받음.
그러니, isSuccess 를 사용하겠음!

가기전에, 이 변이를 왜 Post 파일에는 넣고, PostDetail 파일에는 넣지 않았는지 이유에 대해서 말해보자.
그리고, 이 백락에서 변이를 reset 하는 이유에 대해 말해보자.


다른 Post를 불러올 때, 모든 post에 성공 message가 나오는 중 .
우리는 delete 버튼을 누를 때만 성공 메세지가 뜨게 할 것이야.

=> 다른 post를 클릭할 때마다 그 성공메시지 관련 mutation을 reset 해야함.


이런식으로 ~!

이제 성공 메시지 안보임

delete 버튼 누를 때만 보임 !

profile
강의 기록 블로그

0개의 댓글