title: typescript apollo gql react pass in variables to functional composition
body: <p>I'm trying to inject variables into a GQL query in a functional way like this</p>
  
  <pre><code>const ALL_PEOPLE_QUERY = gql`
    query All_People_Query {
      allPeople {
        people {
          id
          name
        }
      }
    }
  `;
  
  interface Data {
    allPeople: {
      people: Array&lt;{ id: string; name: string }&gt;;
    };
  };
  
  interface Variables {
    first: number;
  };
  
  const AllPeopleComponent = &lt;Query&lt;Data, Variables&gt; query={ALL_PEOPLE_QUERY}&gt;
    {({ loading, error, data }) =&gt; { ... }}
  &lt;/Query&gt;
  </code></pre>
  
  <p>from <a href="https://www.apollographql.com/docs/react/development-testing/static-typing/" rel="nofollow noreferrer">here</a> </p>
  
  <p>doing something like this</p>
  
  <pre><code>
  export const AllPeopleComponent = () =&gt; (&lt;Query&lt;Data, Variables&gt; query={ALL_PEOPLE_QUERY}&gt;
    {({ loading, error, data }) =&gt; { ... }}
  &lt;/Query&gt;
  );
  
  
  ReactDOM.render(&lt;ApolloProvider client={client}&gt;&lt;AllPeopleComponent/&gt;&lt;/ApolloProvider&gt;, document.getElementById('list'));
  </code></pre>
  
  <p>But how do I inject variables into the query in the reactDom call?</p>