突变后Apollo客户端重新获取查询

时间:2018-12-28 20:55:11

标签: reactjs apollo react-apollo apollo-client

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));

0 个答案:

没有答案