diff --git a/package.json b/package.json index 9d013664ff5..16973b976d6 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,8 @@ "lodash.isobject": "^3.0.2", "lodash.isstring": "^4.0.1", "lodash.isundefined": "^3.0.1", - "redux": "^3.3.1" + "redux": "^3.3.1", + "symbol-observable": "^0.2.4" }, "devDependencies": { "async": "^1.5.2", @@ -77,6 +78,7 @@ "tslint": "^3.6.0", "typescript": "^1.8.9", "typings": "^0.7.9", - "uglify-js": "^2.6.2" + "uglify-js": "^2.6.2", + "rxjs": "^5.0.0-beta.7" } } diff --git a/src/util/Observable.ts b/src/util/Observable.ts index 900e58b3b7f..e6de59016f2 100644 --- a/src/util/Observable.ts +++ b/src/util/Observable.ts @@ -1,6 +1,8 @@ // This simplified polyfill attempts to follow the ECMAScript Observable proposal. // See https://github.com/zenparsing/es-observable +import * as $$observable from 'symbol-observable' + export type CleanupFunction = () => void; export type SubscriberFunction = (observer: Observer) => (Subscription | CleanupFunction); @@ -15,6 +17,10 @@ export class Observable { this.subscriberFunction = subscriberFunction; } + public [$$observable]() { + return this + } + public subscribe(observer: Observer): Subscription { let subscriptionOrCleanupFunction = this.subscriberFunction(observer); diff --git a/test/QueryManager.ts b/test/QueryManager.ts index c2818e74b2e..4b5aa7ccb09 100644 --- a/test/QueryManager.ts +++ b/test/QueryManager.ts @@ -25,6 +25,10 @@ import { Document, } from 'graphql'; +import * as Rx from 'rxjs'; + +import assign = require('lodash.assign'); + import mockNetworkInterface from './mocks/mockNetworkInterface'; describe('QueryManager', () => { @@ -391,6 +395,57 @@ describe('QueryManager', () => { done(); }); + it('supports interoperability with other Observable implementations like RxJS', (done) => { + const query = gql` + query people { + allPeople(first: 1) { + people { + name + } + } + } + `; + + const data = { + allPeople: { + people: [ + { + name: 'Luke Skywalker', + }, + ], + }, + }; + + const networkInterface = mockNetworkInterface( + { + request: { query }, + result: { data }, + } + ); + + const queryManager = new QueryManager({ + networkInterface, + store: createApolloStore(), + reduxRootKey: 'apollo', + }); + + const handle = queryManager.watchQuery({ + query, + }); + + const observable = Rx.Observable.from(handle); + + observable + .map(result => (assign({ fromRx: true }, result))) + .subscribe({ + next(result) { + const expectedResult = assign({ fromRx: true }, result); + assert.deepEqual(result, expectedResult); + done(); + }, + }); + }); + it('allows you to refetch queries', (done) => { const query = gql` query fetchLuke($id: String) {