title: How to work with props created out of Apollo Client returned query result in TypeScript?
body: <p>I have followed some blog tutorial on GraphQL and was able to tie together my GraphQL query with the React component that's supposed to display the returned result.  This works when I do console.log of <code>this.props</code>.</p>
  
  <p>As my next step, I would actually like to reference the individual data members inside the props (that were placed there by GraphQL) -- something like <code>props.Security.loading</code> -- and this is where it all falls apart.  </p>
  
  <p>Ideally, I would simply like to use "any" somewhere in the typing and avoid this hassle, but I can also explicitly specify in the interface(s) all the data that can come back (which, I think, defeats the purpose of GraphQL).  So how do I do this?  It seems that when I comment out the "data: Security" line out of the Props interface, the code compiles.   Thoroughly confused here.  Thank you</p>
  
  <pre><code>import * as React from "react";
  import { gql } from "apollo-boost";
  import { graphql } from "react-apollo";
  
  const getSymbolInfoQuery = gql` {
                  Security(id: "MSFT") {
                    id
                  }   
               } `;
  
  interface Security {
    loading: Boolean;
  }
  
  interface Props {
    data: Security
  }
  
  class ProductChecker extends React.Component&lt;Props, {}&gt; {
    constructor(props: Props) {
      super(props);
      console.log(props);
    }
  
    render() {
      return &lt;div&gt;{this.displaySearchFilters()}&lt;/div&gt;;   
    }
  
    displaySearchFilters() {
      console.log(this.props);
  
      return (
        &lt;div&gt;Hello there&lt;/div&gt;
      );
    }
  }
  
  export default graphql(getSymbolInfoQuery)(ProductChecker);
  </code></pre>
  
  <p>Error on the very last "export" line:</p>
  
  <pre><code>   Error: [ts]
      Argument of type 'typeof ProductChecker' is not assignable to parameter of type 'ComponentType&lt;Partial&lt;DataProps&lt;{}, {}&gt;&gt; &amp; Partial&lt;MutateProps&lt;{}, {}&gt;&gt;&gt;'.
        Type 'typeof ProductChecker' is not assignable to type 'ComponentClass&lt;Partial&lt;DataProps&lt;{}, {}&gt;&gt; &amp; Partial&lt;MutateProps&lt;{}, {}&gt;&gt;, any&gt;'.
          Types of parameters 'props' and 'props' are incompatible.
            Type 'Partial&lt;DataProps&lt;{}, {}&gt;&gt; &amp; Partial&lt;MutateProps&lt;{}, {}&gt;&gt;' is not assignable to type 'Props'.
              Types of property 'data' are incompatible.
                Type 'DataValue&lt;{}, {}&gt; | undefined' is not assignable to type 'Security'.
                  Type 'undefined' is not assignable to type 'Security'. [2345]
      class ProductChecker
  </code></pre>