title: Call graphql query with react-apollo with asynchronously fetched variables
body: <p>I've got a <code>react</code> component which displays a map with points of interest near you.</p>
  
  <p>My HOC uses <code>react-apollo</code> to query for those points of interests and give the data as props to the pure UI component.</p>
  
  <p>I'm trying to get the position of the user from <code>navigator.geolocation</code> into the variables of my graphql query. But since the navigator API is asynchronous, I can't seem to make it work.</p>
  
  <p>It looks about like this :</p>
  
  <pre class="lang-js prettyprint-override"><code>const getCurrentPosition = async (settings = {}) =&gt;
    new Promise((resolve, reject) =&gt; {
      navigator.geolocation.getCurrentPosition(resolve, reject, settings);
    }
  );
  
  const query = gql`
    query($coordinates: [[Float]]){
      whatever(filter: {coordinates: $coordinates}) {
        _id
        coordinates
      }
    }
  `;
  
  const withData = graphql(query, {
    options: async (props) =&gt; {
      const position = await getCurrentPosition();
  
      return {
        variables: {
          coordinates: [position.coords.latitude, position.coords.longitude],
        },
      };
    },
    props: ({ data: { loading, whatever, refetch, variables: { coordinates } } }) =&gt; ({
      loading,
      whatever,
      coordinates,
      refetch,
    }),
  });
  
  
  const List = ({ loading, whatever, coordinates, refetch }) =&gt; {
    if (loading) {
      return null;
    }
    return (/* map display*/);
  };
  
  List.propTypes = {
    loading: React.PropTypes.bool.isRequired,
    whatever: React.PropTypes.array,
    coordinates: React.PropTypes.array,
    refetch: React.PropTypes.func,
  };
  
  export default withData(Map);
  </code></pre>
  
  <p><code>coordinates</code> is always <code>null</code> inside my component.</p>
  
  <p>When I log things, it seems that the position is computed but the graphql query and the component rendering happen before it.</p>
  
  <p>The query is not recalled and the component not re-rendered when we get the user location.</p>
  
  <p>Is it possible ? Am I doing something wrong?</p>