Merge pull request #40 from apollostack/methods-observable

Methods moved to an observable apollographql/apollo-client#362
kamilkisiela · Jul 16, 2016 · 3143269 · 3143269
2 parents 6207b54 + a2a7ba7
commit 3143269
Show file tree

Hide file tree

Showing 10 changed files with 127 additions and 107 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### vNEXT
 
 - Passing all the options of mutation in `Apollo` decorator [PR #39](https://github.com/apollostack/angular2-apollo/pull/39)
+- Added support for `apollo-client` breaking change that moves methods to query's observable ([PR #40](https://github.com/apollostack/angular2-apollo/pull/40))
 
 ### v0.3.0
 

diff --git a/examples/hello-world/.meteor/.gitignore b/examples/hello-world/.meteor/.gitignore
@@ -1 +1,2 @@
+dev_bundle
 local
diff --git a/examples/hello-world/.meteor/packages b/examples/hello-world/.meteor/packages
@@ -19,4 +19,3 @@ ecmascript              # Enable ECMAScript2015+ syntax in app code
 autopublish             # Publish all data to the clients (for prototyping)
 insecure                # Allow all DB writes from clients (for prototyping)
 angular2-compilers
-barbatus:angular2-runtime
diff --git a/examples/hello-world/.meteor/release b/examples/hello-world/.meteor/release
@@ -1 +1 @@
-[email protected].1
+[email protected].4.4
diff --git a/examples/hello-world/.meteor/versions b/examples/hello-world/.meteor/versions
@@ -1,71 +1,72 @@
-[email protected]
-[email protected]_1
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-barbatus:[email protected]_2
-barbatus:[email protected]
-barbatus:[email protected]
-barbatus:[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
-[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]_1
+barbatus:[email protected]
+barbatus:[email protected]_1
+barbatus:[email protected]
+barbatus:[email protected]
+barbatus:[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]_1
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+urigo:[email protected]
+[email protected]
+[email protected]
+[email protected]
diff --git a/examples/hello-world/client/main.ts b/examples/hello-world/client/main.ts
@@ -1,10 +1,14 @@
+import 'reflect-metadata';
+import 'rxjs';
+import 'zone.js/dist/zone';
+import 'zone.js/dist/long-stack-trace-zone';
+
 import {
   bootstrap,
 } from '@angular/platform-browser-dynamic';
 
 import {
   Component,
-  Injectable,
 } from '@angular/core';
 
 import {
@@ -15,24 +19,25 @@ import ApolloClient, {
   createNetworkInterface,
 } from 'apollo-client';
 
-import gql from 'apollo-client/gql';
+import gql from 'graphql-tag';
 
 import {
-  GraphQLResult,
-} from 'graphql';
+  ApolloQueryResult,
+} from 'apollo-client';
+
+import template from './main.html';
 
 const client = new ApolloClient({
   networkInterface: createNetworkInterface('/graphql'),
 });
 
 @Component({
   selector: 'app',
-  templateUrl: 'client/main.html',
+  template,
 })
-@Injectable()
 @Apollo({
   client,
-  queries(state: any) {
+  queries(component: Main) {
     return {
       data: {
         query: gql`
@@ -48,12 +53,12 @@ const client = new ApolloClient({
           }
         `,
         variables: {
-          name: state.nameFilter,
+          name: component.nameFilter,
         },
       },
     };
   },
-  mutations(state: any) {
+  mutations(component: Main) {
     return {
       addUser: (firstName: string) => ({
         mutation: gql`
@@ -76,7 +81,7 @@ const client = new ApolloClient({
         `,
         variables: {
           firstName,
-          lastName: state.lastName,
+          lastName: component.lastName,
         },
       }),
     };
@@ -87,26 +92,18 @@ class Main {
   public firstName: string;
   public lastName: string;
   public nameFilter: string;
-  public addUser: (firstName: string) => Promise<GraphQLResult>;
+  public addUser: (firstName: string) => Promise<ApolloQueryResult>;
 
   public newUser(firstName: string) {
     this.addUser(firstName)
-      .then((graphQLResult: GraphQLResult) => {
-        const { errors, data } = graphQLResult;
-
-        if (data) {
-          console.log('got data', data);
-        }
-
-        if (errors) {
-          console.log('got some GraphQL execution errors', errors);
-        }
+      .then(({ data }: ApolloQueryResult) => {
+        console.log('got data', data);
 
         // get new data
         this.data.refetch();
       })
-      .catch((error: any) => {
-        console.log('there was an error sending the query', error);
+      .catch((errors: any) => {
+        console.log('there was an error sending the query', errors);
       });
   }
 }

diff --git a/examples/hello-world/package.json b/examples/hello-world/package.json
@@ -12,12 +12,13 @@
     "@angular/platform-browser": "^2.0.0-rc.1",
     "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
     "angular2-apollo": "file:../../",
-    "apollo-client": "^0.3.12",
+    "apollo-client": "^0.4.1",
     "casual-browserify": "^1.5.2",
     "es6-shim": "^0.35.1",
     "express": "^4.13.4",
     "fs.extra": "^1.3.2",
     "graphql": "^0.5.0",
+    "graphql-tag": "^0.1.9",
     "graphql-tools": "^0.3.8",
     "http-proxy-middleware": "^0.14.0",
     "meteor-node-stubs": "~0.2.0",

diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
   "homepage": "https://github.com/apollostack/angular2-apollo#readme",
   "dependencies": {
     "@angular/core": "^2.0.0-rc.1",
-    "apollo-client": "^0.3.0",
+    "apollo-client": "^0.3.0 || ^0.4.0",
     "graphql-tag": "^0.1.7",
     "lodash": "^4.11.1"
   },

diff --git a/src/apolloDecorator.ts b/src/apolloDecorator.ts
@@ -23,6 +23,7 @@ interface ApolloHandleOptions extends ApolloOptions {
 class ApolloHandle {
   private lastQueryVariables: Object = {};
   private queryHandles: Object = {};
+  private querySubscriptions: Object = {};
 
   private component;
   private client;
@@ -65,7 +66,7 @@ class ApolloHandle {
   }
 
   public unsubscribe(queryName?: string): void {
-    const allQueries = this.getAllQueries();
+    const allQueries = this.getAllQueriesSubs();
 
     if (allQueries) {
       if (queryName) {
@@ -93,8 +94,16 @@ class ApolloHandle {
     return this.queryHandles[name];
   }
 
-  private getAllQueries() {
-    return this.queryHandles;
+  private setQuerySub(name, sub): void {
+    this.querySubscriptions[name] = sub;
+  }
+
+  private getQuerySub(name) {
+    return this.querySubscriptions[name];
+  }
+
+  private getAllQueriesSubs() {
+    return this.querySubscriptions;
   }
 
   /**
@@ -148,6 +157,15 @@ class ApolloHandle {
     };
   }
 
+  // XXX https://github.com/apollostack/apollo-client/pull/362
+  private backcompat(queryName: string, method: string, args?) {
+    if (this.getQuerySub(queryName)[method]) {
+      return this.getQuerySub(queryName)[method](...args);
+    }
+
+    return this.getQuery(queryName)[method](...args);
+  }
+
   private subscribe(queryName: string, obs: any) {
     this.component[queryName] = {
       errors: null,
@@ -160,17 +178,19 @@ class ApolloHandle {
       assign(this.component[queryName], {
         errors,
         loading: false,
-        unsubscribe: () => this.getQuery(queryName).unsubscribe(),
-        refetch: (...args) => this.getQuery(queryName).refetch(...args),
-        stopPolling: () => this.getQuery(queryName).stopPolling(),
-        startPolling: (...args) => this.getQuery(queryName).startPolling(...args),
+        unsubscribe: () => this.getQuerySub(queryName).unsubscribe(),
+        refetch: (...args) => this.backcompat(queryName, 'refetch', args),
+        stopPolling: () => this.backcompat(queryName, 'stopPolling'),
+        startPolling: (...args) => this.backcompat(queryName, 'startPolling', args),
       }, changed ? data : {});
     };
 
     // we don't want to have multiple subscriptions
     this.unsubscribe(queryName);
 
-    this.setQuery(queryName, obs.subscribe({
+    this.setQuery(queryName, obs);
+
+    this.setQuerySub(queryName, obs.subscribe({
       next: setQuery,
       error(errors) {
         setQuery({ errors });

diff --git a/tests/apolloDecorator/queries.ts b/tests/apolloDecorator/queries.ts
@@ -218,7 +218,7 @@ describe('Apollo - decorator - queries()', () => {
       setTimeout(() => {
         expect(typeof component.data.unsubscribe).toEqual('function');
 
-        const spy = spyOn(component.__apolloHandle.getQuery('data'), 'unsubscribe');
+        const spy = spyOn(component.__apolloHandle.getQuerySub('data'), 'unsubscribe');
         component.data.unsubscribe();
 
         expect(spy).toHaveBeenCalled();