Type checking client-side GraphQL with Apollo

client.js

// @flow
import * as React from 'react';
import compose from 'recompose/compose';
import getThreadById from './queries'
import type { GetThreadType } from './queries';

type Props = {
  data: {
    thread: GetThreadType,
    ...
  },
  ...
};

class Thread extends React.Component<Props> {
  render() {
    const { data: { thread }} = this.props

    // field not found on GetThreadType
    const shouldThrowFlowError = thread && thread.badField
    // can't call map on this type
    const shouldAlsoThrowFlowError = thread && thread.content.map(a => a.body)
    
    if (thread) {
      return (
        ...
      )
    }

    ...
  }
}

export default compose(getThreadById)(Thread);

fragment.js

// @flow
import gql from 'graphql-tag';

export type ThreadInfoType = {
  id: string,
  messageCount: number,
  createdAt: Date,
  modifiedAt: ?Date,
  lastActive: ?Date,
  content: {
    title: string,
    body: string,
  },
};

export default gql`
  fragment threadInfo on Thread {
    id: string,
    messageCount: number,
    createdAt: Date,
    modifiedAt: ?Date,
    lastActive: ?Date,
    content: {
      title: string,
      body: string,
    }
  }
`;

query.js

// @flow
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import threadInfoFragment from './fragment';
import type { ThreadInfoType } from './fragment';

export type GetThreadType = {
  ...$Exact<ThreadInfoType>,
};

export const getThreadByIdQuery = gql`
  query getThread($id: ID!) {
    thread(id: $id) {
      ...threadInfo
    }
  }
  ${threadInfoFragment}
`;

const getThreadByIdOptions = {
  options: ({ id }) => ({
    variables: {
      id,
    },
  }),
};

export deafult graphql(getThreadByIdQuery, getThreadByIdOptions);