Added variables types with Typescript

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

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

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,34 @@ 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 = {
+  input: {
+    id: string;
+    newDelta: string;
+  };
+};
+
 type Props = {
   solutionId: string;
 };
@@ -55,3 +79,24 @@ const withHistoryUsingName = graphql<Data, Props>(historyQuery, {
     ...organisationData,
   }),
 });
+
+// mutation with name
+class UpdateHistoryView extends React.Component<
+  ChildProps<Props & Mutation, MutationPayload>,
+  {}
+> {
+  updateHistory() {
+    this.props.updateHistory({
+      variables: {
+        input: {
+          id: 'historyId',
+          newDelta: 'newDelta',
+        },
+      },
+    });
+  }
+
+  render() {
+    return null;
+  }
+}