From 961ad4615cb55013cba238165a01988009a179c0 Mon Sep 17 00:00:00 2001
From: Mathieu Masy <mathieu@potloc.com>
Date: Thu, 17 Aug 2017 12:30:36 -0400
Subject: [PATCH 1/3] Added variables types with Typescript

---
 src/types.ts       | 24 +++++++++++++-----------
 test/typescript.ts | 43 ++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/src/types.ts b/src/types.ts
index 48ab68fc28..f9f71d81a2 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -18,8 +18,8 @@ import { MutationUpdaterFn } from 'apollo-client/core/watchQueryOptions';
 
 import { ExecutionResult, DocumentNode } from 'graphql';
 
-export interface MutationOpts {
-  variables?: Object;
+export interface MutationOpts<TVariables = OperationVariables> {
+  variables?: TVariables;
   optimisticResponse?: Object;
   updateQueries?: MutationQueryReducersMap;
   refetchQueries?: string[] | PureQueryOptions[];
@@ -28,9 +28,9 @@ export interface MutationOpts {
   notifyOnNetworkStatusChange?: boolean;
 }
 
-export interface QueryOpts {
+export interface QueryOpts<TVariables = OperationVariables> {
   ssr?: boolean;
-  variables?: { [key: string]: any };
+  variables?: TVariables;
   fetchPolicy?: FetchPolicy;
   pollInterval?: number;
   client?: ApolloClient;
@@ -39,17 +39,15 @@ export interface QueryOpts {
   skip?: boolean;
 }
 
-export interface QueryProps {
+export interface QueryProps<TVariables = OperationVariables> {
   error?: ApolloError;
   networkStatus: number;
   loading: boolean;
-  variables: {
-    [variable: string]: any;
-  };
+  variables: TVariables;
   fetchMore: (
     fetchMoreOptions: FetchMoreQueryOptions & FetchMoreOptions,
   ) => Promise<ApolloQueryResult<any>>;
-  refetch: (variables?: any) => Promise<ApolloQueryResult<any>>;
+  refetch: (variables?: TVariables) => Promise<ApolloQueryResult<any>>;
   startPolling: (pollInterval: number) => void;
   stopPolling: () => void;
   subscribeToMore: (options: SubscribeToMoreOptions) => () => void;
@@ -58,8 +56,8 @@ export interface QueryProps {
   ) => void;
 }
 
-export type MutationFunc<TResult> = (
-  opts: MutationOpts,
+export type MutationFunc<TResult, TVariables = OperationVariables> = (
+  opts: MutationOpts<TVariables>,
 ) => Promise<ApolloQueryResult<TResult>>;
 
 export interface OptionProps<TProps, TResult> {
@@ -77,6 +75,10 @@ export type NamedProps<P, R> = P & {
   ownProps: R;
 };
 
+export type OperationVariables = {
+  [key: string]: any;
+};
+
 export interface OperationOption<TProps, TResult> {
   options?:
     | QueryOpts
diff --git a/test/typescript.ts b/test/typescript.ts
index e79a4267b2..6b264fa4fb 100644
--- a/test/typescript.ts
+++ b/test/typescript.ts
@@ -6,7 +6,7 @@ import * as React from 'react';
 import gql from 'graphql-tag';
 
 import { graphql } from '../src';
-import { ChildProps, NamedProps, QueryProps } from '../src';
+import { ChildProps, NamedProps, QueryProps, MutationFunc } from '../src';
 
 const historyQuery = gql`
   query history($solutionId: String) {
@@ -17,10 +17,32 @@ const historyQuery = gql`
   }
 `;
 
+const historyMutation = gql`
+  mutation updateHistory($input: updateHistoryMutation) {
+    updateHistory(input: $input) {
+      solutionId
+      delta
+    }
+  }
+`;
+
 type Data = {
   history: Record<any, any>[];
 };
 
+type Mutation = {
+  updateHistory?: MutationFunc<MutationPayload, MutationInput>;
+};
+
+type MutationPayload = {
+  updateHistory: Record<any, any>[];
+};
+
+type MutationInput = {
+  id: string;
+  newDelta: string;
+};
+
 type Props = {
   solutionId: string;
 };
@@ -55,3 +77,22 @@ const withHistoryUsingName = graphql<Data, Props>(historyQuery, {
     ...organisationData,
   }),
 });
+
+// mutation with name
+class UpdateHistoryView extends React.Component<
+  ChildProps<Props & Mutation, MutationPayload>,
+  {}
+> {
+  updateHistory() {
+    this.props.updateHistory({
+      variables: {
+        id: 'historyId',
+        newDelta: 'newDelta',
+      },
+    });
+  }
+
+  render() {
+    return null;
+  }
+}

From 6494d287334a575747be7e548bc23792c9361633 Mon Sep 17 00:00:00 2001
From: Mathieu Masy <mathieu@potloc.com>
Date: Thu, 17 Aug 2017 13:03:15 -0400
Subject: [PATCH 2/3] Fixed test with correct input type

---
 test/typescript.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/test/typescript.ts b/test/typescript.ts
index 6b264fa4fb..07ed594301 100644
--- a/test/typescript.ts
+++ b/test/typescript.ts
@@ -39,8 +39,10 @@ type MutationPayload = {
 };
 
 type MutationInput = {
-  id: string;
-  newDelta: string;
+  input: {
+    id: string;
+    newDelta: string;
+  };
 };
 
 type Props = {
@@ -86,8 +88,10 @@ class UpdateHistoryView extends React.Component<
   updateHistory() {
     this.props.updateHistory({
       variables: {
-        id: 'historyId',
-        newDelta: 'newDelta',
+        input: {
+          id: 'historyId',
+          newDelta: 'newDelta',
+        },
       },
     });
   }

From 846e683ce632c096a0c0ea7a6fd0880f403dcee0 Mon Sep 17 00:00:00 2001
From: Mathieu Masy <mathieu@potloc.com>
Date: Thu, 7 Sep 2017 15:32:24 -0400
Subject: [PATCH 3/3] Updated changelog

---
 Changelog.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Changelog.md b/Changelog.md
index 2769c6f73b..333fcc74a3 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -2,6 +2,7 @@
 
 ### vNext
 - Added notifyOnNetworkStatusChange to QueryOpts and MutationOpts Typesccript definitions [#1034](https://github.com/apollographql/react-apollo/pull/1034)
+- Added variables types with Typescript [#997](https://github.com/apollographql/react-apollo/pull/997)
 
 ### 1.4.15
 - Fix: handle calling refetch in child componentDidMount