React、Apollo Client 2、Graphcool を使用しています。ログインフォームを実装しました。ログイン ページには、クライアントがログインしている天候に応じて、ログイン フォームまたはログアウト ボタンが表示されます。
私のコードは機能しますが、リアクティブに更新されません。ユーザーがログインまたはログアウトした後、ページを更新するまで何も変わりません。コードをリアクティブにするにはどうすればよいですか?
import React from 'react';
import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
class Login extends React.Component {
constructor(props) {
super(props);
this._confirm = this._confirm.bind(this);
}
_confirm = async e => {
e.preventDefault();
const result = await this.props.LoginMutation({
variables: {
email: '5@gmail.com',
password: 'password',
},
});
const token = result.data.authenticateUser.token;
this._saveUserData(token);
};
_saveUserData = token => {
localStorage.setItem('auth-token', token);
};
render() {
return (
<div>
{this.props.LoginQuery.user ? (
<button onClick={() => localStorage.removeItem('auth-token')}>
Logout
</button>
) : (
<form onSubmit={this._confirm}>
<input type="email" id="email" />
<input type="password" id="password" />
<button type="submit">Login</button>
</form>
)}
</div>
);
}
}
const LoginMutation = gql`
mutation authenticateUser($email: String!, $password: String!) {
authenticateUser(email: $email, password: $password) {
token
}
}
`;
const LoginQuery = gql`
query AppQuery {
user {
id
}
}
`;
const LoginContainer = compose(
graphql(LoginMutation, { name: 'LoginMutation' }),
graphql(LoginQuery, { name: 'LoginQuery' }),
)(Login);
export default LoginContainer;