mutation
完成后,我无法重新渲染组件。我期望的是,mutation
完成后,refetchQueries
被触发,它将更新道具并触发重定向。有没有一种方法可以在同一组件上进行重新提取。这是我的代码:
import React, { Component, Fragment } from 'react';
import { Redirect, withRouter } from 'react-router';
import { IS_LOGGED_IN, SIGN_IN, DEFAULT_STATE } from '../../utils/Constants/GraphQL/UserQueries';
import { client } from '../../utils/ApolloClient';
import LoginForm from '../../components/screens/login/loginForm';
import { graphql } from 'react-apollo';
export class Login extends Component {
handleSubmit = (event) => {
event.preventDefault();
client.mutate({
refetchQueries: () => [{ query: IS_LOGGED_IN }],
update: (proxy, { data }) => {
const previousState = proxy.readQuery({ query: DEFAULT_STATE })
const { email, authenticationToken } = data.signInAdmin.admin;
const isLoggedIn = data.signInAdmin.error === '';
const updatedData = {
...previousState,
admin: {
...previousState.admin,
isLoggedIn,
error: data.signInAdmin.error,
},
};
localStorage.setItem('email', email);
localStorage.setItem('token', authenticationToken);
proxy.writeData({ query: DEFAULT_STATE, data: updatedData });
},
variables: {
email: event.target.email.value,
password: event.target.password.value,
},
mutation: SIGN_IN,
});
}
render() {
const { isLoggedIn } = this.props.data.admin
if (isLoggedIn) {
return (<Redirect to="/admin" />);
}
const buttonProps = {
type: 'submit',
label: 'Submit',
};
return (
<Fragment>
<LoginForm
buttonProps={buttonProps}
submitHandler={this.handleSubmit}
/>
</Fragment>
);
}
}
export default graphql(IS_LOGGED_IN, {
options: {
fetchPolicy: 'cache-and-network',
}
})(withRouter(Login));