Merge pull request #1617 from leoasis/strict_type_check

Improve Query and graphql types. Strict type check with Typescript.

Changelog.md

@@ -2,6 +2,8 @@
 
 ### vNext
 
+* Stricter type checking in the codebase. [#1617](https://github.com/apollographql/react-apollo/pull/1617)
+* Improved TS types (even more) in both `Query` component and `graphql` HoC. [#1617](https://github.com/apollographql/react-apollo/pull/1617)
 * Fix React Component detection bug in `getDataFromTree` [#1604](https://github.com/apollographql/react-apollo/pull/1604)
 
 ### 2.1.0-beta.0

package.json

@@ -36,7 +36,7 @@
   "bundlesize": [
     {
       "path": "./lib/react-apollo.browser.umd.js",
-      "maxSize": "6 KB"
+      "maxSize": "6.5 KB"
     }
   ],
   "lint-staged": {
@@ -84,13 +84,17 @@
   },
   "devDependencies": {
     "@types/enzyme": "3.1.8",
+    "@types/enzyme-adapter-react-16": "^1.0.1",
     "@types/graphql": "0.11.7",
     "@types/invariant": "2.2.29",
     "@types/jest": "22.0.1",
     "@types/lodash": "4.14.99",
     "@types/object-assign": "4.0.30",
-    "@types/react": "16.0.34",
+    "@types/prop-types": "15.5.2",
+    "@types/react": "16.0.35",
     "@types/react-dom": "16.0.3",
+    "@types/react-test-renderer": "16.0.0",
+    "@types/recompose": "0.24.4",
     "@types/zen-observable": "0.5.3",
     "apollo-cache-inmemory": "1.1.5",
     "apollo-client": "2.2.1",

src/ApolloConsumer.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import ApolloClient from 'apollo-client';
-const invariant = require('invariant');
+import invariant from 'invariant';
 
 export interface ApolloConsumerProps {
-  children: (client: ApolloClient<any>) => React.ReactElement<any>;
+  children: (client: ApolloClient<any>) => React.ReactElement<any> | null;
 }
 
 const ApolloConsumer: React.StatelessComponent<ApolloConsumerProps> = (

src/ApolloProvider.tsx

@@ -3,8 +3,7 @@ import * as PropTypes from 'prop-types';
 import { Component } from 'react';
 import ApolloClient from 'apollo-client';
 import QueryRecyclerProvider from './QueryRecyclerProvider';
-
-const invariant = require('invariant');
+import invariant from 'invariant';
 
 export interface ApolloProviderProps<TCache> {
   client: ApolloClient<TCache>;

src/Query.tsx

@@ -4,24 +4,62 @@ import ApolloClient, {
   ObservableQuery,
   ApolloQueryResult,
   ApolloError,
-  FetchMoreOptions,
-  UpdateQueryOptions,
-  FetchMoreQueryOptions,
   FetchPolicy,
   ApolloCurrentResult,
+  NetworkStatus,
 } from 'apollo-client';
 import { DocumentNode } from 'graphql';
 import { ZenObservable } from 'zen-observable-ts';
 import { OperationVariables } from './types';
 import { parser, DocumentType } from './parser';
+import pick from 'lodash/pick';
+import shallowEqual from 'fbjs/lib/shallowEqual';
+import invariant from 'invariant';
 
-const shallowEqual = require('fbjs/lib/shallowEqual');
-const invariant = require('invariant');
-const pick = require('lodash/pick');
+// Improved FetchMoreOptions type, need to port them back to Apollo Client
+export interface FetchMoreOptions<TData, TVariables> {
+  updateQuery: (
+    previousQueryResult: TData,
+    options: {
+      fetchMoreResult?: TData;
+      variables: TVariables;
+    },
+  ) => TData;
+}
 
-type ObservableQueryFields<TData> = Pick<ObservableQuery<TData>, 'refetch' | 'fetchMore' | 'updateQuery' | 'startPolling' | 'stopPolling'>;
+// Improved FetchMoreQueryOptions type, need to port them back to Apollo Client
+export interface FetchMoreQueryOptions<TVariables, K extends keyof TVariables> {
+  variables: Pick<TVariables, K>;
+}
+
+// Improved ObservableQuery field types, need to port them back to Apollo Client
+export type ObservableQueryFields<TData, TVariables> = Pick<
+  ObservableQuery<TData>,
+  'startPolling' | 'stopPolling'
+> & {
+  refetch: (variables?: TVariables) => Promise<ApolloQueryResult<TData>>;
+  fetchMore: (<K extends keyof TVariables>(
+    fetchMoreOptions: FetchMoreQueryOptions<TVariables, K> &
+      FetchMoreOptions<TData, TVariables>,
+  ) => Promise<ApolloQueryResult<TData>>) &
+    (<TData2, TVariables2, K extends keyof TVariables2>(
+      fetchMoreOptions: { query: DocumentNode } & FetchMoreQueryOptions<
+        TVariables2,
+        K
+      > &
+        FetchMoreOptions<TData2, TVariables2>,
+    ) => Promise<ApolloQueryResult<TData2>>);
+  updateQuery: (
+    mapFn: (
+      previousQueryResult: TData,
+      options: { variables?: TVariables },
+    ) => TData,
+  ) => void;
+};
 
-function observableQueryFields<TData>(observable: ObservableQuery<TData>): ObservableQueryFields<TData> {
+function observableQueryFields<TData, TVariables>(
+  observable: ObservableQuery<TData>,
+): ObservableQueryFields<TData, TVariables> {
   const fields = pick(
     observable,
     'refetch',
@@ -32,33 +70,34 @@ function observableQueryFields<TData>(observable: ObservableQuery<TData>): Obser
   );
 
   Object.keys(fields).forEach(key => {
-    if (typeof fields[key] === 'function') {
-      fields[key] = fields[key].bind(observable);
+    const k = key as
+      | 'refetch'
+      | 'fetchMore'
+      | 'updateQuery'
+      | 'startPolling'
+      | 'stopPolling';
+    if (typeof fields[k] === 'function') {
+      fields[k] = fields[k].bind(observable);
     }
   });
 
-  return fields;
+  // TODO: Need to cast this because we improved the type of `updateQuery` to be parametric
+  // on variables, while the type in Apollo client just has object.
+  // Consider removing this when that is properly typed
+  return fields as ObservableQueryFields<TData, TVariables>;
 }
 
 function isDataFilled<TData>(data: {} | TData): data is TData {
   return Object.keys(data).length > 0;
 }
 
-export interface QueryResult<TData = any, TVariables = OperationVariables> {
+export interface QueryResult<TData = any, TVariables = OperationVariables>
+  extends ObservableQueryFields<TData, TVariables> {
   client: ApolloClient<any>;
   data?: TData;
   error?: ApolloError;
-  fetchMore: (
-    fetchMoreOptions: FetchMoreQueryOptions & FetchMoreOptions,
-  ) => Promise<ApolloQueryResult<any>>;
   loading: boolean;
-  networkStatus: number;
-  refetch: (variables?: TVariables) => Promise<ApolloQueryResult<any>>;
-  startPolling: (pollInterval: number) => void;
-  stopPolling: () => void;
-  updateQuery: (
-    mapFn: (previousQueryResult: any, options: UpdateQueryOptions) => any,
-  ) => void;
+  networkStatus: NetworkStatus;
 }
 
 export interface QueryProps<TData = any, TVariables = OperationVariables> {
@@ -75,20 +114,24 @@ export interface QueryState<TData = any> {
   result: ApolloCurrentResult<TData>;
 }
 
-class Query<TData = any, TVariables = OperationVariables> extends React.Component<
-  QueryProps<TData, TVariables>,
-  QueryState<TData>
-> {
+export interface QueryContext {
+  client: ApolloClient<Object>;
+}
+
+class Query<
+  TData = any,
+  TVariables = OperationVariables
+> extends React.Component<QueryProps<TData, TVariables>, QueryState<TData>> {
   static contextTypes = {
     client: PropTypes.object.isRequired,
   };
+  context: QueryContext;
 
-  state: QueryState<TData>;
-  private client: ApolloClient<any>;
+  private client: ApolloClient<Object>;
   private queryObservable: ObservableQuery<TData>;
   private querySubscription: ZenObservable.Subscription;
 
-  constructor(props: QueryProps<TData, TVariables>, context: any) {
+  constructor(props: QueryProps<TData, TVariables>, context: QueryContext) {
     super(props, context);
 
     invariant(
@@ -130,7 +173,10 @@ class Query<TData = any, TVariables = OperationVariables> extends React.Componen
     this.startQuerySubscription();
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
+  componentWillReceiveProps(
+    nextProps: QueryProps<TData, TVariables>,
+    nextContext: QueryContext,
+  ) {
     if (
       shallowEqual(this.props, nextProps) &&
       this.client === nextContext.client
@@ -157,7 +203,9 @@ class Query<TData = any, TVariables = OperationVariables> extends React.Componen
     return children(queryResult);
   }
 
-  private initializeQueryObservable = props => {
+  private initializeQueryObservable = (
+    props: QueryProps<TData, TVariables>,
+  ) => {
     const {
       variables,
       pollInterval,

src/Subscriptions.tsx

@@ -13,13 +13,16 @@ const invariant = require('invariant');
 export interface SubscriptionResult<TData = any> {
   loading: boolean;
   data?: TData;
-  error: ApolloError;
+  error?: ApolloError;
 }
 
-export interface SubscriptionProps {
+export interface SubscriptionProps<
+  TData = any,
+  TVariables = OperationVariables
+> {
   query: DocumentNode;
-  variables?: OperationVariables;
-  children: (result: any) => React.ReactNode;
+  variables?: TVariables;
+  children: (result: SubscriptionResult<TData>) => React.ReactNode;
 }
 
 export interface SubscriptionState<TData = any> {
@@ -28,8 +31,12 @@ export interface SubscriptionState<TData = any> {
   error?: ApolloError;
 }
 
-class Subscription<TData = any> extends React.Component<
-  SubscriptionProps,
+export interface SubscriptionContext {
+  client: ApolloClient<Object>;
+}
+
+class Subscription<TData = any, TVariables = any> extends React.Component<
+  SubscriptionProps<TData, TVariables>,
   SubscriptionState<TData>
 > {
   static contextTypes = {
@@ -40,7 +47,10 @@ class Subscription<TData = any> extends React.Component<
   private queryObservable: Observable<any>;
   private querySubscription: ZenObservable.Subscription;
 
-  constructor(props: SubscriptionProps, context: any) {
+  constructor(
+    props: SubscriptionProps<TData, TVariables>,
+    context: SubscriptionContext,
+  ) {
     super(props, context);
 
     invariant(
@@ -56,7 +66,10 @@ class Subscription<TData = any> extends React.Component<
     this.startSubscription();
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
+  componentWillReceiveProps(
+    nextProps: SubscriptionProps<TData, TVariables>,
+    nextContext: SubscriptionContext,
+  ) {
     if (
       shallowEqual(this.props, nextProps) &&
       this.client === nextContext.client
@@ -88,7 +101,7 @@ class Subscription<TData = any> extends React.Component<
     return this.props.children(result);
   }
 
-  private initialize = props => {
+  private initialize = (props: SubscriptionProps<TData, TVariables>) => {
     this.queryObservable = this.client.subscribe({
       query: props.query,
       variables: props.variables,
@@ -110,15 +123,15 @@ class Subscription<TData = any> extends React.Component<
     };
   };
 
-  private updateCurrentData = result => {
+  private updateCurrentData = (result: SubscriptionResult<TData>) => {
     this.setState({
       data: result.data,
       loading: false,
       error: undefined,
     });
   };
 
-  private updateError = error => {
+  private updateError = (error: any) => {
     this.setState({
       error,
       loading: false,