title: Using React.Components with apollo-client and TypeScript
body: <p>I'm trying to build a simple React component using <code>apollo-client</code> and TypeScript. </p>
  
  <p>This component just queries for the list of articles and displays them. Code is as follows:</p>
  
  <pre><code>import * as React from 'react';
  import graphql from "react-apollo/graphql";
  import { ARTICLES_FEED } from "../schemas/queries";
  import { Article, ArticlesFeedResponse } from "../schemas/results";
  import { ChildProps } from "react-apollo/types";
  
  const AppQL = graphql&lt;ArticlesFeedResponse, {}&gt;(ARTICLES_FEED);
  
  class App extends React.Component&lt;ChildProps&lt;{}, ArticlesFeedResponse&gt;, {}&gt; {
      render() {
          const { loading, feed, error } = this.props.data;
  
          if (loading) return &lt;div&gt;loading&lt;/div&gt;;
          if (error) return &lt;div&gt;{ error }&lt;/div&gt;;
          return (
              &lt;React.Fragment&gt;
                  &lt;h1&gt;It works!&lt;/h1&gt;
                  {this.props.data &amp;&amp; feed.map( (article:Article) =&gt; (
                      &lt;div&gt;{article.shortText}&lt;/div&gt;
                  ))}
              &lt;/React.Fragment&gt;
          );
      }
  }
  
  export default AppQL(App);
  </code></pre>
  
  <p>schemas/results:</p>
  
  <pre><code>export interface Article {
      id: string,
      shortText: string,
      publicationDate: string
  }
  
  export type ArticlesFeedResponse = {
    feed: Article[];
  }
  </code></pre>
  
  <p>schemas/queries:</p>
  
  <pre><code>import gql from 'graphql-tag'
  
  export const ARTICLES_FEED = gql`
      query ArticlesFeed {
          feed {
              id
              shortText
              publicationDate
          }
      }
  `;
  </code></pre>
  
  <p>Nonetheless, signatures match, but i still get an error: </p>
  
  <p><code>Type '(QueryProps&lt;OperationVariables&gt; &amp; Partial&lt;ArticlesFeedResponse&gt;) | undefined' has no property 'loading' and no string index signature.</code></p>
  
  <p>I don't get what's happening - types imported are:</p>
  
  <p>ChildProps:</p>
  
  <pre><code>export declare type ChildProps&lt;P, R&gt; = P &amp; {
      data?: QueryProps &amp; Partial&lt;R&gt;;
      mutate?: MutationFunc&lt;R&gt;;
  };
  </code></pre>
  
  <p>QueryProps:</p>
  
  <pre><code>export interface QueryProps&lt;TVariables = OperationVariables&gt; {
      error?: ApolloError;
      networkStatus: number;
      loading: boolean;
      variables: TVariables;
      fetchMore: (fetchMoreOptions: FetchMoreQueryOptions &amp; FetchMoreOptions) =&gt; Promise&lt;ApolloQueryResult&lt;any&gt;&gt;;
      refetch: (variables?: TVariables) =&gt; Promise&lt;ApolloQueryResult&lt;any&gt;&gt;;
      startPolling: (pollInterval: number) =&gt; void;
      stopPolling: () =&gt; void;
      subscribeToMore: (options: SubscribeToMoreOptions) =&gt; () =&gt; void;
      updateQuery: (mapFn: (previousQueryResult: any, options: UpdateQueryOptions) =&gt; any) =&gt; void;
  }
  </code></pre>
  
  <p>So <code>ChildProps</code> should contain both <code>loading</code> and <code>error</code> properties. I guess an error comes from <code>| undefined</code> part, but i can't get why this union even comes up.</p>
  
  <p>Any suggestions?</p>
  
  <p>P. S. If i do not import default <code>ChildProps</code> from <code>react-apollo/types</code>, but rather use this updated version:</p>
  
  <pre><code>type ChildProps&lt;P, R&gt; = P &amp; {
      data: QueryProps &amp; R;
      mutate?: MutationFunc&lt;R&gt;;
  };
  </code></pre>
  
  <p>my code is working. What i still don't get is - did i do something wrong or is this a bug in <code>react-apollo/types</code> package?</p>