게시물을 삭제를 하거나 ,만들거나 , 수정하고 바로바로 화면에 결과가 보여야 할때
이제까진 refetchQueries
를 썼는데, 이 방법을 쓰게 되면
전체가 렌더링이 다시 되기 때문에, 불 필요한 렌더링이 되어서 비 효율적이다.
수정한 부분만 업데이트 되게 하는 방법이 있다.
Apollo cache state를 쓰면 된다.
삭제 api 요청이 나가는데, 그리고나서 원래는 리패치쿼리를 했는데,
리패치쿼리를 하게 되면 전체 페이지가 재 렌더링 되기 때문에 불필요한 데이터까지
업데이트를 하게 된다.
내가 수정한 부분만 업데이트 되게 하려면 아폴로 캐쉬 스테이트를 쓰면 된다.
리패치쿼리 대신에 update를 써준다.
update의 매개변수 cache , {data}
cache : 캐쉬 스테이트 관련된 기능 (캐쉬스테이트에서 데이터를 꺼내올건지 아니면 집어넣을건지 등등..)
{data} : deleteBoard를 하게 되면 ID가 리턴이 되는데, 이 결과 데이터가 {data}안에 들어옴
deleteId
에 data.deleteBoard를 할당했는데, data.deleteBoard는
deleteBoard의 결과값인 ID값이다.
cache.modify , fields
cache.modify : "cache를 수정한다" 라는 뜻임
fields : 어떤 캐쉬에 어떤 필드를 수정할건지 (어떤걸 수정할 거냐)
fetchBoards의 속성 설명
prev : 기존 것
{readField} : fetchBoards의 board들의 _id값을 가져오기 위해선 이걸 써야한다. board(el)._id값으로 데이터를 못 불러오기 때문에 , board._el 대신에
readField("_id" , board)
로 _id값을 가져와야 함
fetchBoards를 수정하는데, 내가 삭제하기 버튼을 누르면 id값이 들어오고
그 아이디값이 있으면 삭제를 시키는거기 때문에
filter로 내가 눌러서 볼러온 id값이 아닌것들만 골라 내면
삭제한거 제외한 나머지가 배열에 남게된다.
그걸 리턴해주면 내가 삭제한 부분만 없어진다.
위에서 삭제한것만 업데이트한것과 동이한데
여기선 {readField}
가 필요없다.
내가 등록한 부분만 추가가 되면 되기 때문이다.
[추가한 부분 , 전의것]
을 리턴해주면
내가 추가한만큼만 다시 업데이트 된다.