현재까지 우리는 refetch 라는 기능을 통해서 손쉽게 화면을 업데이트 했습니다.
하지만 이는 좋은 방법은 아닙니다.
불필요한 네트워크 요청을 백엔드에 한 번 더 보내게 되는 것이죠.
따라서, 추가적인 네트워크 요청 없이 프론트엔드의 apollo 저장소에 직접 자바스크립트로 CRUD를 하게되면 대규모 환경에서 더 효율적인 서비스를 제공할 수 있습니다.
예시를 한번 보쉬죠~
간략히 소개 하자면 패치 보드해서 데이터를 불러오고 id, writer ,title 를 useQuery를 통해서 불러 오고 있습니다.
이때까지 refetch를 사용했습니다.
하지만 여기서는 varialbes로 요청하고 캐쉬를 직접 업데이트 해주고 있습니다. 여기서 refectch를 사용하게 되면 또다시 DB에 요청해야 합니다 요기서 중요한건 다시한번 request를 하냐 안하냐 입니다. 서비스가 DB 를 한번더 거친다는건 과정이 하나 더 생기는건데 과정이 하나 더 생김으로써 서비스가 과부화가 올수도 있다는겁니다. 물론 아닐수도 있지만 최적화는 아니라는 말이죠!!
여기서는 update를 사용해서 캐시를 구조분해 하여 받아 오면됩니다.
캐쉬를 직접 수정을 해줘야 겠죠?
cahce.modify
각각 컴포넌트에서 발생한 쿼리 결과값들이 apolloCacheState에 저장되게 되는데 이놈이 데이터를 뿌려줍니다!! 그리고 우리는 지금 cahce.modify를 사용해서 직접 데이터를 컨트롤 하려고 하는거구요!
보시면 어떤 필드를 컨트롤 할려는지 수정하려고 하는지 말해줘야 합니다.
컴퓨는 멍청하니까..
fields: { // 어떤 필드를 수정할래??? 멍청아 }생성부터 보실게요
update(cache, { data }) {
cache.modify({
fields: {
fetchBoards: (prev) => {
return [data.createBoard, ...prev];
// 총 11개의 글이 만들어진다
return 될때 가장 최신글이
보여야 되고 기존의 패치보드 데이터들은 가장 최신 데이터 보다
다음에 있어야 겠죠?
},
},
});
},여기서 prev는 현재 패치보드의 상태를 말합니다!
data.createBoard 요놈은 지금 등록한 글입니다!
지금 등록한 글이 가장 먼저 나와야 하니까!! 기존데이터를 스프레드 연산자로 ! 배열이 합쳐 지도록! 해주면 됩니다.
글로벌 스테이트에 있는 데이터가 변경되면 사용하고 있는 컴포넌트들이 저놈 하나에 의해서 리프레쉬가 됩니다.
삭제하기 를 보시죵~
fields: { //
fetchBoards: (prev, { readField }) => {
// el._id 가 안되므로, readField에서 꺼내오기
const filteredPrev = prev.filter(
(el: any) => readField("_id", el) !== deletedId
// === deletedId를 제외한 나머지 id값을 불러와야함 === 이거는 잘못된 연산자임
);
return [...filteredPrev];
},
},prev안에는 각각의 id가 있는 데이터들이 들어가 있습니다.
prev안에 있는 id를 제거해주면 되겠죠?
filter를 사용해서 해당하는 id만 제외시키고 보여주면 되겠죠잉~
el._id 아폴로 캐쉬 라이브러리에서 는 사용할수가 없습니다
제공해주는 기능이 있는데 필드를 읽는 도구중에 readField가 있는데 이놈을 사용해서 _id를 꺼내라 라고 말해줘야 합니다.
