title: React: Data not showing until page refreshes
body: <p>I am currently building a simple CRUD workflow using React and GraphQL. After I create an object (an <code>article</code> in this case which just has an <code>id</code>, <code>title</code> and <code>description</code>.), I navigate back to an <code>Index</code> page which displays all of the currently created articles. My issue is that after an article is created, the index page does not display the created article until I refresh the page. I am using <code>apollo</code> to query the graphql api and have disabled cacheing on it so I'm not sure why the data isn't displaying. I've set breakpoints in my <code>ArticlesIndex</code>'s <code>componentDidMount</code> function and ensured that it is executing and at the time of executing, the database does include the newly added <code>article</code>. </p>
  
  <p>My server side is actually never even hit when the client side query to retrieve all articles executes. I'm not sure what is cacheing this data and why it is not being retrieved from the server as expected.</p>
  
  <p>My <code>ArticlesCreate</code> component inserts the new record and redirects back to the <code>ArticlesIndex</code> component as follows:</p>
  
  <pre><code>handleSubmit(event) {  
      event.preventDefault();  
      const { client } = this.props;
  
      var article = {
        "article": {
          "title": this.state.title,
          "description": this.state.description
        }
      };
  
      client
      .mutate({ mutation: CREATE_EDIT_ARTICLE, 
        variables: article })
      .then(({ data: { articles } }) =&gt; {
          this.props.history.push("/articles");  
      })
      .catch(err =&gt; {
          console.log("err", err);
      });
  
    }
  }
  </code></pre>
  
  <p>then my <code>ArticlesIndex</code> component retrieves all articles from the db as follows:</p>
  
  <pre><code>componentDidMount = () =&gt; {
      const { client } = this.props; //client is an ApolloClient
      client
      .query({ query: GET_ARTICLES })
      .then(({ data: { articles } }) =&gt; {
          if (articles) {
            this.setState({ loading: false, articles: articles });
          }
      })
      .catch(err =&gt; {
          console.log("err", err);
      });
  };
  </code></pre>
  
  <p>and I've set ApolloClient to not cache data as in my <code>App.js</code> as follows:</p>
  
  <pre><code>const defaultApolloOptions = {
    watchQuery: {
      fetchPolicy: 'network-only',
      errorPolicy: 'ignore',
    },
    query: {
      fetchPolicy: 'network-only',
      errorPolicy: 'all',
    },
  }
  
  export default class App extends Component {
    displayName = App.name;
  
    client = new ApolloClient({
      uri: "https://localhost:44360/graphql",
      cache: new InMemoryCache(),
      defaultOptions: defaultApolloOptions
    });
  
    //...render method, route definitions, etc
  }
  </code></pre>
  
  <p>Why is this happening and how can I solve it?</p>