title: How to update variables in a React-Hooks Apollo polling?
body: <p>I'm using <code>@apollo/react-hooks</code> to poll data from a GraphQL query each 5mn.</p>
  
  <p>My query accepts a list of parameters including the current date time like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>const MyComponent = ({ query }) =&gt; {
      const {loading, error, data} = useQuery(query, {
        variables: {
            variable1: valVariable1,
            variable2: valVariable2,
            variable3: valVariable3,
            currentLocalDateTime: getCurrentLocalDateTime(),
        },
        pollInterval: 300000
      });
      if (loading) {
        return &lt;h1&gt;Loading...&lt;/h1&gt;;
      };
      if (error) {
        return &lt;h1&gt;Error! {JSON.stringify(error)}&lt;/h1&gt;;
      }
      return &lt;div&gt; Data: {JSON.stringify(data)}&lt;/div&gt;;
  });
  </code></pre>
  
  <p>Let's say I call my first query at "2020-03-06 08h:00mn", using the <code>pollInterval</code> defined above, my 2nd query will be called at 08h:05mn" and the 3rd one will be called at 08h:10mn"</p>
  
  <p><strong>The expected behaviour</strong></p>
  
  <p>When I look on my query on Chrome's Network after 12mn, I'll see 3 queries with different time variable values:</p>
  
  <ul>
  <li>Query 1 : variables.currentLocalDateTime === "2020-03-06 08h:00mn"</li>
  <li><p>Query 2 : variables.currentLocalDateTime === "2020-03-06 08h:05mn"</p></li>
  <li><p>Query 3 :variables.currentLocalDateTime === "2020-03-06 08h:10mn"</p></li>
  </ul>
  
  <p><strong>The current behaviour</strong></p>
  
  <ul>
  <li>Query 1 : variables.currentLocalDateTime === "2020-03-06 08h:00mn"</li>
  <li>Query 2 : variables.currentLocalDateTime === "2020-03-06 08h:00mn"</li>
  <li>Query 3 : variables.currentLocalDateTime === "2020-03-06 08h:00mn"</li>
  </ul>
  
  <p><strong>What I tried to do</strong></p>
  
  <ul>
  <li><p>I tried to wait the <code>onCompleted</code> event from <code>useQuery</code> and then update variables but it doesn't help because it will be called only the 1st time (and I guess when new data come in but I'm not sure).</p></li>
  <li><p>I tried to use <code>useLazyQuery</code> instead of <code>useQuery</code> and then use a <code>setInterval()</code> to update my variables then call the query again like this:</p></li>
  </ul>
  
  <pre class="lang-js prettyprint-override"><code>const MyComponent = ({ query }) =&gt; {
      const [getMyData, { loading, data }] = useLazyQuery(query);
      if (loading) {
          return &lt;h1&gt;Loading...&lt;/h1&gt;;
      };
      if (error) {
          return &lt;h1&gt;Error! {JSON.stringify(error)}&lt;/h1&gt;;
      }
      // Remove the previous created interval then:
      setInterval(() =&gt; {
          const newVariables = {...variables};
          newVariables['currentLocalDateTime'] = getCurrentLocalDateTime();
          getMyData({variables: newVariables});
        }, 300000);
  
      return &lt;div&gt; Data: {JSON.stringify(data)}&lt;/div&gt;;
  }
  </code></pre>
  
  <p>But it seems like I'm reimplementing the default Apollo polling using a setInterval in a "dirty way". So I'm not sure if it's a solution.</p>
  
  <p>Any feedback or experience to update a React Apollo polling variables ?</p>