어떻게 Apollo GraphQL Cache로 파티를 흔들어🎉🎈

안녕하세요, 아폴로 캐시입니다.Apollo 클라이언트의 캐시 기본 구현입니다.우리가 왜 여기 있는지 설명해 주세요!
나는 언제든지 당신이 캐시에 접근하고 조작하는 것을 도울 것입니다.너 돌변했니?걱정 마!캐시를 업데이트해 드릴게요.읊다, 읊조리다🤷‍♂. 허락해 주십시오..
어...아폴로 케이지의 소개에 고맙지만, 여기서부터 시작할게요.
좋아, 내가 처음으로 아폴로 캐시를 시도했을 때, 그것은 이미 나의 상상을 초월했다.이렇게 많은 다른 용례가 있으니, 나는 틀림없이 길을 잃을 것이다.게다가 __typename 이 일은 모든 곤혹스러웠다.그래서 나는 아폴로에게 내 친구를 캐시하기로 했다.일은 이렇다.
우선, 당신은 아폴로 케이지를 당신의 파티에 초대해야 합니다.

npm install apollo-cache-inmemory --save

이제 Apollo Cache 이 파티를 빛내기 시작할 것이다.아폴로 클라이언트 (Apollo 클라이언트가 캐시를 특히 좋아한다) 에게 소개하면 됩니다!

const cache = new InMemoryCache();

const client = new ApolloClient({
  link: new HttpLink(),
  cache
});

하지만 우리는 그것이 더 많은 일을 할 수 있기를 바란다.그래서 당신의 정당 규칙을 이해하게 하세요. 그러면 당신이 원하는 방식으로 행동할 것입니다.예를 들면code of conduct?우리는 그 건설 업체에서 행위 준칙을 제공할 것이다.겸사겸사 한마디 하자면, 이것은 완전히 선택할 수 있는 것이다.우리 시작합시다!
행동 규범:

addTypename: 문서에\uu typename을 추가할지 여부를 지정하는 부울 값입니다.(기본값은true).잠시 후 이에 대해 상세하게 소개할 것이다.
dataIdFromObject: 캐시는 모든 데이터를 저장소에 저장하기 전에 규범화합니다.이것은 데이터 대상을 받아들이고 유일한 id를 되돌려주는 함수입니다. 잠시 후에 사용에 대해 자세히 설명할 것입니다.
조각 일치기: Apollo 캐시는 기본적으로 계발식 조각 일치기를 사용합니다.연합과 인터페이스에서 세션을 사용할 계획이라면,apollocache에게 이상한 일이라고 알려야 합니다.
cacheredirects: 때때로 apollo 캐시가 저장되어 있지만 서로 다른 자원 키 아래에 있는 데이터를 요청합니다.cache Redirects를 통해 apollo cache가 존재하는 데이터를 어디서 찾는지 알려 줍니다.

아폴로 캐시는 즉각 당에서 환영을 받았다.모든 모임 손님들이 캐시와 상호작용을 하고 있다고 상상할 수 있다.저희가'반응과 행동'을 하고 있어요.🧐 캐시에는 우리가 행동할 수 있는 모든 이벤트와 각 팀의 점수가 저장되어 있습니다.내가 너에게 말하지만, 그것은 매우 잘한다.Apollo cache는 데이터를 신속하게 저장하고 검색하는 세 가지 일을 했습니다. -

데이터를 단일 객체로 분할

객체당 고유 식별자 만들기

데이터를 평탄한 데이터 구조에 저장

이것은 행위 준칙점addTypename과 dataIdFromObject를 사용하여 이 점을 실현합니다.일반적으로 캐시는 데이터의 id 및 _id 필드를 사용하고 __typename 고유 식별자를 만듭니다.데이터에 ID가 제공되지 않으면 종료됩니다__typename.dataIdFromObject 함수는 캐시가 데이터의 특정 필드를 유일한 식별자로 사용하여 나중에 Apollo 캐시와의 상호작용 (조회) 에서 참조할 수 있도록 알려줍니다.
나는 이것이 사람을 곤혹스럽게 하는 것을 안다.그러면 이 점에 대해 좀 더 이야기해 봅시다.
그러나 우선, 캐시는 어떻게 모든 내용을 기억합니까?요컨대, 아폴로 캐시는 당신이 그것과 상호작용하는 방식을 기억할 것이다.캐시는 이를 조회 경로라고 부른다.

query {
    Events (category = 'happy') { 
        name
    }
}

위의 쿼리에 대해 캐시는 다음과 같이 쿼리 경로를 만듭니다. RootQuery->Events(category='해피')->name.그것은 검색 경로에 대해 자원을 정확하게 가리켜야 한다고 가정한다.그래서 다음에 캐시가 같은 조회를 물어보면 바로 대답합니다.예를 들어 한 손님이 아폴로 케이지에게 팀의 점수와 즐거움 유형의 활동 목록을 물었다.

query {
    Score(team = 'A') {
        points
    }
    Events (category = 'happy') { 
        name
    }
}

캐시는 이벤트 목록을 알고 있습니다. 누군가가 요청했기 때문입니다.그래서 바로 대답했습니다.정련했어
캐시는 가능한 한 물건을 기억해야 한다.그러나 때때로 조회 경로가 명확하지 않다.예를 들어 다른 두 손님은 다음과 같은 질문을 했다.
게스트 A: 헤이, 아폴로 캐시.너는 나에게'춤'종류에 속하는 활동을 알려줄 수 있니?
손님 B:Cache, 두 번째 이벤트를 제공해 주시겠어요?(여기 카테고리는 id로 참조)
현재 공교롭게도 id=2(또는 두 번째 종류)는 사실상'춤'종류에 속하는 사건이다.캐시는 이 요청을 어떻게 보십니까?

// 1st Request
query {
    Event (category = 'dancing') { 
        name
    }
}
// 2nd Request
query {
    Event (id = 2) { 
        name
    }
}

여기서 캐시는 두 요청이 모두 같은 결과를 인용했는지 모른다.정상적인 상황에서 캐시는 이 데이터를 가져와 저장에 두 번 저장합니다.이때 캐시는 dataIdFromObject 규칙을 사용하여 이러한 요청에 무슨 일이 일어났는지 찾아낼 수 있다.
어떻게우리의 도움으로따라서 dataIdFromObject 에서 우리는 조회가 필요한 모든 대상에 대해 유일한 식별자를 지정했다.여기서 주의해야 할 것은 id=5는 이벤트나 손님을 표시할 수 있기 때문에 원본 id(SQL 키)를 유일한 식별자로 제공하지 않는다는 것이다.우리는 그것을 __typename와 결합시켜야 한다.따라서 Event:5와 같은 표지부호는 id=5의 이벤트 데이터만 표시하고, Guest:5는 id=5의 내빈 데이터만 표시한다.

댄스 클래스의 이벤트 이름이'bachata'에서'salsa'로 변경되면 상기 두 문제 모두 업데이트된 답을 얻을 수 있습니다.간단하고 깔끔하게!

아폴로 캐시에는 또 다른 기교가 많다.우리 다음에 다시 토론합시다!
트위터 사용자 @DuckBB8 fro 오리지널 이미지 감사합니다.