Fix React Apollo graphql decorator

react-apollo-fix.ts

import * as React from 'react';
import { DocumentNode } from 'graphql';
import { graphql as _graphql, OperationOption } from 'react-apollo';

type CompositeComponent<P> =
  | React.ComponentClass<P>
  | React.StatelessComponent<P>;

interface InferableComponentDecorator<TOwnProps> {
  <T extends CompositeComponent<TOwnProps>>(component: T): T;
}

interface DecoratorFactory {
  <TResult = {}, TProps = {}>(
    document: DocumentNode,
    operationOptions?: OperationOption<TProps, TResult>,
  ): InferableComponentDecorator<TProps>;
}

export const graphql = _graphql as DecoratorFactory;

users-page.tsx

import * as React from 'react';

import { gql, ChildProps } from 'react-apollo';
import { graphql } from './react-apollo-fix.ts';

const query = gql`
  query {
    users {
      uid
    }
  }
`;

interface Data {
  users: Array<{ uid: string }>;
}

interface Props {
  foo: boolean;
}

interface State {
  bar: string;
}

type InnerProps = ChildProps<Props, Data>;

@graphql<Data, Props>(query)
export class UsersPage extends React.PureComponent<Props, State> {
  state = { bar: '' };

  private get innerProps() {
    return this.props as InnerProps;
  }

  render() {
    const { data } = this.innerProps;

    return (
      <ul>
        {data &&
          data.users.map(u =>
            <li key={u.uid}>
              {u.uid}
            </li>,
          )}
      </ul>
    );
  }
}