Apollo-angular: watchQuery broken with rxjs 6.0.0-rc.0 and rxjs-compat 6.0.0-rc.0

Created on 4 Apr 2018  路  14Comments  路  Source: kamilkisiela/apollo-angular

```ts const GetTodo = gql
query getTodo {
getTodo(id: "1234") {
id
name
completed
}
}
`;
...
ngOnInit() {
this._apollo.query({ query: GetTodo })
.subscribe(x => console.log(x));
// OK

this._apollo.watchQuery<any>({ query: GetTodo })
  .valueChanges
  .subscribe(x => console.log(x)); 
  // DashboardComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

}
...
````

here is the call stack:
screen shot 2018-04-04 at 10 27 31 pm

here is the package.json (excerpt)
json "dependencies": { "@angular/animations": "5.2.9", "@angular/cdk": "^5.2.3", "@angular/common": "5.2.9", "@angular/compiler": "5.2.9", "@angular/core": "5.2.9", "@angular/forms": "5.2.9", "@angular/http": "5.2.9", "@angular/material": "^5.2.3", "@angular/platform-browser": "5.2.9", "@angular/platform-browser-dynamic": "5.2.9", "@angular/router": "5.2.9", "apollo-angular": "^1.0.1", "apollo-angular-link-http": "^1.0.2", "apollo-cache-inmemory": "^1.1.12", "apollo-client": "^2.2.8", "core-js": "^2.4.1", "graphql": "^0.13.2", "graphql-tag": "^2.8.0", "jwt-decode": "^2.2.0", "rxjs": "6.0.0-rc.0", "rxjs-compat": "6.0.0-rc.0", "zone.js": "^0.8.23" },
when I downgrade to rxjs 5.5.8, it works perfectly.

Sorry that I can't reproduce the error at stackblitz, since I don't know any public api. If you know some, I would love to do so. Thanks

Most helpful comment

upgrading to 1.1.0-rc.0 works!

All 14 comments

That's because RxJS no longer uses polyfill of Symbol.observable. It should be fixed by #580

A workaround for now is to add rxjs-compat package

rxjs-compat doesn't seem to solve the problem

@altschuler @kamilkisiela agree rxjs-compat doesn't solve the problem. I use

json { "rxjs": "6.0.0", "rxjs-compat": "^6.0.0", }

For anyone who is stuck by this and needs a temporary bandaid till fix is released to npm here is what i'm using for now:

add a file and put this code:

import { Observable as ApolloObservable } from 'apollo-client/util/Observable';
import { ObservableQuery, WatchQueryOptions } from 'apollo-client';
import { observable } from 'rxjs';
import { QueryRef, Apollo } from 'apollo-angular';
import { R, TypedVariables } from 'apollo-angular/types';

export function fixObservable<T>(
  obs: ObservableQuery<T> | ApolloObservable<T>
): ObservableQuery<T> | ApolloObservable<T> {
  (obs as any)[observable] = () => obs;
  return obs;
}

export class PatchedQueryRef<T, V = R> extends QueryRef<T, V> {
  constructor(obsQuery: ObservableQuery<T>) {
    super(fixObservable<T>(obsQuery) as ObservableQuery<T>);
  }
}

export class PatchedApollo extends Apollo  {
  constructor() {
    super();
  }

  watchQuery<T, V = R>(options: WatchQueryOptions & TypedVariables<V>): QueryRef<T> {
    return new PatchedQueryRef<T>(this.getClient().watchQuery<T>({...options}));
  }
}

Then in your app.module.ts add a manual provider override of:

{
   provide: Apollo,
   useFactory: () => new PatchedApollo()
}

At least for the watch query issue this fixes the problem for me and lets me move forward, the fixObservable method is exactly the same as in the PR.

Thank you @serates . Hopefully this gets fixed soon.

You can now yarn add apollo-angular@next, later today I'll release a stable version.

@kamilkisiela What will the version # be for stable version?

@raysuelzer 1.1.0

@kamilkisiela when exactly will this release be available?

@bradleybeighton 1.1.0-rc.0 is available right now, about 1.1.0 after the weekend, for sure.

upgrading to 1.1.0-rc.0 works!

1.1.0 is out!

Was this page helpful?
0 / 5 - 0 ratings