Вы вообще используете инструмент graphiql? У вас должен быть запрос на currentUser, который вы импортируете здесь в папке queries. Вы также должны иметь мутацию Logout в папке mutations и импортировать ее тоже. Таким образом, вы можете использовать более чистый вкладыш в конце HeaderLinks примерно так: export default graphql(mutation)(graphql(query)(HeaderLinks)); И это только для начинающих. Я рекомендую рефакторинг так:
import React, { Component } from 'react';
import { graphql } from 'react-apollo';
import { Link } from 'react-router';
import query from '../queries/CurrentUser';
import mutation from '../mutations/Logout';
class HeaderLinks extends Component {
onLogoutClick() {
this.props.mutate({});
}
renderButtons() {
const { loading, user } = this.props.data;
if (loading) {
return <div />;
}
if (user) {
return (
<li>
<a onClick={this.onLogoutClick.bind(this)}>Logout</a>
</li>
);
} else {
return (
<div>
<li>
<Link to="/signup">Signup</Link>
</li>
<li>
<Link to="/login">Login</Link>
</li>
</div>
);
}
}
render() {
return (
<nav>
<div className="nav-wrapper">
<Link to="/" className="brand-logo left">
Home
</Link>
<ul className="right">{this.renderButtons()}</ul>
</div>
</nav>
);
}
}
export default graphql(mutation)(graphql(query)(Header));
Теперь вышесказанное предполагает материализацию CSS для стилизации, возможно, вы используете что-то другое, и это нормально, просто нужно отразить это, но я думаю, что то, что я поделился выше, чище и помогает вам двигаться вперед.
Так что после запуска мутации я скажу, что я хочу, чтобы GraphQL автоматически перевыпускал этот список запросов, даже если это всего лишь один запрос, но я собираюсь передать массив, потому что это то, что, как ожидает от меня помощник, будет происходить так :
class HeaderLinks extends Component {
onLogoutClick() {
this.props.mutate({
refetchQueries: [{}]
});
}
Итак, у меня есть только один запрос, который я хочу выполнить, это запрос currentUser, который я импортировал как запрос, и я определю его так:
class HeaderLinks extends Component {
onLogoutClick() {
this.props.mutate({
refetchQueries: [{ query: query }]
});
}
Значение ключа идентично именам переменных, так что мы можем сжать их до простого запроса:
class HeaderLinks extends Component {
onLogoutClick() {
this.props.mutate({
refetchQueries: [{ query }]
});
}
Таким образом, после того, как мутация запустится, повторно запустите этот запрос и заново отрендерируйте любой компонент, связанный с этим запросом, и заголовок должен автоматически обновиться на экране.