title: Showing loading indicator only on initial load in graphql Query
body: <p>I have graphql Query as follows:</p>
  
  <pre><code>&lt;Query query={GET_COMPANY_ADDRESSES} variables={{companyId: session.company.id}} notifyOnNetworkStatusChange={true} fetchPolicy={'cache-and-network'}&gt;
      {({loading, error, refetch, data}) =&gt; {
          if (loading) return &lt;LoadingIndicator/&gt;;
          if (error) return &lt;ErrorIndicator description={error.message}/&gt;;
  
          const address = data.companyAddresses[1];
  
          return (
              &lt;React.Fragment&gt;
                  &lt;CollapsiblePanel title="Add slot"&gt;
                      &lt;SlotForm address={address} toggleSlotForm={this.toggleSlotForm.bind(this)} refetch={refetch}/&gt;
                  &lt;/CollapsiblePanel&gt;
  
              &lt;/React.Fragment&gt;
  
          )
      }}
  &lt;/Query&gt;
  </code></pre>
  
  <p>I show there an <code>loading indicator</code> on initial load. It works fine. But I have form inside <code>&lt;SlotForm /&gt;</code> component where I can add record to the database. The submit function of the form as follows:</p>
  
  <pre><code>handleSaveSlot({address}, data) {
          const slot = {
              ...data,
              address: address.id
          };
  
          return client.mutate({
              variables: {input: slot},
              mutation: ADD_NEW_SLOT,
          })
              .then(result =&gt; {
                  if (result.data.createSlot.ok) {
  
                      this.props.refetch();
                      this.setState({hasError: false, errorMessage: "", saved: true, slot: initialSlot()}, () =&gt; {
                          setTimeout(() =&gt; this.props.toggleSlotForm(false), 3000)
                      });
                  }
              })
              .catch(error =&gt; {
                  let error_msg = error.message.replace("GraphQL error: ", '');
                  this.setState({hasError: true, saved: false, errorMessage: error_msg});
                  throw(error_msg);
              });
  }
  </code></pre>
  
  <p>After response in <code>.then</code> I'm refetching the data with <code>this.props.refetch();</code>. But when refetch is executed I get the loading indicator again before the data is updated on the screen. </p>
  
  <p>I want to avoid that and I do not want to show <code>loading indicator</code> every time when I add a new record. I just want to show it on initial load.</p>
  
  <p>Every time when I refetch the data I want to do that "in background" without showing loading indicator.</p>
  
  <p>Any idea how to do that?</p>