Apollo Cache State

Ahn·2021년 10월 23일
0
post-thumbnail

게시물을 삭제를 하거나 ,만들거나 , 수정하고 바로바로 화면에 결과가 보여야 할때
이제까진 refetchQueries를 썼는데, 이 방법을 쓰게 되면
전체가 렌더링이 다시 되기 때문에, 불 필요한 렌더링이 되어서 비 효율적이다.

수정한 부분만 업데이트 되게 하는 방법이 있다.
Apollo cache state를 쓰면 된다.


내가 삭제한 부분만 삭제하기(deleteBoard)

삭제 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} 가 필요없다.
내가 등록한 부분만 추가가 되면 되기 때문이다.

[추가한 부분 , 전의것] 을 리턴해주면
내가 추가한만큼만 다시 업데이트 된다.

profile
Hello~~👋

0개의 댓글