Apollo GraphQL에서 refetchQueries를 사용하지 않아도됩니까?

Question

Apollo 클라이언트 (버전 1.x)가있는 GraphQL 서버에 액세스하는 React 앱이 있습니다. 다음과 같은 서버 스키마가 있습니다.

type Query { 
    currentShop: Shop 
} 
type Shop { 
    id: ID! 
    name: String! 
    products: [Product!]! 
    ...etc 
} 

나는 이와 같이 정의 된 dataIdFromObject을 가지고 있습니다.

응용 프로그램 전반에 걸쳐

const dataIdFromObject = o => { 
    if (o.__typename != null && o.id != null) { 
    return `${o.__typename}-${o.id}` 
    } 
    return null 
} 

, 나는 currentShop의 다양한 분야를 묻는 쿼리를 실행하고 있습니다. 여러 지점에서 currentShop을 변경하는 돌연변이가 있으며 돌연변이는 항상 Shop 유형을 반환합니다. 그러나 currentShop과 관련이 없으므로 Apollo는 루트 쿼리 캐시 포인터를 업데이트하는 방법을 알 수 없습니다.

CodeSandbox으로 문제를 나타내는 데모를 완벽하게 만들었습니다. 백엔드는 Apollo LaunchPad으로 만듭니다. 다른 분기를 선택하고 몇 초 기다렸다가 (최적화에 신경 쓰지 않았 음) 작동합니다.

"마법"은 ShopSelectButton 구성 요소에서 발생합니다. refetchQueries 행을 주석 처리하면 문제가 발생합니다. 상점은 서버에서 올바르게 선택되어 있습니다 (다시로드 한 후에 보게됩니다). 그러나 클라이언트는 죽은 동물처럼 행동합니다.

제 문제는 refetchQueries입니다. 코드가 너무 밀접하게 결합되어 있습니다. 다른 구성 요소와 필요에 대해 알기 위해 앱의 한 구성 요소에 구성 요소를 갖고 싶지 않습니다. 또한 정직하게 말하자면, 다시 패치한다는 것은 캐시 전체를 돌아 다니며 대부분의 경우 불필요한 백엔드에서 항상 읽음을 의미합니다.

다른 접근 방법이 궁금합니다. 스키마가 더 많은 상태 비 저장되고 프론트 엔드 앱에 상태를 유지해야합니까?

Answer 1

나는 돌연변이가 쿼리를 재 패치하지 않고 작동해야한다고 생각한다. 돌연변이 결과 본문의 관련 쿼리에서 필요한 모든 데이터를 추가하기 만하면됩니다.

크롬 용 apollo 클라이언트 개발 도구 확장을 설치하려고 시도 했습니까? 여기서 다른 쿼리의 currentShop 요소가 typename 및 id를 통해 Shop 유형과 관련되는지 쉽게 확인할 수 있습니다. 이 경우 아폴론은 돌연변이 이후에 업데이트해야합니다.

올바르게 업데이트하려면 돌연변이 결과에 필요한 모든 데이터를 얻으려면 응용 프로그램에 조각 구조를 추가하는 것이 좋습니다. 상점에서 데이터가 필요한 모든 구성 요소에는 요구 사항을 정의하는 조각 필드가 있음을 의미합니다. 조각을 모아 돌연변이 본문에 추가합니다. 물론 이것을하면 다른 구성 요소와 돌연변이가 동일한 커플 링을 갖게됩니다.

다른 옵션은 샵 유형의 가능한 모든 데이터를 돌연변이 결과에 추가하는 것입니다.