title: How to force Apollo Query component to re-run query when parent component re-renders
body: <p>I'm using Apollo Client's <code>&lt;Query&gt;</code> within a component that is re-rendered when state is changed within a lifecycle method. I wish to have my <code>&lt;Query&gt;</code> component re-run the query because I know that data has changed.
  It appears that Query component is using a cache that needs to be invalidated before query is re-run.</p>
  
  <p>I'm using a wonky workaround that caches the <code>refetch</code> callback from the render prop in the parent component, but it feels wrong. I'll post my approach in the answers if anyone is interested.</p>
  
  <p>My code looks something like this. I removed <code>loading</code> and <code>error</code> handling from query as well as some other detail for brevity.</p>
  
  <pre class="lang-js prettyprint-override"><code>class ParentComponent extends React.Component {
    componentDidUpdate(prevProps) {
      if (this.props.refetchId !== prevProps.refetchId) {
        const otherData = this.processData() // do something
        this.setState({otherData}) // this forces component to reload
      }
    }
  
    render() {
      const { otherData } = this.state
  
      return (
        &lt;Query query={MY_QUERY}&gt;
          {({ data }) =&gt; {
            return &lt;ChildComponent gqlData={data} stateData={otherData} /&gt;
          }}
        &lt;/Query&gt;
      )
    }
  }
  </code></pre>
  
  <p><strong>How do I force <code>&lt;Query&gt;</code> to fetch new data to pass to <code>&lt;ChildComponent&gt;</code>?</strong> </p>
  
  <p>Even though <code>ParentComponent</code> re-renders when props or state change, <code>Query</code> doesn't re-run. <code>ChildComponent</code> gets an updated <code>stateData</code> prop, but has a stale <code>gqlData</code> prop. As I understand Apollo's query cache need to be invalidated, but I'm not sure.</p>
  
  <p>Please note that passing <code>refetch</code> to ChildComponent is not the answer because it only displays information from GraphQL and wouldn't know when to refetch. I don't want to introduce timers or otherwise complicate <code>ChildComponent</code> to solve this - it doesn't need to know about this complexity or data fetching concerns.</p>