title: Using Refetch with apollo to rerender query & component
body: <p>I'm having issues rehydrating a component with new data via query. To set the premise i have two components that are siblings like this:</p>
  
  <pre><code>&lt;Container&gt;
   &lt;Navbar /&gt;
   &lt;Login /&gt; || &lt;Home /&gt;
  &lt;/Container
  </code></pre>
  
  <p>Basically in my login component i have a mutation that runs like this when i hit login:</p>
  
  <pre><code>this.props.mutate({
          variables: { token },
          refetchQueries: () =&gt;  ['isAuthenticated']
      }).then((data) =&gt; {
        console.log(data);
        this.props.history.push(`/`);
      })
  </code></pre>
  
  <p>So the result ends up being that nothing rerenders, i'm console.log()ing in my navigation components to see if the props for it have changed but it hasn't, however in my network tab and cache is the data that it should be returning.</p>
  
  <p>My navigation item component looks like this: </p>
  
  <pre><code>import React, { Component } from "react";
  import { Link, withRouter } from "react-router-dom";
  import gql from "graphql-tag";
  import { graphql, compose } from "react-apollo";
  import { withStyles } from "@material-ui/core/styles";
  import List from "@material-ui/core/List";
  import ListItem from "@material-ui/core/ListItem";
  import Button from "@material-ui/core/Button";
  import headerLinksStyle from "./HeaderLinksStyle";
  import { LockOpen, GetApp, Info } from "@material-ui/icons";
  
  const isLoggedInQuery = gql`
    query isLoggedInQuery {
      token @client
    }
  `;
  
  const loggedInMutation = gql`
    mutation authToken($token: String!) {
      assignAuthToken(token: $token) @client {
        token
      }
    }
  `;
  
  const userQuery = gql`
    query isAuthenticated {
      currentUser {
        id
        firstName
        lastName
        gender
        location
        password
        email
        permissions {
          id
          name
          displayOrder
          description
        }
        roles {
          id
          name
          description
          displayOrder
        }
      }
    }
  `;
  
  class HeaderLinks extends Component {
    logout = () =&gt; {
      localStorage.removeItem("auth_token");
      this.props.mutate({
        variables: { token: null }
      });
      this.props.history.push(`/`);
    };
  
    refetch = () =&gt; {
      console.log("refetch")
      this.props.user.refetch();
    }
    render() {
      const { classes } = this.props;
      const { token } = this.props.data;
      const isLoggedIn = token;
      console.log(this.props);
      return (
        &lt;List className={classes.list}&gt;
          {!isLoggedIn &amp;&amp; (
            &lt;ListItem className={classes.listItem}&gt;
              &lt;Link to="/login" style={{ color: "inherit" }}&gt;
                &lt;Button color="inherit" className={classes.navLink}&gt;
                  &lt;LockOpen className={classes.icon} /&gt;Login
                &lt;/Button&gt;
              &lt;/Link&gt;
            &lt;/ListItem&gt;
          )}
          {!isLoggedIn &amp;&amp; (
            &lt;ListItem className={classes.listItem}&gt;
              &lt;Link to="/signup" style={{ color: "inherit" }}&gt;
                &lt;Button color="inherit" className={classes.navLink}&gt;
                  &lt;GetApp className={classes.icon} /&gt;Sign up
                &lt;/Button&gt;
              &lt;/Link&gt;
            &lt;/ListItem&gt;
          )}
          &lt;ListItem className={classes.listItem}&gt;
              &lt;Button color="inherit" className={classes.navLink} onClick={() =&gt; { this.refetch();}}&gt;
                &lt;Info className={classes.icon} /&gt;About
              &lt;/Button&gt;
          &lt;/ListItem&gt;
          {isLoggedIn &amp;&amp; (
            &lt;ListItem className={classes.listItem}&gt;
              &lt;Button
                color="inherit"
                className={classes.navLink}
                onClick={event =&gt; {
                  this.logout();
                }}
              &gt;
                &lt;LockOpen className={classes.icon} /&gt;Logout
              &lt;/Button&gt;
            &lt;/ListItem&gt;
          )}
        &lt;/List&gt;
      );
    }
  }
  
  export default compose(
    graphql(isLoggedInQuery),
    graphql(loggedInMutation),
    graphql(userQuery, { name: "user", options: {fetchPolicy: 'network-only'}}),
    withStyles(headerLinksStyle),
    withRouter
  )(HeaderLinks);
  </code></pre>
  
  <p>Firing this.props.user.refetch() works fine, however my props are coming back with stale information / error or data.</p>