Apollo로 돌연변이를 수행 한 후 별도의 구성 요소를 업데이트하는 방법

Question

redux로 상태가 변경되면 connect이 mapStateToProps 인 구성 요소를 업데이트합니다. 그러나 돌연변이를 수행 할 때 Apollo를 사용하면 동일한 데이터를 사용하는 모든 구성 요소가 새 소품을받습니다.

아폴로가 데이터 세트가 동일하다는 것을 알지 못하기 때문에 이것이 정상적인 동작이라고 이해합니다. 저는 여기에 얻고 무엇의 예

는

const query = gql`query { me { username } }` 

@graphql(query) 
class Header extends React.Component { 
    render() { 
    return <h1>{this.props.data.me.username}</h1> 
    } 
} 

const mutation = gql`mutation updateAccount($username: String!) { 
    updateAccount(username: $username) { 
    me { 
     username 
    } 
    } 
}` 
@graphql(mutation) 
class Edit extends React.Component { 
    render() { 
    # ... 
    } 
    onSubmit(e) { 
    e.preventDefault() 
    this.props.mutate({variables: {username: this.state.username}) 
    } 
} 

Header 구성 요소 편집 구성 요소가 username 업데이트로 username을 밖으로 렌더링합니다. username이 변경되면 Header을 다시 렌더링하고 싶습니다. 쿼리를 폴링하지 않고이 작업을 수행하는 방법을 잘 모르겠습니다.

Answer 1

아폴로는 쿼리의 내부 캐시를 유지하고 redux 저장소에 보관 된 내부 캐시를 사용하여 dataIdFromObject으로 결과 집합을 정규화 할 수 있습니다. 클라이언트 초기화 할 때 당신이 dataIdFromObject를 설정해야합니다 내부 캐시를 사용하기 위해서는

: 다음

const client = new ApolloClient({ 
    dataIdFromObject: o => o.id 
}) 

을 돌연변이를 수행 할 때 id을 보장하기는 반환 형식으로 반환됩니다

const mutation = gql`mutation updateAccount($username: String!) { 
    updateAccount(username: $username) { 
    me { 
     id 
     username 
    } 
    } 
}` 

또한 검색어에는 ID가 포함되어야합니다.

const query = gql`query { me { id username } }` 

아폴로는 id이 쿼리와 반환 유형의 돌연변이가 동일하다는 것을 인식하고 이에 따라 쿼리 데이터를 업데이트합니다.

const client = new ApolloClient({ 
    dataIdFromObject: o => `${o.__typename}:${o.id},` 
}) 

:

다음 개체에서 __typename를 사용할 수있는 id 항상 유형에서 고유 그래서 난 내 GraphQL API의 글로벌 ID 년대를 사용하고 있지만 자동 증가 ID를 사용하는 경우 또는 고유하지 않습니다