feat(core): Allows to type the operation variables

kamilkisiela · Oct 30, 2017 · f520709 · f520709
1 parent 7051bb3
commit f520709
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git a/packages/apollo-angular/CHANGELOG.md b/packages/apollo-angular/CHANGELOG.md
@@ -10,6 +10,7 @@
 - Simpler and less error prone API for watching queries thanks to `QueryRef`
 - More AoT friendly
 - Brings back Server-Side Rendering
+- Allows to type the operation variables
 
 **BREAKING CHANGES:** - [see Migation](../../Migration.md)
 

diff --git a/packages/apollo-angular/src/Apollo.ts b/packages/apollo-angular/src/Apollo.ts
@@ -11,25 +11,31 @@ import {Observable} from 'rxjs/Observable';
 import {from} from 'rxjs/observable/from';
 
 import {QueryRef} from './QueryRef';
-import {ApolloOptions} from './types';
+import {ApolloOptions, TypedVariables} from './types';
 import {fromPromise, wrapWithZone} from './utils';
 
+export type R = Record<string, any>;
+
 export class ApolloBase<TCacheShape> {
   constructor(private _client?: ApolloClient<TCacheShape>) {}
 
-  public watchQuery<T>(options: WatchQueryOptions): QueryRef<T> {
+  public watchQuery<T, V = R>(
+    options: WatchQueryOptions & TypedVariables<V>,
+  ): QueryRef<T> {
     return new QueryRef<T>(this.client.watchQuery<T>({...options}));
   }
 
-  public query<T>(
-    options: WatchQueryOptions,
+  public query<T, V = R>(
+    options: WatchQueryOptions & TypedVariables<V>,
   ): Observable<ApolloQueryResult<T>> {
     return fromPromise<ApolloQueryResult<T>>(() =>
       this.client.query<T>({...options}),
     );
   }
 
-  public mutate<T>(options: MutationOptions): Observable<FetchResult<T>> {
+  public mutate<T, V = R>(
+    options: MutationOptions & TypedVariables<V>,
+  ): Observable<FetchResult<T>> {
     return fromPromise<FetchResult<T>>(() =>
       this.client.mutate<T>({...options}),
     );

diff --git a/packages/apollo-angular/src/types.ts b/packages/apollo-angular/src/types.ts
@@ -1,3 +1,6 @@
 // XXX: 2.0.0-rc.3
 // import {ApolloClientOptions} from 'apollo-client';
 export type ApolloOptions = Record<string, any>;
+export type TypedVariables<T> = {
+  variables?: T;
+};
diff --git a/packages/apollo-angular/tests/Apollo.spec.ts b/packages/apollo-angular/tests/Apollo.spec.ts
@@ -256,10 +256,21 @@ describe('Apollo', () => {
 
       const client = apollo.getClient();
 
-      const options = {mutation: 'gql'} as any;
+      const options = {
+        mutation: gql`
+          mutation setFoo($foo: String!) {
+            setFoo(foo: $foo) {
+              foo
+            }
+          }
+        `,
+        variables: {
+          foo: 'test',
+        },
+      };
       client.mutate = jest.fn().mockReturnValue(Promise.resolve('mutation'));
 
-      const obs = apollo.mutate(options);
+      const obs = apollo.mutate<any, {foo: string}>(options);
 
       obs.subscribe({
         next(r) {