title: How to refetch data without refreshing the page in React graphql
body: <p>I am a newbie here. In the below code I have used React + React-Apollo .</p>
  <p>I am uploading image and retrieving the images from db using Graphql  and displaying it in a table</p>
  <p>So the problem is when I upload the image it is not getting displayed until I refresh the page.
  I need the images to be displayed when I click upload button. Please see the code below</p>
  <p>Component Code:</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import axios from 'axios';
  import gql from 'graphql-tag';
  import {Query} from 'react-apollo';
  
  const GET_FILES = gql`
      query getFiles{
          getFiles{
              id 
              image
              
          }
      }`;
  
  class ImageContainer extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              file: null
          };
          this.onFormSubmit = this.onFormSubmit.bind(this);
          this.onChange = this.onChange.bind(this);
      }
      onFormSubmit = (e) =&gt;{
          e.preventDefault();
          const formData = new FormData();
          formData.append('myImage',this.state.file);
          const config = {
              headers: {
                  'content-type': 'multipart/form-data'
              }
          };
          axios.post(&quot;http://localhost:4000/upload&quot;,formData,config)
              .then((response) =&gt; {
                  alert(&quot;The file is successfully uploaded&quot;);
                  console.log(response.data.filename)
                  console.log(response.data.destination)
                  window.location.reload();
                  this.setState({file: response.data.filename})
              }).catch((error) =&gt; {
          });
      }
      onChange = (e) =&gt; {
          this.setState({file:e.target.files[0]});
      }
      
      render() {
          return (
              &lt;React.Fragment&gt;
                  &lt;div className = &quot;container&quot;&gt;
              &lt;form onSubmit = {this.onFormSubmit}&gt;
                  &lt;h1&gt;File Upload&lt;/h1&gt;
                  &lt;input type = &quot;file&quot; name = &quot;myImage&quot; onChange = {this.onChange} /&gt;
                  &lt;button type = &quot;submit&quot;&gt;Upload&lt;/button&gt;
              &lt;/form&gt;
              &lt;div&gt;
              &lt;Query query = {GET_FILES}&gt;
                  {({loading,error,data}) =&gt; {
                      if (loading) return &lt;h4&gt;Loading..&lt;/h4&gt;;
                      if (error) console.log(error);
                      console.log(data)
                      return (
                          
                          &lt;React.Fragment&gt;
                              &lt;div className = &quot;row mt-3&quot;&gt;
                                  &lt;div className = &quot;col&quot;&gt;
                                      &lt;table className = &quot;table table-striped table-primary bg-dark text-white text-center&quot;&gt;
                                          &lt;thead&gt;
                                          &lt;tr&gt;
                                              &lt;th&gt;Image&lt;/th&gt;
                                              &lt;th&gt;&lt;/th&gt;
                                          &lt;/tr&gt;
                                          &lt;/thead&gt;
                                          &lt;tbody&gt;
                                          
                                              {
                                           data.getFiles.map(file =&gt; {
                                               return(
                                                  &lt;React.Fragment&gt;
                                                  &lt;tr key = {file.id}&gt;
                                               &lt;tr&gt;{file.image}&lt;/tr&gt;
                                                   &lt;td&gt;&lt;img src = {`http://localhost:4000/${file.image}`} alt = &quot;&quot;/&gt;&lt;/td&gt;
                                              
                                                   &lt;/tr&gt;
                                                   &lt;/React.Fragment&gt;
                                               )
                                           
                                              })
                                          }
                                          &lt;/tbody&gt;
  
                                      &lt;/table&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              
                          &lt;/React.Fragment&gt;
                      )
                  }}
  
              &lt;/Query&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/React.Fragment&gt;
          )
      }
  }
  
  export default ImageContainer
  </code></pre>