Как обновить реквизиты отдельных компонентов после выполнения мутации с помощью Apollo

Question

С сокращением, когда состояние изменяет, оно обновляет реквизиты компонентов, которые connect ed в магазине с mapStateToProps. Однако с Apollo при выполнении мутации любой компонент, который использует одни и те же данные, получает новые реквизиты.

Я понимаю, что это ожидаемое поведение, потому что 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. Я хочу переделать Header, когда username изменений. Я не уверен, как это сделать, не опросив запрос.

Answer 1

Apollo хранит внутренний кэш запросов и способен нормализовать результирующие наборы с помощью dataIdFromObject с использованием внутреннего кеша, хранящегося в магазине redux.

Для того, чтобы использовать внутренний кэш, необходимо установить dataIdFromObject при инициализации вашего клиента:

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

Тогда при выполнении мутации, обеспечение id возвращаются в типе возвращаемого значения:

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

Запрос также должен содержать идентификатор:

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

Apollo распознает, что id идентичен между запросом и типом возврата мутации и соответствующим образом обновляет данные запроса.

Я использую глобальные идентификаторы в моем GraphQL API, так что id всегда уникальны для разных типов, но если вы используете автоинкрементируемый идентификаторы или они не являются уникальными, то вы можете использовать __typename от объекта:

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