Update to observable api (#9)

* update to new obervable api

* include typings in project

* add refetch to props

* update docs

.gitignore

@@ -29,4 +29,3 @@ node_modules
 # don't commit compiled files
 lib
 test-lib
-typings

README.md

@@ -141,6 +141,7 @@ Each key on the object returned by mapQueriesToProps should be made up of the sa
   loading: boolean,
   error: Error,
   result: GraphQLResult,
+  refetch: Function
 }
 ```
 
@@ -180,4 +181,4 @@ const CategoryWithData = connect({
 export default CategoryWithData;
 ```
 
-In this case, `CategoryWithData` gets two props: `category` and `selectedCategory`.
+In this case, `CategoryWithData` gets two props: `category` and `selectedCategory`.

package.json

@@ -32,7 +32,7 @@
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0-0",
     "redux": "^2.0.0 || ^3.0.0",
-    "apollo-client": "0.0.5"
+    "apollo-client": "^0.1.0"
   },
   "devDependencies": {
     "apollo-client": "0.0.5",

src/connect.tsx

@@ -237,7 +237,7 @@ export default function connect(opts?: ConnectOptions) {
             if (!this.queryHandles.hasOwnProperty(key)) {
               continue;
             }
-            this.queryHandles[key].stop();
+            this.queryHandles[key].unsubscribe();
           }
         }
       }
@@ -259,9 +259,13 @@ export default function connect(opts?: ConnectOptions) {
           this.setState(this.store.getState());
         };
 
-        handle.subscribe({
-          onResult: forceRender,
-          onError(error) { forceRender({ error }); },
+        this.queryHandles[key] = handle.subscribe({
+          next: forceRender,
+          error(error) { forceRender({ error }); },
+        });
+
+        this.data[key] = assign(this.data[key], {
+          refetch: this.queryHandles[key].refetch,
         });
       }
 
@@ -376,5 +380,3 @@ export default function connect(opts?: ConnectOptions) {
   };
 
 };
-
-

test/connect.tsx

@@ -34,20 +34,49 @@ describe('connect', () => {
 
   class ProviderMock extends React.Component<any, any> {
 
+    static propTypes = {
+      store: React.PropTypes.shape({
+        subscribe: React.PropTypes.func.isRequired,
+        dispatch: React.PropTypes.func.isRequired,
+        getState: React.PropTypes.func.isRequired,
+      }),
+      client: React.PropTypes.object.isRequired,
+      children: React.PropTypes.element.isRequired,
+    };
+
     static childContextTypes = {
       store: React.PropTypes.object.isRequired,
       client: React.PropTypes.object.isRequired,
     };
 
+    public store: any;
+    public client: any;
+
+    constructor(props, context) {
+      super(props, context);
+      this.client = props.client;
+
+      if (props.store) {
+        this.store = props.store;
+        return;
+      }
+
+      // intialize the built in store if none is passed in
+      props.client.initStore();
+      this.store = props.client.store;
+
+    }
+
     getChildContext() {
       return {
-        store: this.props.store,
-        client: this.props.client,
+        store: this.store,
+        client: this.client,
       };
     }
 
     render() {
-      return React.Children.only(this.props.children);
+      const { children } = this.props;
+      return React.Children.only(children);
     }
   };
 
@@ -398,6 +427,126 @@ describe('connect', () => {
         expect(props.people.loading).to.be.true;
       });
 
+      it('stops the query after unmounting', () => {
+        const query = `
+          query people {
+            allPeople(first: 1) {
+              people {
+                name
+              }
+            }
+          }
+        `;
+
+        const data = {
+          allPeople: {
+            people: [
+              {
+                name: 'Luke Skywalker',
+              },
+            ],
+          },
+        };
+
+        const networkInterface = mockNetworkInterface({
+          request: { query },
+          result: { data },
+        });
+
+        const client = new ApolloClient({
+          networkInterface,
+        });
+
+      function mapQueriesToProps() {
+          return {
+            people: { query },
+          };
+        };
+
+        @connect({ mapQueriesToProps })
+        class Container extends React.Component<any, any> {
+          render() {
+            return <Passthrough {...this.props} />;
+          }
+        };
+
+        const wrapper = mount(
+          <ProviderMock client={client}>
+            <Container pass='through' baz={50} />
+          </ProviderMock>
+        ) as any;
+
+        const props = wrapper.find('span').props() as any;
+
+        expect(props.people).to.exist;
+        expect(props.people.loading).to.be.true;
+
+        expect(wrapper.unmount()).to.not.throw;
+      });
+
+      it('exposes refetch as part of the props api', () => {
+        const store = createStore(() => ({
+          foo: 'bar',
+          baz: 42,
+          hello: 'world',
+        }));
+
+        const query = `
+          query people {
+            allPeople(first: 1) {
+              people {
+                name
+              }
+            }
+          }
+        `;
+
+        const data = {
+          allPeople: {
+            people: [
+              {
+                name: 'Luke Skywalker',
+              },
+            ],
+          },
+        };
+
+        const networkInterface = mockNetworkInterface({
+          request: { query },
+          result: { data },
+        });
+
+        const client = new ApolloClient({
+          networkInterface,
+        });
+
+      function mapQueriesToProps() {
+          return {
+            people: { query },
+          };
+        };
+
+        @connect({ mapQueriesToProps })
+        class Container extends React.Component<any, any> {
+          render() {
+            return <Passthrough {...this.props} />;
+          }
+        };
+
+        const wrapper = mount(
+          <ProviderMock store={store} client={client}>
+            <Container pass='through' baz={50} />
+          </ProviderMock>
+        );
+
+        const props = wrapper.find('span').props() as any;
+
+        expect(props.people).to.exist;
+        expect(props.people.refetch).to.be.exist;
+        expect(props.people.refetch).to.be.instanceof(Function);
+        expect(props.people.refetch).to.not.throw;
+      });
+
       it('allows variables as part of the request', () => {
         const store = createStore(() => ({
           foo: 'bar',

typings/browser.d.ts

@@ -0,0 +1,17 @@
+/// <reference path="browser/ambient/enzyme/index.d.ts" />
+/// <reference path="browser/ambient/es6-promise/index.d.ts" />
+/// <reference path="browser/ambient/graphql/index.d.ts" />
+/// <reference path="browser/ambient/isomorphic-fetch/index.d.ts" />
+/// <reference path="browser/ambient/mocha/index.d.ts" />
+/// <reference path="browser/ambient/node/index.d.ts" />
+/// <reference path="browser/ambient/react-addons-test-utils/index.d.ts" />
+/// <reference path="browser/ambient/react-dom/index.d.ts" />
+/// <reference path="browser/ambient/react/index.d.ts" />
+/// <reference path="browser/definitions/apollo-client/index.d.ts" />
+/// <reference path="browser/definitions/chai-enzyme/index.d.ts" />
+/// <reference path="browser/definitions/chai/index.d.ts" />
+/// <reference path="browser/definitions/invariant/index.d.ts" />
+/// <reference path="browser/definitions/lodash/index.d.ts" />
+/// <reference path="browser/definitions/object-assign/index.d.ts" />
+/// <reference path="browser/definitions/react-redux/index.d.ts" />
+/// <reference path="browser/definitions/sinon/index.d.ts" />