apollo-client에서 Mutation 이후, 멀리 떨어진 UI 업데이트하기

Refetch?

인터랙션이 있는 특정 컴포넌트에서, 유저의 행동으로 다른 컴포넌트의 UI를 업데이트 해야할 때

예를 들어 게시글에 좋아요를 누르거나, 북마크를 눌렀을때 내 프로필의 좋아요, 북마크 갯수를 변경해야 한다던지하는 클라이언트와 서버간 데이터를 정규화가 필요한 일이 종종 있다.

Like Mutation -> Response -> ? -> UI Update

업데이트가 필요한 값을 global state로 두고 갱신 하는 방법도 있겠지만, 인터랙션이 빈번한 서비스라면 관리해야할 state들이 넘쳐 흘러 헬게이트가 열릴지도 모른다

가장 먼저 쉽게 떠오를 방법은 Refetch이다.

Like Mutation -> Response -> Refetch -> UI Update

허나 이것도 문제가 많다.

멀리 떨어진 컴포넌트에 있는 refetch hook을 가져오려면?

하루에 좋아요, 북마크가 1만건 이상 발생한다면?

Like Mutation -> Response -> ? -> UI Update

좀 더 깔끔한 방법이 있다.

우선 apollo-client가 캐시를 어떻게 저장하고 다루는지 이해해야 한다.

chomre 확장 프로그램인 apollo client developer tools 로 클라이언트 메모리에 저장된 캐시를 볼 수 있다.

보아하니 타입이름:아이디를 uniqe cahce id로 사용하고 있다.

이 _typename:id가 같은 새 데이터를 클라이언트로 가져오기만 하면 업데이트가 되지 않을까?

ㅇㅇ 맞다. 새 데이터를 mutation response에 포함시켜 주면

저~~ 멀리 떨어진 데이터도 즉각 업데이트 된다.

Before

type Mutation {
  bookmark(id: ID!): Boolean!
}

After

type Mutation {
  bookmark(id: ID!): BookmarkResponse!
}

type BookmarkResponse {
  ok: Boolean!
  me: User!
  bookmarkdPost: Post!
}

예시와 같이 mutation의 response에 업데이트가 필요한 데이터들을 쏙쏙 골라 담아준다면,

refetch를 한다거나, 캐시를 강제로 제거한다거나 하는 덜 예쁜 방법을 쓰지 않아도 된다.