# useMutation

아직도 React-Query를 안쓴다고??
두 번째 글이다.암튼, 프로젝트를 하면서 React-Query를 사용하여 개발하게 되었다.처음에 React-Query를 사용할 때는 이해가 잘 되지 않았지만 계속 쓰다보니 더 이상 React-Query 없이는 살 수 없는 몸이 되버렸다.그래서 React-Query를 쓰

react-query를 써보자..
React Query는 React 애플리케이션에서 데이터를 가져오고 관리하는 라이브러리이다. 이를 사용하면 API 호출을 간단하게 처리할 수 있고, 캐싱과 자동 업데이트 기능을 통해 데이터를 더 효율적으로 관리할 수 있다..

useMutation in apollo Client
apollo Client의 useMutation 훅은 DB의 Data를 mutate하기 위하여 사용하는 Hook이다. 이런저런 방황끝에 알아낸 사용방법을 정리해본다.반박시 당신말이 맞다.사용순서는 크게 3단계로 구분된다. mutate하기 위한 쿼리 작성 가장 바깥의 m
[React] useState + useEffect 대신 useMutation 사용하기: Create, Detail read, Update, Delete
useQuery는 get할때 사용하는 메서드였다.create했을때 리스트가 업데이트되지않아서 당황했음.refresh를 삭제해서 그런거겠지만... 리액트쿼리에 이부분을 위한 메서드가 있을거라고 생각했다.찾아보니 useMutation이라는 것을 사용해서 CUD를 하고, 여

React | React Query
UI/UX의 중요성과 함께 프로덕트 규모가 많이 커지고 프론트엔드에서 수행하는 역할이 늘어났다.즉,관리하는 상태가 많아지고 상태관리의 필요성이 중요해졌다. #2. 상태란? 주어

[React Query] useMutation의 필요성
전의 포스팅처럼 useQuery를 이용해 서버 데이터를 가져오고 장바구니에서 해당 상품을 추가하고 삭제하는 함수를 만들어 적용해보았는데 실시간으로 UI가 업데이트가 되지 않는 문제점이 발생했습니다.

react query useMutation으로 FormData 요청 보내기
프로젝트 진행중 이미지를 서버로 업로드하기 위해 formdata를 전송해야 하는 상황이었다.
Login, CreateAccount, useMe
지금까지의 설명을 바탕으로 login, createAccount를 완성한다.그리고 어느page에서든지 사용될 useMe 함수를 hook에 만들어 놓는다.localstorage에 token을 담기 위해서 key를 하나 만든다.

[React-Query] 리액트 쿼리 기본 개념 staleTime, cacheTime, useQuery, useMutation
react-query웹 브라우저 세션과 관련된 모든 정보ex) 언어 선택, 다크모드 등과 같이 서버에 일과 관련X서버에 저장되지만 클라이언트에 표시하는데 필요한 데이터ex) 블로그 게시글기능서버 데이터 캐시를 관리서버 데이터 필요시 fetch, axios가 아닌 Rea

[TIL] useMutation | React-Redux | 에러 해결
useQuery : 데이터를 GET(조회)할 때 사용페이지가 로드될 때, 바로 실행!get 메소드처럼 단순히 조회만 할 때useMutation : 데이터를 create, update, delete (수정)할 때 사용post, patch 메소드처럼 데이터 수정이 있을 때
useMutation, formSubmission, withHandler
\*\*들어가기useMutation: client가 backend와 통신하기 위해 필요한 공통적으로거쳐야 하는 과정을 담아놓음. POST로 통신할떄,GET으로 통신할떄는 useSWR을 사용.withHandler: backend의 api들을 코딩하는 과정에서 공통적으로
UploadForm.js
들어가기select Photo, take Photo한 사진을 props로 받아서caption과 함꼐 uploadPhoto Mutation을 실행하여,사진을 DB에 저장하고, 뿌리는 screen역시, file(picture, video)등을 다루는 부분은 어려우니 집중할
follow, unfollow (1)
들어가기front부분에서 user를 follow, unfollow하는 부분,일단은 cache부분은 생략하고 useMuataion, useQuery 부분만 마무리 한다.Profile에서 follow, unFollow할 수 있게 구성한다.\-styled부분에 대한 설명은
deleteComment
들어가기내가 만든 댓글(Comment)를 지우는 코드,createComment에서 newCacheComment를 만들어서 evict로쉽게 내가 단 댓글을 바로 지울 수 있음.
React Query에서 Post, Delete, Patch/Put (useMutation hook 사용하기)
react query에서 단순한 조회, get 요청을 보내기 위해서는 useQuery를 사용한다. 반면, 데이터의 수정이 일어나는 Post, Delete, Patch(Put) 요청을 위해서는 useMutation을 사용해야 한다.
CreateComment(1)
들어가기사진에 댓글다는 기능을 구현createComment(1)에서는 useForm과 useMutaion을 이용해서 댓글 다는것을구현하고 createComment(2)에서는 realTime, cache를 다루는 방법을 알아보자.Photo Component에서 Comme

writeFragment, readFragment, cache
들어가기실시간으로 화면을 update하기 위해서 사용좋아요를 누르고 refetchQuery로 다시 seeFeed Query롤호출하면, 웹페이지 속도를 늦출 수 있다.그래서 cache를 바로 업데이트 하면, 웹의 속도를 빠르게 유지시킬 수 있다.chrome에서 f12 누